The Joy of HTML5 Audio: Tips & Tricks for Easy Sound Embedding

This is a forum topic for discussing the article "The Joy of HTML5 Audio: Tips & Tricks for Easy Sound Embedding":

http://www.elated.com/articles/html5-audio/

Learn how to use the HTML audio element to embed sounds in your web pages easily. Lots of code examples are included in the tutorial.

Hi there,

I've followed your tutorial and got the sounds running easily. Only the fallback won't work. I'm using IE8, and so it's supposed to work, since the condional addresses "lt IE9". When I look at your site with IE8 the same happens, so I couldn't have done something wrong. I would love to get it running. Maybe you have an idea?

This the error message in IE8:

"Details zum Fehler auf der Webseite

Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; Mozilla/4.0 (compatible; MSIE 7.0; Win32; 1&1); GTB7.1; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Zeitstempel: Mon, 5 Sep 2011 12:54:07 UTC


Meldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.
Zeile: 40
Zeichen: 66
Code: 0
URI: http://www.elated.com/res/File/articles/authoring/html/html5-audio/all-browsers.html


Meldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.
Zeile: 41
Zeichen: 67
Code: 0
URI: http://www.elated.com/res/File/articles/authoring/html/html5-audio/all-browsers.html"

Thanks in advance
Peter

@Hoelscher: Hmm, it works fine for me when using IE9 in IE7/8 mode. The browser asks if it's OK to use the Windows Media Player plugin - when you agree then the embedded player appears, and you can start playing by clicking the Play Music button.

Could it be that your particular IE doen't have the plugin installed, or it's being blocked by the browser's security settings?

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Hi Matt.

Thans for your reply. I've tested the page in other IE9, with the IE8 emulation on, but always the same; I get this error message, the the object doesn't support this method, whatever thies means. You can have a look at my construction here: http://www.umbra.de/akademie/#section-2. In my IE8 it looks like this screenshot: http://www.umbra.de/IE8-mode.gif

I didn#t find any possibility to tweak the security options, so that it worked; maybe you can point me in the right direction?

Thanks again
Peter

@Hoelscher: Yes I get the same error (in English of course!) on your page when using IE9 in IE7/8 mode.

I looked at your page source and I can't see the fallback code there at all (i.e. the code in the "Supporting older versions of Internet Explorer" section at http://www.elated.com/articles/html5-audio/ ). So this is presumably why it's giving the error.

Add the fallback code to your page and it should then work.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Hi Matt

Sure the code isn't on my site anymore, I've been working on it recently to present it to my client. But it's much easier: In my IEs your fallback code also doesn't work: http://www.elated.com/res/File/articles/authoring/html/html5-audio/javascript-control.html. I've tried it with IE9 in IE8 mode and with a native IE8, the result is the error message in both cases.

Thank you for your effort. I have no idea, what can be wrong ...

Best regards
Peter

Hi Peter,

That is strange. As I say, my fallback code works fine in my IE9, in all modes!

Anyone else seeing any problems with the IE7/8 fallback code?

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Hi Folks -
I'm wondering if HTML5 will let me post an audio file that will continue to play once people click to other pages. Is there any way to do this in Html without flash?

--
Marci

@ Marci: Once the user leaves the page? No - unless you open the page containing the audio element in a separate window, or store it in a frame within a frameset. The same is true of Flash.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

The codes worked great . . thank you so much for sharing. We really wanted to have some background music playing on our main web page but wanted people to have the option to "stop" it as well.

I was wondering if there's a way that a single button could control pause and resume? For example, we have the music autoloading when you hit the page; the "pause" button stops the music buy we'd love it if hitting that same "pause" button would restart.

Anyone know if that's possible?

stu

WAIT - Found the answer and thought I'd share it with you.
After the audio code, paste:

<button type="button" onclick="aud_play_pause()">Play/Pause</button>
<script>
function aud_play_pause() {
var myAudio = document.getElementById("myTune");
if (myAudio.paused) {
myAudio.play();
} else {
myAudio.pause();
}
}
</script>

[Edited by stuseattle on 07-Oct-11 05:01]

@stuseattle: Yep, that should do the trick

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

I am a novice, so forgive me if this is too much to ask. But is there anyway that you can use this code but with your own button? For instance an image of the little speaker icon instead of the buttons that are picture here...?

http://www.elated.com/res/File/articles/authoring/html/html5-audio/javascript-control.html

@lifeofbirds: Sure - just replace:

  <button onclick="document.getElementById('myTune').play()">Play Music</button>

with something like this:

  <img onclick="document.getElementById('myTune').play()" src="mybutton.png" alt="Speaker icon" title="Play Music">

etc...

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Sweet as ....