
How to play a sound in a web browser (it ain’t easy) - tortilla
http://mir.aculo.us/2011/03/16/how-to-play-a-sound-in-a-web-browser-it-aint-easy/
======
jlangenauer
Those of us who were around in the bad old days of midi files played from web
pages might consider difficulty in playing sounds to be a Good Thing.

~~~
plesn
Give me easy audio but no autoplay and I will be happy. The same applies for
video. In fact, in unicorn-land I would like it also for heavy animations. At
least one advantage with flash is Flashblock ;-)

~~~
dstein
Without autoplay you cannot build a web based app that has audible dings for
things like alerts or any sort of JavaScript music player or game. I'm okay
with a web browser having the option of disabling audio though.

~~~
plesn
No problem : play and further autoplay could be authorized on a per app basis.

------
DTrejo
Why no mention of jplayer.org? 37kb minified, flash fallback, works great
(<http://mixest.com>).

Maybe because he's not trying to play music.

------
gmac
The proposed solution uses JS to check what formats the browser reports
support for, in order to tailor the <audio>'s src attribute:

    
    
        if(!!(a.canPlayType && 
              a.canPlayType('audio/ogg; codecs="vorbis"')
             .replace(/no/, '')))
          a.src = "/sounds/ping.ogg";
        else if ...
    

Does anyone know if this is more successful than the standard HTML5 way, which
is to include in the <audio> element multiple <source> elements pointing to
different formats?

------
icandoitbetter
Generating sounds is rather straightforward with HTML5. On the other hand,
manipulating sound bytes (which would enable both synthesizer-like web apps
and audio streaming) really ain't that easy to do.

------
rwolf
I needed to make play sound in a browser today, and luckily remembered this
story. You have saved me a day of raging around the internet trying to get
sound to play in browser x.

~~~
rwolf
A working snippet based on the article, with some notes on implementation
gotchas: <https://gist.github.com/878907>

------
yuhong
There was also img dynsrc for video in IE, BTW.

------
etherael
I use soundmanager2 for a large project I'm currently working on, although it
has it's... foibles, it does not actually _require_ flash in most instances as
of latest release, it can also use HTML5 audio where available. And the size
of the library is relevant in terms of the work that has already been done for
you, though of course one of the aforementioned foibles is that it's a touch
hard to follow and you could fairly say the size contributes to that.

Personally I think lots of one letter variable names and liberal prefixing of
everything with _ is a bigger annoyance, but to each their own I guess.

------
drivebyacct2
Chrome

Has broad support and will play most stuff thrown at it. Also, no cross-
platform differences.

Thank you Chrome.

~~~
jah
I've found the claim that Chrome "will play most stuff thrown at it" to be a
false one. Here's a Chrome bug I discovered last month while hacking a Flask
application:

    
    
      mkdir static && wget http://www.soundjay.com/button/beep-1.mp3 -O static/beep.mp3 && python -c "import flask; flask.Flask(__name__).run()"
    

Then hit: <http://127.0.0.1:5000/static/beep.mp3>

The mp3 plays fine in Firefox (not natively of course), but doesn't play at
all in Chrome. The same problem extends to the HTML5 audio tag (eg. <audio
src="static/beep.mp3" />).

~~~
drivebyacct2
Works perfectly here. Not a real nice test tone though, heh.

