mp3 sound on webpage for mobiles/tablets

[tetrahall]

Hello,

I am using this code in a web page to play a sound file:-

<embed src="file.mp3" loop="true" autostart="true" hidden="true">

The page has some text. It is meant to be displayed while the sound file is played.

It works as expected on laptops + desktops.

However, on mobiles and tablets, when the sound starts the text disappears!

How can I get it to work on mobiles/tablets where the text remains on the screen while the sound file is played?

Thanks in advance!

David

[redwudz]

Which mobiles/tablets have you tried it on? What OS's are they running? That info may help with an answer.

And I assume those devices will play a .mp3 normally? Then it's not a codec problem.

[tetrahall]

Thank you for your response.

They are the popular types; iphone and galaxy with their default operating systems. They do play mp3 sound files normally.

I was just wondering if the code I am using is the best way of doing it (i.e. "embed src="file.mp3" .. etc). I tried javascript but it doesn't work on pc's with IE8, so I decided to go for the "embed" method.

Having searched the net, there are websites where one could click a "PLAY" button and the sound plays fine with text displayed. Unfortunately, I could not figure out how they do it even when I tried to view the source of the page.

Suggestions are greatly appreciated!

David

[TreeTops]

Here's a snip-it of the code I use. It plays on android and windows devices. You would need to change the filename and extension and the proper file location. Try it and let us know if it works for you.

<p align="center">Want to listen to 'Back In The Saddle Again'?
<a href="midi/backinsaddle.mid" WIDTH="132" HEIGHT="82" autostart="false" loop="false"
>MUSIC</a>

[tetrahall]

Thank you, TreeTops!

I'll try that and see what the feedback from users is like.

[tetrahall]

<p align="center">Want to listen to 'Back In The Saddle Again'?
<a href="path/file.mp3" WIDTH="132" HEIGHT="82" autostart="false" loop="false"
>MUSIC</a>

Unfortuinately, it hasn't worked for me. On clicking, a "File Download" window appears with the following message:-

Do you want to open or save the file? Open - Save - Cancel options.

Ideally, I am looking for something like this:-
http://dictionary.cambridge.org/pronunciation/british/audio_1

There is a button (e.g UK or US), when clicked, the sound plays and the page remains displayed?

That would be great! How do they do it? Any idea?

[TreeTops]

OK it looks like they are using ogg files to play the mp3. You can google ogg files and see how they do it.

Here's their code:

<div class="big-pron-uk-container" itemscope="" itemtype="http://schema.org/AudioObject"><div class="sound audio_play_button big-pron-uk" title="audio: listen to British English pronunciation" data-src-mp3="http://dictionary.cambridge.org/media/british/uk_pron/u/uka/ukaud/ukaudac006.mp3" data-src-ogg="http://dictionary.cambridge.org/media/british/uk_pron_ogg/u/uka/ukaud/ukaudac006.ogg"><div class="big-pron-uk-icon"> </div>

[tetrahall]

Thank you once again. I will try that and let you know.

[tetrahall]

Hello, sorry about the late response. I've been trying to get as much feedback as possible.

It looks like the code works fine on various mobile devices. And it works as well with FireFox.

Again, for some reason, IE8 doesn't play the sound at all. I have googled a bit and it seems that it is a known issue with IE8.

Until one finds a way round this, perhaps the only option is to use a php script to detect the user's browser first. If not IE8, then direct them to the page with the code. If IE8, direct them to a page with a message "Your browser does not support the audio element." or a similar message.

Thank you ever so much for your responses.

Kind regards,

David

[TreeTops]

OK Thanks for the update. Doesn't play on IE8? Is that for all browsers?

[tetrahall]

Actually it works on FireFox and mobile / tablet devices.

I am working on some javascript that will (hopefully) get it to work on IE8 as well. When it's done I will post a mesage here.

[tetrahall]

Hello,

To play the sound file on IE8, I used a PHP script to detect the browser. If browser is IE8, then use this code:-

function play(url){
var soundElement = document.createElement("embed");
soundElement.src = url;
soundElement.autostart = "true";

var soundContainer = document.getElementById("sound");

soundContainer.appendChild(soundElement);
}

<img src="button.gif" onclick="play('path/mySound.mp3');">
<span id = 'sound'><embed src='path/mySound.mp3' style='display:none' loop='false' autostart='false' hidden='false' /></span>

That works OK with IE8.

Thank you, TreeTops, for helping with other browsers. That was very useful.

David