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

  You are currently not logged in. You can view the forums, but cannot post messages. Log In | Register

21-Dec-10 00:00
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.
05-Sep-11 08:57
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
07-Sep-11 03:51
@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
07-Sep-11 07:27
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
12-Sep-11 06:13
@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
12-Sep-11 06:54
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
15-Sep-11 03:25
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
29-Sep-11 13:32
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
30-Sep-11 02:47
@ 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
07-Oct-11 05:52
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]
10-Oct-11 07:04
@stuseattle: Yep, that should do the trick

--
Matt Doyle, Elated
17-Oct-11 17:25
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
19-Oct-11 05:55
@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
24-Feb-13 00:46
Sweet as ....
24-Dec-13 22:50
All the examples i see has a set path for the source.
Source =folder/christmas.mp3.....
I need the path to be a string
Like
String= what ever the user chooses.
Source ¥¥=string.

Any help on the syntax?
25-Dec-13 11:22
document.getElementByid('audio_element_id').src = ...


Bearing in mind that javascript cannot be used to search the user's local harddrive OR the server for the file to play, so you will have to create an array of existing media files to select from, or provide a means for the user to upload media.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
25-Dec-13 11:26
I have a QR scanner that will call on the PHP page.
Depending on what the QR scanner submits to the PHP I wanted to select different audio sources.

Which will be sitting on the server.
Is the source needs to come from a string or a php get statement
Any sugestions ?
25-Dec-13 11:35
Any PHP code is over and done with before the browser even gets document source to start rendering it. So the PHP code has to set the element source attribute to the required value.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
01-Mar-14 18:57
Matt:

I'm having problems with IE8 on XP. Your demo page loads with an error at Line 40, Character 66:

Object doesn't support this property or method.

Examining your source code, L40/C66 is the first "o" in:

"document.getElementById('myTuneObj').play()"

which seems like an odd place for the parser to have detected the error, but that's Character 66 assuming that the first column of the line is 1.

When I display your demo page, the audio object is displayed as a very skinny box with what appears to be an orange "i" inside. None of the button controls work.

As a noob at media stuff, I've noticed a couple of things about your code that may or may not be significant.

1. In the <object> declaration, I see 'type="audio/x-mpeg". In other references, I've seen the type listed as "mpeg". Is the "x-" prefix correct?

2. In the button declarations, the ID used is 'myTune' while in the script the ID used is 'myTuneObj'. I'm assuming that, like CSS, the script overwrites the assignments to the buttons such that they point to the <object> instead of the <audio>. Is that correct?

3. Is there any software that must be loaded on the XP machine to respond to the creation of the <object>?

4. Are there any Windows security setting concerns? (I've seen some stuff on the 'net suggesting that might be an issue.)

Searching the 'net for other solutions turns up some pretty heavyweight stuff using various JS libraries. I like your lightweight solution, but have no idea how to fix it. I'm hoping that you already know the answer.

Thanks in advance for your assistance with this issue. If you don't have an XP machine on which to test, I'll happily run test cases for you on mine.

Greg
02-Mar-14 09:07
"which seems like an odd place for the parser to have detected the error, but that's Character 66 assuming that the first column of the line is 1."

That's not where the error IS, just where it occurred when the interpreter tried to execute code and couldn't.

The actual error will be earlier in the source code not where it is reported.

However IE8 does NOT and never will support HTML5 audio, IE9 was the first version to do so.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
02-Mar-14 11:59
After considering the fact that IE7/8 will be in use less and less, especially with the EOL of XP, I've decided to side step the issue of providing a player on my web page for those users.

Instead, I offer the following solution which simply requires that those users download the sound file and play it in their MP3 player.

<!--[if gte IE 9]><!-->

<audio controls preload="auto">
<source src="media/hear_me.mp3" type="audio/mpeg">
<source src="media/hear_me.ogg" type="audio/ogg">
</audio>

<!--<![endif]-->

<!--[if lt IE 9]>

<a href="media/hear_me.mp3">Click to download my message.</a>

<![endif]-->

The conditional comments around the <audio> section are treated as simple comments by all browsers other than IE, so those browsers provide a player to the user. And IE 9+ does the same.

For IE 7/8, the second conditional comment surrounds a link to the MP3 file so that those users can download the file.

For the purposes of my web page and my user set, I decided that this was the right balance of usability and my development time since most of my users probably aren't using IE 7/8 even now, and launching an external player does not strike me as a problem. YMMV.

Greg
08-Apr-14 07:36
I've been trying for weeks to get audio to play on the homepage of my site, for mood setting purposes. I'd tried dozens of approaches recommended by other sites, and none of them worked. This morning I came across your site and method, and fifteen minutes later its working fine in IE and Firefox, but not in Chrome (not too worried I hate Chrome with a vengeance). That time included converting the file from .wav to .mp3 and .ogg and uploading the new homepage and the audio files. BRILLIANT! http://tocsin-bang.info

[Edited by tocsin on 08-Apr-14 06:38]
08-Apr-14 15:47
Found the problem and it had nothing to do with the html! Its just a problem with Chrome, I've used a workaround that wouldn't suit everyone. By default my soundcard settings in W8 are for 5.1, just changed it to 2.1 and everything is fine.
05-May-14 12:18
You use three buttons. I understand how to use my own buttons in place of these, but is it also possible to combine the play and pause functions into a single button?
05-May-14 14:01
Yes.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
05-May-14 14:20
Ah, good.

How?
05-May-14 16:07
Toggle the button's function depending on it's state when clicked.

It's exactly the same as the hundreds of show/hide functions that are in use.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
06-May-14 04:56
Thanks.

Pity you don't know how to do it yourself, otherwise you could have provided an example. Still, I shall see what I can find.
06-May-14 11:57
Oh I do, that's how I am able to tell you exactly what you need to find out.

Learning it for yourself will teach you FAR more than me simply "spoon-feeding" you an instant solution in working code.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
25-Jun-14 09:52
Very useful and smart solution. It saved my day actually because I was strugling to control the play/pause elements using javascript and having lot of conflicts with my existing javascript plugins on my website.

A five star to you man. Keep up the good work.

Thanks

--
Talha Islam Sayel
16-Apr-15 02:09
Hi,

I am an ABSOLUTE beginner at this, Ive read through some text books and other sites and your explanation seems to be the most simple.

Ive copied the instructions, but still cant get any sound when I click my "OK" button.

<!DOCTYPE html>
<html>


<head>
<audio id="sound">
<source src="isi.BANNER/beep26.wav">
</audio>


<button onclick="document.getElementById("sound").play()">OK</button>

</head>

<body>

</body>

</html>

What am I doing wrong?
Thanks.
16-Apr-15 06:59
Does the browser you are using support HTML5 Audio?

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
16-Apr-15 07:02
AND,


is the wave file in the same folder on the server as the HTML document and is it spelled EXACTLY the same, including capitalisation?

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
16-Apr-15 10:24
Actually I havent put the wave file on the server yet, the path is from an internal folder on my computer. My next step is to put it on the server and make it external (...is that the right word..?).

I figured it out, I just separated java script and html5 instead of <button onclick=getElement.....>, added this function to java script.

Thanks anyways:)
14-May-15 04:36
You are an idiot, I'll just keep on deleting your spammy crap and I assure you that;

YOU WILL get bored before I do.

[Edited by chrishirst on 14-May-15 16:32]
14-May-15 20:58
Excuse me? That wasnt a spammy crap message. I was genuinely asking how to write some codes.
15-May-15 06:57
No not you, ... the spamming idiot (roteiro) who's post I edited.


But for genuine questions please start a new thread rather than reuse a thread that is five years old and is actually for discussing a specific article. Make reference to the article certainly, but necroposting (posting in a long dead thread) only raises suspicion of your motives.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
15-May-15 07:12
Thanks, I emailed elated asking how to start a new thread but received no reply.

My bad, for not realising this thread was 5 years old. Can you please tell me how to start my own discussion for the future?
15-May-15 08:25
>>" I emailed elated asking how to start a new thread but received no reply. "

You should read this.

http://www.elated.com/articles/the-future-of-elated/


>>"please tell me how to start my own discussion for the future?"

At the top of every forum category (http://www.elated.com/forums/authoring-and-programming/ for example), there is a link for "Post new topic". that will start a new thread in that section.
If you want a quicker response, give me a topic 'bump' (chris [at] webmaster-talk [dot] eu) and I'll see what I can do.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
30-Oct-15 13:50
Hey was wondering if you could do the same with getting the some album art when the song changes or cover for the each track
31-Oct-15 09:38
Only if you already had the image URI coded into the script and rewrote the code to change the src attribute of an image element at the same time as it changed the audio track.

But that addition is for you to experiment with, this article is for you to learn how to embed and play audio files using HTML5. It is not a fully operational "web media player" that you can just 'plugin' to a web document.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
04-Nov-15 14:48
Hello. I can not figure out why the audio controls are working fine for Chrome, Safari, & Firefox, but will not work on Internet Explorer. I am getting the following message: "Error: Unsupported audio type or invalid file path." I have verified that all of the files are in the correct folder, named correctly, and all of them play fine.

Here is the code:
<audio controls>
<source src="http://creationkidz.com/wp-content/themes/3RF-site/music/sample-page-33.mp3" type="audio/mp3">
<source src="http://creationkidz.com/wp-content/themes/3RF-site/music/sample-page-33.aac" type="audio/acc">
<source src="http://creationkidz.com/wp-content/themes/3RF-site/music/sample-page-33.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>

Here is the live page that the code is located on: http://creationkidz.com/sample-page-four/

I am at a loss and would appreciate any help. Thank you in advance.
04-Nov-15 17:44
@zerojjc: Your MP3 URL returns a 404 error.

--
Matt Doyle, Elated
05-Nov-15 08:38
Thank you for your response. It is so strange, the files are there in the same folder/path. The only difference between them is the file type. I can not understand why these paths are exactly the same but the browser can not find the files that end with .mp3 in that folder.
05-Nov-15 08:42
I dont know if this helps, but here is a screenshot showing that all of these files are in the correct folder: http://imgur.com/78dXQMT
05-Nov-15 09:20
I FIGURED IT OUT!

In FTP I decided to click “get info” on the .mp3 file and discovered the privileges for Group and World were not set to Read. I still have no idea why they were set properly for the .acc and .ogg files, but whatever I figured it out and now its working.
23-Dec-15 04:02
Hey,

I really like this post, it's really clear and to the point.
I'm also trying to add a player on a webpage but it doesn't work for me.

What I try to do is to play a wav file.
This works fine for Chrom and FireFox, but for IE it doesn't work. I'm using IE11.

I've also checked other websites and one website mentions IE doesn't support .wav files.

http://www.w3schools.com/html/html5_audio.asp

Your post mentions that IE supports .wav so now I'm a bit confused.
Could you please help me because I also need the .wav files to be able to play in IE.

Kind regards,

JKorsten

PS: the code I'm using is:


<html>
<head></head>
<body>
<audio controls>
<source src="audio.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
</body>
</html>
23-Dec-15 06:19
Internet Explorer only supports .wav format when using the IE proprietary bgsound element which is autoplay only.


https://www.w3.org/wiki/HTML/Elements/bgsound

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
23-Dec-15 06:47
Ok thanks for the quick reply.
Unfortunately that's not what I want.
I also tried the embed tag which works fine on IE and FF but this has troubles on Chrome where it ignores the autoplay/autostart tag (which is put to false). So everytime I start the page in chrome it starts playing (which I don't want).

So there isn't a way to make the playing of wav's work on IE, FF and Chrome?
23-Dec-15 11:57
As there is no one single way that it can be made to work in all browsers, you will have have to go through a

try { ... } catch { ... } finally ... (http://www.w3schools.com/jsref/jsref_try_catch.asp)

process to identify what works in each browser and deliver the appropriate code to that particular user agent.

It used to be known as "Browser sniffing" in the "bad old days".


So welcome to the wonderful world of browser programming.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
25-Feb-16 05:48
there is another way to play sound by using javascript i found a complete and good tutorial on www.talkerscode.com
and it is with demo also
http://talkerscode.com/webtricks/play-sound-on-notification-using-javascript-and-php.php

 
New posts
Old posts

Follow Elated