How can I play midi and/or audio files?

S

Stephen Kellett

Hi Folks,

How can I play midi and/or audio files using JavaScript?
I'm hoping there are some calls/APIs I can use that I am unaware of. My
JavaScript book from O'Reilly seems rather lacking in this area.

I'm looking for something like:

playMidiNote(pitch, duration);
playSoundFile(soundFileURL);

but more complex answers are also welcome :)

Stephen
 
T

Thomas 'PointedEars' Lahn

E

electrician

<html>
<head>
<title>Music Selector</title>
</head>
<body text="#FFFFFF" bgcolor="#000000" link="#006400" vlink="#006400"
alink="#FF0000">






<center>

<SELECT id=cancion
onchange=document.all.music.filename=document.all.cancion.value; size=1
name=Music>
<OPTION selected>::::::::::::::::: Choose Your Song Here
:::::::::::::::::</OPTION>
<OPTION
VALUE="http://www.yoursite.com/eltrain/godfathr.mid">Godfather
<OPTION VALUE="http://www.yoursite.com/eltrain/alive.mid ">Alive
<OPTION VALUE="http://www.yoursite.com/eltrain/feel.mid ">Feel
<OPTION VALUE="http://www.yoursite.com/eltrain/mission.mid">mission imp
<OPTION VALUE="http://www.yoursite.com/eltrain/eastern.mid">Eastern
<OPTION VALUE="http://www.yoursite.com/eltrain/thedance.mid ">The Dance
<OPTION VALUE="http://www.yoursite.com/eltrain/theseyes.mid ">These
Eyes
<OPTION VALUE="http://www.yoursite.com/eltrain/blues.mid">Blues
<OPTION VALUE="http://www.yoursite.com/eltrain/italy.mid">Italy
<OPTION VALUE="http://www.yoursite.com/eltrain/europe.mid ">Europe
<OPTION VALUE="http://www.yoursite.com/eltrain/argin.mid ">Argintina
<OPTION VALUE="http://www.yoursite.com/eltrain/poland.mid">Poland
<OPTION VALUE="http://www.yoursite.com/eltrain/india.mid">Optional
<OPTION VALUE="http://www.yoursite.com/eltrain/appal.mid ">Appalachia
<OPTION VALUE="http://www.yoursite.com/eltrain/wondrful.mid ">Wonderful
<OPTION VALUE="http://www.yoursite.com/eltrain/would_i.mid">Would I
<OPTION VALUE="http://www.yoursite.com/eltrain/no-woman.mid">No Woman
<OPTION VALUE="http://www.yoursite.com/eltrain/womnocry.mid ">Woman Cry
<OPTION VALUE="http://www.yoursite.com/eltrain/whatislo.mid ">What
<OPTION VALUE="http://www.yoursite.com/eltrain/stbyme.mid">Stand by
Your Man
<OPTION VALUE="http://www.yoursite.com/eltrain/malovwom.mid ">Man
<OPTION VALUE="http://www.yoursite.com/eltrain/chaingng.mid ">Chain
Gang

<OPTION value=http://www.yoursite.com/yanni/white.mp3>Crosby -
White Christmas</OPTION>
<OPTION value=http://www.yoursite.com/yanni/yanni-1.mid>Yanni -
Yanni-1</OPTION>
<OPTION value=http://www.yoursite.com/yanni/oneman's.mid>Yanni -
One Man's Dream</OPTION>
<OPTION value=http://www.yoursite.com/yanni/whisper3.mid>Yanni -
Whisper3</OPTION>
<OPTION value=http://www.yoursite.com/yanni/yanni2.mp3>Yanni -
Yanni -2 mp3</OPTION>
<OPTION value=http://www.yoursite.com/yanni/rainfall.mid>Yanni -
Rainfall</OPTION>
<OPTION value=http://www.yoursite.com/yanni/whisper.mid>Yanni -
Whisper</OPTION>
<OPTION value=http://www.yoursite.com/yanni/secrtvow.mid>Yanni -
Secret Vow</OPTION>
<OPTION value=http://www.yoursite.com/yanni/quit_man.mid>Yanni -
Quite Man</OPTION>
<OPTION value=http://www.yoursite.com/yanni/reflpass.mid>Yanni -
Reflections</OPTION>
<OPTION value=http://www.yoursite.com/yanni/morning.mid>Yanni -
Morning</OPTION>
<OPTION value=http://www.yoursite.com/yanni/nostal.mid>Yanni -
Nostalgia</OPTION>
<OPTION value=http://www.yoursite.com/yanni/onceupon.mid>Yanni -
Once Upon a time</OPTION>
<OPTION value=http://www.yoursite.com/yanni/swept.mid>Yanni -
Swept Away</OPTION>
<OPTION value=http://www.yoursite.com/yanni/passion.mid>Yanni -
Passion</OPTION>
<OPTION value=http://www.yoursite.com/yanni/aria.mid>Yanni -
Aria</OPTION>

</SELECT><BR />
<OBJECT id=music height="20" width="280"
classid=clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95>
<PARAM NAME="AutoStart" VALUE="-1">
<PARAM NAME="Balance" VALUE="0">
<PARAM NAME="DisplaySize" VALUE="0">
<PARAM NAME="Filename" VALUE="">
<PARAM NAME="Mute" VALUE="0">
<PARAM NAME="SelectionStart" VALUE="-1">
<PARAM NAME="SelectionEnd" VALUE="-1">
<PARAM NAME="ShowControls" VALUE="true">
<PARAM NAME="ShowAudioControls" VALUE="-1">
<PARAM NAME="ShowDisplay" VALUE="0">
<PARAM NAME="ShowPositionControls" VALUE="-1">
<PARAM NAME="Volume" VALUE="0">
<PARAM NAME="AudioStream" VALUE="-1">
<PARAM NAME="AutoSize" VALUE="0">
<PARAM NAME="AnimationAtStart" VALUE="-1">
<PARAM NAME="AllowScan" VALUE="-1">
<PARAM NAME="AllowChangeDisplaySize" VALUE="-1">
<PARAM NAME="AutoRewind" VALUE="1">
<PARAM NAME="BaseURL" VALUE="">
<PARAM NAME="BufferingTime" VALUE="5">
<PARAM NAME="CaptioningID" VALUE="">
<PARAM NAME="ClickToPlay" VALUE="-1">
<PARAM NAME="CursorType" VALUE="0">
<PARAM NAME="CurrentPosition" VALUE="-1">
<PARAM NAME="CurrentMarker" VALUE="0">
<PARAM NAME="DefaultFrame" VALUE="">
<PARAM NAME="DisplayBackColor" VALUE="0">
<PARAM NAME="DisplayForeColor" VALUE="16777215">
<PARAM NAME="DisplayMode" VALUE="0">
<PARAM NAME="Enabled" VALUE="-1">
<PARAM NAME="EnableContextMenu" VALUE="-1">
<PARAM NAME="EnablePositionControls" VALUE="-1">
<PARAM NAME="EnableFullScreenControls" VALUE="0">
<PARAM NAME="EnableTracker" VALUE="-1">
<PARAM NAME="InvokeURLs" VALUE="-1">
<PARAM NAME="Language" VALUE="-1">
<PARAM NAME="PlayCount" VALUE="100">
<PARAM NAME="PreviewMode" VALUE="0">
<PARAM NAME="Rate" VALUE="1">
<PARAM NAME="SAMILang" VALUE="">
<PARAM NAME="SAMIStyle" VALUE="">
<PARAM NAME="SAMIFileName" VALUE="">
<PARAM NAME="SendOpenStateChangeEvents" VALUE="-1">
<PARAM NAME="SendWarningEvents" VALUE="-1">
<PARAM NAME="SendErrorEvents" VALUE="-1">
<PARAM NAME="SendKeyboardEvents" VALUE="0">
<PARAM NAME="SendMouseClickEvents" VALUE="0">
<PARAM NAME="SendMouseMoveEvents" VALUE="0">
<PARAM NAME="SendPlayStateChangeEvents" VALUE="-1">
<PARAM NAME="ShowCaptioning" VALUE="0">
<PARAM NAME="ShowGotoBar" VALUE=0">
<PARAM NAME="ShowStatusBar" VALUE="0">
<PARAM NAME="ShowTracker" VALUE="-1">
<PARAM NAME="TransparentAtStart" VALUE="-1">
<PARAM NAME="VideoBorderWidth" VALUE="0">
<PARAM NAME="VideoBorderColor" VALUE="0">
<PARAM NAME="VideoBorder3D" VALUE="0">
<PARAM NAME="WindowlessVideo" VALUE="0">
</OBJECT>
</center>

</body>
</html>
 
R

Randy Webb

(e-mail address removed) said the following on 3/26/2006 1:37 AM:

<SELECT id=cancion
onchange=document.all.music.filename=document.all.cancion.value; size=1
name=Music>
Click to expand...

What? No GOTO? Aww man, just when I was thinking you were coming around.....

BTW, document.all is IE only. The web is more than that.
And even in IE it doesn't play music on my PC even when I add legitimate
tunes.

Wanna play audio files? Try an M3U file......
 
E

electrician

IE forever! Netscape is dead! Just click my public webstat counter at
electrician.com
The windows media player is dynamite. Just look at my illustrious site
http://www.alaskavirtualtour.com Wanna play music, video, slide
shows, virtual movies, applets, and and the whole she bang mixed
together ...take a look at this dynamic site. Try that with your M3U
whatever.
And all the code is wide open ready for stealing.
On GOTO, who needs goto? Just add an if line and a couple brackets.
What, 2000 lines of code separation and six weeks of programming? What
are you some kind of dumbee that can't keep track of those brackets.
GOTO is for the simple minded and we don't want simple minded people
doing this stuff. This way the acamedians can keep a job.
 
R

Randy Webb

(e-mail address removed) said the following on 3/26/2006 5:46 AM:
IE forever! Netscape is dead!
Click to expand...

Who said anything about Netscrap, err, NetJunk, err, you get the idea.
But, EOLAS loves IE also.....
Just click my public webstat counter at electrician.com
Click to expand...

And exactly ~97.93453% of stats are made up on the spot.
The windows media player is dynamite. Just look at my illustrious site
http://www.alaskavirtualtour.com Wanna play music, video, slide
shows, virtual movies, applets, and and the whole she bang mixed
together ...take a look at this dynamic site. Try that with your M3U
whatever.
Click to expand...

Do you *really* wanna know what that crappy site looks like in my
browser? I don't think you do.

And, just for you, M3U files are very specifically oriented towards
Microsoft. Maybe if you spent as much time learning what you are talking
about as you do making an idiot of yourself you would know what an M3U
file is.
And all the code is wide open ready for stealing.
Click to expand...

No thanks. Nothing there worth stealing.
On GOTO, who needs goto?
Click to expand...

Not for you, as you wouldn't comprehend the implications but for anybody
else reading this thread:

<URL:
http://groups.google.com/group/comp...2678cf2ffda749?q=GOTO&rnum=1#142678cf2ffda749
Is the thread where *you* were trolling about JS' lack of a GOTO. Does
that mean you finally admit that GOTO is useless?
Just add an if line and a couple brackets.
Click to expand...

You are learning I see.
What, 2000 lines of code separation and six weeks of programming?
Click to expand...

Who said anything about 2,000 lines of code separation and six weeks? Is
that how long it took you to write a simple function to swap images?
What are you some kind of dumbee that can't keep track of those brackets.
GOTO is for the simple minded and we don't want simple minded people
doing this stuff. This way the acamedians can keep a job.
Click to expand...

You really are as stupid as you act, you know that?
 
E

electrician

Sounds to me like you have a crappy browser that can't read excellent
code. What are you, one of those save the trees, PETA, save Sun and
Netscape self sacrificing geeks? Give it up, move to Windows and IE.
Be a winner. Oh yes, I know about M3U files and they didn't work out
and are not simple enough for my work ethics. Don't forget, I am a
construction electrician with 35 years experience with a Math degree
from 31 years ago. I don't think like a geek, thank god. I do believe
in working with tools and doing hard construction work because it gives
you a concrete background the practical application of time.
Production verses time, get it! You only need to know one thing in
life, kid. And that is know that one thing. My code does the job, and
does it well. You perfectionists from academia waste many hours
learning how to waste your time learning what you don't need to know.
I am proud to say, I have never set foot in a classroom to learn
JavaScript or Perl. Self taught all the way, and proud of it.
On the two thousand lines of code, try the raceway fill calculator.
This program performs a complex engineering calculation. One of the
problems with programmers is that they know how to program but don't
know anything else. They have to be lead by the hand step by step.
But for $100 and hour being dumb is profitable for them, but not
affordable for the rest of us. I had rather hack my way through than
be taken for a ride. Have a nice day, Geek.
 
S

Stephen Chalmers

Stephen said:
Hi Folks,

How can I play midi and/or audio files using JavaScript?
Click to expand...

I have never seen a satisfactory answer to playing sound files
interactively, so here's my solution:

<html>
<body>

<!--
If available, copy the Windows .wav files: blip ding & chimes into the
same folder as this file, or substitute your own.

Files play on mouseover and abort on mouseout
-->

<a href='#'>Blip</a> - <a href='#'>Ding</a> - <a href='#'>Dumb</a> - <a
href='#'>Dumb</a> - <a href='#'>Chime</a>

<script type='text/javascript'>

/*
* Sound File Player (C)2006 Stephen Chalmers
*
* Donations to: http://www.hotspot.freeserve.co.uk/luv2payu/
*
*/

function SCmediaPlay(soundFile)
{
this.soundFile=soundFile;
this.objRef=null;
this.preLoad();
}

SCmediaPlay.prototype.removeObj=function()
{
if(this.objRef!=null)
{
document.body.removeChild(this.objRef);

this.objRef=null;
}
}

SCmediaPlay.prototype.playSound=function()
{

this.removeObj();

this.objRef=document.createElement('embed');

this.objRef.setAttribute("width","0");

this.objRef.setAttribute("height","0");

this.objRef.setAttribute("hidden","true");

this.objRef.setAttribute("src", this.soundFile);

document.body.appendChild(this.objRef);

}

SCmediaPlay.prototype.preLoad=function() /* preloads the associated
plugin & possibly the media file also */
{
document.write("<embed src='"+this.soundFile+"' hidden='true'
autostart='false' width='0' height='0'>");
/* Opera won't recognise autostart using creatElement */
}

if(document.body && document.createElement)
{

/* == CONFIGURATION ==
*
* Populate the object table below with your own filenames and link
indices.
* Preserve the syntax as shown.
*
* ind == the zero-based index of the link that plays a sound.
*
* f == the file to be played by the corresponding link (remember to
add a relative
* path if needed)
*
*/


var SCmediaTable=[ {ind: 0, f: 'blip.wav' },
{ind: 1, f: 'ding.wav' },
{ind: 4, f: 'chimes.wav'}

];


var SCobjTable=[];

for(var i=0; i<SCmediaTable.length; i++)
{
SCobjTable=new SCmediaPlay(SCmediaTable.f)
document.links[ SCmediaTable.ind ].onmouseover=
new Function("SCobjTable["+i+"].playSound()") ;
document.links[ SCmediaTable.ind ].onmouseout=
new Function("SCobjTable["+i+"].removeObj()") ;
}

}
</script>

</body>
</html>
 
E

electrician

<Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices -
http://www.JavascriptToolbox.com/bestpractices/ >

I have looked at your library and don't see a cotton picking thing that
I could have used when I wrote my 17 calculators at electrician.com. I
see from you bio that you started in 1993. I started in 1962
programming a VAC machine in Fortran 2 using punch cards. From there
to Fortran 4, PL/1, Basic, Cbasic, Sbasic, Olivettie programma 101
using the Taylor series to find trig functions, Javascript, and Perl.
And you call me stupid? I would say the best and brightest part of you
ran down your daddies leg when I was doing Fortran (thanks to Lee
Marvin.) Your library may have protability but it does not have
functionality and is not practical for real world applications. You had
better stay in cyberland, kid. And you are a consultant? God help us!
 
R

Randy Webb

(e-mail address removed) said the following on 3/27/2006 12:12 AM:
<Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices -
http://www.JavascriptToolbox.com/bestpractices/ >

I have looked at your library and don't see a cotton picking thing that
I could have used when I wrote my 17 calculators at electrician.com.
Click to expand...

Maybe, maybe not. But that is not my library. Had you read it, and did a
little research on it, you would have know it was Matt Kruse's library
site. Or did you miss the image in the top left corner of the
bestpractices page that says "Matt Kruse's Javascript Toolbox"?
I see from you bio that you started in 1993.
Click to expand...

Again, that isn't my bio.
I started in 1962 programming a VAC machine in Fortran 2 using punch
cards. From there to Fortran 4, PL/1, Basic, Cbasic, Sbasic, Olivettie
programma 101 using the Taylor series to find trig functions, Javascript,
and Perl.
Click to expand...

And in 44 years you haven't learned to write efficient code?
Experienced Idiots are still Idiots.
And you call me stupid?
Click to expand...

Actually, what I said was "You really are as stupid as you act" and as
long as you act stupid, my opinion of you will stay that way. Want me to
think of you as intelligent? Then act that way.
Your library may have protability but it does not have functionality and
is not practical for real world applications. You had better stay in
cyberland, kid.
Click to expand...

Again, they are not my libraries. If you bothered to research at all you
would know that I am probably the *last* person in this group to use a
library as I don't care for them. I prefer a single, one off, solution
to a specific problem. Always have and probably always will.
 
S

Stephen Kellett

In message said:
I have never seen a satisfactory answer to playing sound files
interactively, so here's my solution:
Click to expand...

Thanks Stephen, you clearly understood the question. An answer that
doesn't involve HTML tags.

Stephen
 
S

Stephen Chalmers

What a bunch of crap!
Click to expand...

That certainly would be reaction of any interpreter to 'your' solution.

You might want to pass that on to the Hispanic from whom you stole it.
 
G

Gernot Frisch

Stephen Kellett said:
Hi Folks,

How can I play midi and/or audio files using JavaScript?
I'm hoping there are some calls/APIs I can use that I am unaware of.
My
JavaScript book from O'Reilly seems rather lacking in this area.

I'm looking for something like:

playMidiNote(pitch, duration);
playSoundFile(soundFileURL);

but more complex answers are also welcome :)
Click to expand...

Try a shockwave of flash object that plays the file for you. This is
the most x-browser compatible solution.
 
T

Thomas 'PointedEars' Lahn

Stephen said:
I have never seen a satisfactory answer to playing sound files
interactively, so here's my solution:

<html>
Click to expand...

Not Valid. said:
[...]
<a href='#'>Blip</a> - <a href='#'>Ding</a> - <a href='#'>Dumb</a> - <a
href='#'>Dumb</a> - <a href='#'>Chime</a>
Click to expand...

Displays even if client-side script support and DOM support is not
available.
[...]
SCmediaPlay.prototype.playSound=function()
{

this.removeObj();

this.objRef=document.createElement('embed');
Click to expand...

There is no `embed' element in HTML, so this is not supposed to work in a
standards compliant UA. And any UA that supports DOM Level 2 Core should
also support the standards compliant `object' element, so you should create
that.

You do not do any feature test, which is error-prone.

this.objRef.setAttribute("width","0");

this.objRef.setAttribute("height","0");

this.objRef.setAttribute("hidden","true");

this.objRef.setAttribute("src", this.soundFile);
Click to expand...

Neither of this is supposed to work. Especially, setAttribute() is known
to have buggy implementations. Both the proprietary `embed' element and
the standards compliant `object' element have `param' child elements that
should be used. (Otherwise there is no sound with certain non-common
plugins, such as the mplayer-plugin on GNU/Linux.)
[...]
document.write("<embed src='"+this.soundFile+"' hidden='true'
autostart='false' width='0' height='0'>");
Click to expand...

See above.


PointedEars
 
T

Thomas 'PointedEars' Lahn

Stephen said:
[...] Stephen Chalmers said:
How can I play midi and/or audio files using JavaScript?
Click to expand...

I have never seen a satisfactory answer to playing sound files
interactively, so here's my solution:
Click to expand...

Thanks Stephen, you clearly understood the question.
Click to expand...

It is not a question of understanding the question. It is about
knowing (or not knowing) that there is no such API yet as it would
have to access different plugins, some of which not even provide
an ECMAScript language binding. Standardization of plugins has
started, but is not finished yet. So solutions are all based on
speculation.
An answer that doesn't involve HTML tags.
Click to expand...

Yet it is a solution for a certain kind of Web browsers (not
standards compliant) and a certain kind of plugins (Windows Media
Player). Nothing that qualifies as viable in a Web context.


PointedEars
 
S

Stephen Chalmers

Thomas said:
Stephen Chalmers wrote:


Displays even if client-side script support and DOM support is not
available.
Click to expand...

That was the intention. Presumably in practice the links would actually
go somewhere regardless.
[...]
SCmediaPlay.prototype.playSound=function()
{

this.removeObj();

this.objRef=document.createElement('embed');
Click to expand...

There is no `embed' element in HTML, so this is not supposed to work in a
standards compliant UA. And any UA that supports DOM Level 2 Core should
also support the standards compliant `object' element, so you should create
that.
Click to expand...

It's a matter of what can be made to work. You should know that the
existence of standards does not mean that they can be relied upon
unconditionally. One has to work with what is known to exist.

I tried to use 'object' but IE wouldn't hide the plugin. Is there a
standard for that?

You do not do any feature test, which is error-prone.
Click to expand...

if(document.body && document.createElement)

The way things are now, I considered the above to be adequate. If
course if someone knows different...

Neither of this is supposed to work.
Click to expand...

Is that according to a standard or just folklore? As far as I could
test, it does.
Especially, setAttribute() is known
to have buggy implementations.
Click to expand...

Initially I tried to avoid using setAttibute, but it didn't work on one
browser.
I can test only within the scope of platforms and software available to
me.
 
S

Stephen Kellett

Thomas 'PointedEars' said:
Stephen Kellett wrote:
Yet it is a solution for a certain kind of Web browsers (not
standards compliant) and a certain kind of plugins (Windows Media
Player). Nothing that qualifies as viable in a Web context.
Click to expand...

Given that that identifies 90% of the target market, it does qualify as
viable in a web context. I'd rather have 100% and platform neutral, but
90% is good enough (*). But really what I wanted was a simple javascript
API as I described, and this was the only answer that got close.

I think the real answer is that none exists yet. Which is a shame and
thus I have to consider using the Flash/Shockwave solution suggested by
another poster.

Thank you to all that answered.

Stephen
(*) I asked the question so I get to decide what % qualifies.
 
T

Thomas 'PointedEars' Lahn

Stephen said:
[...] Thomas 'PointedEars' Lahn [...] writes
Yet it is a solution for a certain kind of Web browsers (not
standards compliant) and a certain kind of plugins (Windows Media
Player). Nothing that qualifies as viable in a Web context.
Click to expand...

Given that that identifies 90% of the target market, it does qualify
as viable in a web context. [...]
Click to expand...

Your figures are wrong, and they do not matter.


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

I am trying to make an auto-play thing. How do I make it work? 5
I am trying to make an audio player, how do I get the selected file to be playable? 5
HTML5 Audio - How To Play Shoutcast streams 1
play sound on Ubuntu 10.4. (pulse audio?) 1
Anybody knows how to get the following imformation from a midi file? 1
I need help in understanding these files on my phone, Could someone help me understand these files? Urgent help needed. Please help. 1
Please complete a task, I have one task for you 0
receive and react to MIDI input 7

Members online

Total: 32 (members: 2, guests: 30)
Robots: 428

Forum statistics

Threads
473,769
Messages
2,569,576
Members
45,054
Latest member
LucyCarper

Latest Threads

Top