Adding Sound to Your Website: Tips and Tricks for IE10 and MP3 Files

biferi · Nov 18, 2013

I know everyone says do not put Music or any sounds on a WebSite.

But my WebSite has Diferant Galleries on it and every Gallery has it's own theme.

So for my Fall Gallery Page I have a Spooky Sound that I want to play one time.

I have iE10 and I have an MP3 file.

And I can not get it to play and I think I just need the right code.

I did go to wd3 WebSite and yes when I click the Tabs for try this code they all work.

But when I put it on my page they do not work.

Can anyone give me maybe say a Plane code that will work on any iE?

Or any help thanks.

jedishrfu · Nov 18, 2013

The code is javascript? If so have you added the necessary library imports at the top of the page.

Look at the working example and see what they and then decide what you may need.

As an example, many webpages use jQuery:

http://jqueryui.com/datepicker/

click on the source button to see the raw web page:

Code:

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>

the following code pulls in the jquery library of methods and css style sheets:

Code:

<link rel="stylesheet" href="[PLAIN]http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"[/PLAIN]  />

<script src="[PLAIN]http://code.jquery.com/jquery-1.9.1.js"></script>[/PLAIN] 
<script src="[PLAIN]http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>[/PLAIN] 

<link rel="stylesheet" href="/resources/demos/style.css" />

Here's the code that invokes the datepicker()

Code:

<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>

Code:

</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>

biferi · Nov 19, 2013

Well how can I get this code to work

<audio autoplay="true">
<source src="people.mp3" type="audio/mpeg">
</audio>

jedishrfu · Nov 19, 2013

Here's a tutorial you can try:

http://www.html5tutorial.info/html5-audio.php

Also you may need an audio plugin for your browser, if its still doesn't work.

One last thing to note is that this is for html5 standard, so your browser should support that.

biferi · Nov 19, 2013

I have win7 and iE 10 and put this code on my page
<audio src="people.wav" controls></audio>

A player is displayed on the page and at the bottom of the page it says iE10 Blocked the Contant.

So I clicked Allow Contant.

Then the Player says Error Bad Sorce.

How should I make my Code?
Thanks.

Mark44 · Nov 19, 2013

Try a different .wav file.

jedishrfu · Nov 19, 2013

biferi said:

I have win7 and iE 10 and put this code on my page
<audio src="people.wav" controls></audio>

A player is displayed on the page and at the bottom of the page it says iE10 Blocked the Contant.

So I clicked Allow Contant.

Then the Player says Error Bad Sorce.

How should I make my Code?
Thanks.

Yeah that sounds like a corrupted audio file. Might even have a virus or some sort of malware.

biferi · Nov 19, 2013

What other wav file all wav files do the same thing.

Is the code I put right or am I doing something?

It did display a player but it just says Bad Sorce?

jedishrfu · Nov 19, 2013

okay say your webpage is:

http:/www.uuu.com/happybirthday.html

and on that page you have a happybirthday.mp3 and reference it via

Code:

 <audio src='happybirthday.mp3'>

then the actual mp3 file must be in the same directory as the happybirthday.html web page file.

Alternatively, if you tend to store your mp3 files in a subdirectory say named 'bdaysongs' then you need to include that in your
audio tag:

Code:

<audio src='bdaysongs/happybirthday.mp3'>

The rule is that things referenced in your web page are relative to the directory holding the web page.

biferi · Nov 20, 2013

OK I have my
people.wav file in the same folder as the HTML file

And I have the code like this

<html>
<body>

<audio src="people.wav" controls></audio>
</body>
</html>

And I have the right massage to give you now.

A Audio Player is displayed and in the Black Player it says
ERROR PLAYBACK WAS ABORTED.

Now at the bottom of the screen iE10 pups up a window that says
Internet Explorer has Bloked Restricted Contant.

So I click Allow.

Then back on the Audio Play it now says
Bad Sorce.

And my file is a wav format
PCM s16 LE araw

does this help?

jedishrfu · Nov 20, 2013

What happens if you use IE10 as a file browser using the url file:/// and then find the people.wav in the list of files and subdirectories shown?

Can you play it then?

You either have a file that can't be played by the native IE10 player or the blocking permissions are getting in the way. My guess is you need to modify your blocking permissions instead of pressing the ALLOW button for this file. It may be that IE10 still can't get to the file after you allow it.

Also have you tried your webpage with Firefox or Google Chrome or some other browsers?

biferi · Nov 20, 2013

I think I can help

I just tried this coded

<object>
<param name="autostart" value="true">
<param name="src" value="people.wav">
<param name="autoplay" value="true">
<param name="controller" value="true">
<embed src="eureka.wav" controller="true" autoplay="true" autostart="True" type="audio/wav" />
</object>

And the player gets displayed but does not play.

But at the bottom of my screen it says
iE has Blocked Scrips or ActiveS Controles.

And I click Allow and it does nothing.

So I think it is my iE setting am I right?

But if I go to say the wD3 website and click the test Tabs all the file play on there website.

And yes I did check my win7 settings. I whent into Turn On Off windows Features and Window Media Center is Checked and Window Media Player is checked.

So they are installed.

Does all of this help?

jedishrfu · Nov 20, 2013

so did you try using your browser to browse your files via file:/// to see if it can play local copies of your mp3 songs?

we need to isolate the error is it the browser player itseld or the browser settings not allowing remote files from being played.

Adding Sound to Your Website: Tips and Tricks for IE10 and MP3 Files

FAQ: Adding Sound to Your Website: Tips and Tricks for IE10 and MP3 Files

What are the benefits of adding sound to a website?

Can any type of sound file be used on a website?

How can I make sure my website's sound works on different browsers?

Are there any considerations for optimizing sound files for web use?

Are there any potential drawbacks to adding sound to a website?

Similar threads

Hot Threads

Recent Insights