1

This is my script

function playSound(soundfile) {

document.getElementById("ui-btn-text").innerHTML=document.getElementById("ui-btn-text").innerHTML +
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";

}

And this is a part of my code 

<a style='font-family:Arial,Helvetica,sans-serif;font-size:200%;' 
id="ui-btn-text" onclick="playSound('image/button.mp3');" 
href="#" data-ajax="false" data-transition="slide"></a>

I have no idea why the audio file does not play!

Or is there a better solution for what i am doing?

user2008436
  • 11
  • 3

1 Answers1

1

The way you have it written it should result in some HTML like:

<a style='font-family:Arial,Helvetica,sans-serif;font-size:200%;' id="ui-btn-text" onclick="playSound('image/button.mp3');" href="#" data-ajax="false" data-transition="slide">
    <embed src="image/button.mp4" hidden="true" autostart="true" loop="false" />
</a>

If it's going to be hidden already, why not just leave it someplace on the page and simply trigger the audio to play when the button is clicked. Set autostart="false" and then use JS/JQuery to play the mp4 when the button is clicked.

HTML

<a style='font-family:Arial,Helvetica,sans-serif;font-size:200%;' id="ui-btn-text" onclick="playSound('ui-btn-sound');" href="#" data-ajax="false" data-transition="slide">
</a>
<embed src="image/button.mp4" hidden="true" autostart="false" loop="false" id="ui-btn-sound" />

JavaScript

function playSound(id) {
    var audioFile = document.getElementById(id);
    audioFile.Play();
    return false;
}

I personally would suggest using HTML5 audio tag and fall back to an embedded option if needed.

<audio controls>
    <source src="image/button.mp4" type="audio/mp4">
    <!-- Fail Over -->
    <embed src="image/button.mp4" hidden="true" autostart="false" loop="false" id="ui-btn-sound" />
    <a href="" onclick="playSound('ui-btn-sound')">Play</a>
</audio>

The audio tag also has lots of ways to control it's look and function via JS/JQuery. You might want to look into things like audio.canPlayType('audio/mp4');. Here is an older example, someone challenged me to make a piano that did not have lag between each note and allowed other notes to be stopped when a new note was played: http://www.yrmailfrom.me/projects/html5/piano.php

Edit: After answering this, I was inspired to create a quick JQM HTML5 player: http://www.yrmailfrom.me/projects/html5/audioplay.php

Hope that helps you.

Twisty
  • 30,304
  • 2
  • 26
  • 45
  • The audio file plays when the page is loaded, but when i clicked on the link it does not, am i doing something wrong? – user2008436 Jan 25 '13 at 06:56
  • Been testing with FireFox, Chrome, Dolphin, and Safari and its work as expected in all of them, minor issues in Chrome calculating the Duration for some reason. Can you clarify the browser and version you are using. Feel free to PM me too. – Twisty Jan 25 '13 at 20:23
  • +1 for the nice player, even though the "progress bar" does not work :P – dualed Jan 28 '13 at 01:36
  • Which browser do you not see it working in @dualed It works for me. And thanks for the +1 – Twisty Jan 28 '13 at 17:31
  • Firefox and Chrome (both current stable). In Firefox the numeric display left of the progress bar shows a "NaN" after moving it. Also I get an error in the log that an audio file is not supported (*Specified "type" attribute of "audio/mpeg" is not supported. Load of media resource songs/mp3/Spirit_Of_Life.mp3 failed.*), not sure about that as I *do* hear audio playing. And an error I was not able to trace "Empty string passed to getElementById()." in `jquery.min...js` – dualed Jan 29 '13 at 01:41
  • Thanks @dualed I will look into it. FireFox does not support MP3 format... no idea why. So I set the page to run both MP3 and OGG as sources. So one fails, the other loads. Since OGG appears to be supported by almost all the browsers, I use it as my common denominator. The NaN I get sometimes... this should be set to 0 by default and then incrimented by the current duration count `currentTime` method. Have to investigate more. – Twisty Jan 30 '13 at 02:43
  • So I was able to replicate your issue @dualed on the first load of the site only. The issue is that if a Duration is not defined, the NaN is the result of the `parseInt()`. When I reload the page, it works properly. Will keep investigating. – Twisty Jan 31 '13 at 01:49
  • Was able to reproduce this in FF @Twisty. However not in Chrome, it does not behave differently after a reload. Maybe the Browser needs some time before it can read the duration? – dualed Jan 31 '13 at 07:39
  • I agree @dualed. I made some updates: http://www.yrmailfrom.me/projects/html5/audioplay.php – Twisty Feb 01 '13 at 03:14
  • @Twisty put `if (isNaN(dur)) { dur = parseInt(audio.duration, 10); $("#songPosition").attr("max", dur); }` in `timeupdate` event handler somewhere close to the start :) – dualed Feb 01 '13 at 13:14
  • I played around a bit more @Twisty : http://jsfiddle.net/yehNR/6/ (got rid of the polling code from above and ... +seeking!) It does not seem to work with any of my mobile browsers though, not really sure why – dualed Feb 01 '13 at 14:55
  • Great seek functions, thanks @dualed I took some of the things you did and forked my own: http://jsfiddle.net/Twisty/56afL/ testing in a number of browsers now. – Twisty Feb 01 '13 at 18:47
  • Plus I found some details for `onLoadMetaData` here: http://stackoverflow.com/questions/7246172/problem-with-duration-value-of-html5-audio-element-in-ios/7275714#7275714 – Twisty Feb 01 '13 at 18:51
  • I also updated my jsFiddle and it works properly, for me, in FireFox and Chrome. Safari is not playing nice. IE is straight out. – Twisty Feb 01 '13 at 19:17