CODEWITHSUNDEEP
google-chrome-extensionplaybackhtml5-audiopageload
Michael Schwartz
Michael Schwartz

Reputation: 8425

Play HTML5 Audio Dynamically On Page Load

I know I can use the following in the body to autoplay the sound on page load if embedded in the body, but I wanna try this dynamically.

What I mean by dynamically is to find the audio file, and play onload using JavaScript, or JQuery.

Can anyone help?

<audio preload="auto" tabindex="0" autoplay="true" loop="true">
    <source src="shorttones.mp3" type="audio/mpeg" />
    <source src="shorttones.ogg" type="audio/ogg" />
    Your browser does not support the audio element.
</audio>

I tried this, not working.

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="js/buzz.js" type="text/javascript"></script>
<script type="text/javascript">
if (!buzz.isSupported()) {
    alert("Your browser does not support the audio element, ogg, or mp3.");
    return;
}

buzz.defaults.formats = [ 'ogg', 'mp3' ];
buzz.defaults.preload = 'metadata';

var mySound = new buzz.sound( "sounds/highpitchsound");

mySound.play();
mySound.loop();
</script>
</head>
</html>

Upvotes: 1

Views: 14708

Answers (2)

Robot Woods
Robot Woods

Reputation: 5687

If you mean playing without the autoplay, this would be one approach:

<html><body onload="playSound();">
<audio id="noise"></audio>
</body>
<script>
function playSound(){
    var snd=document.getElementById('noise');
    canPlayMP3 = (typeof snd.canPlayType === "function" && snd.canPlayType("audio/mpeg") !== "");
    snd.src=canPlayMP3?'shorttones.mp3':'shorttones.ogg';
    snd.load();
    snd.play();
}
</script></html>

Upvotes: 3

kindohm
kindohm

Reputation: 1600

You might want to take a look at buzz.js: http://buzz.jaysalvat.com/

if (!buzz.isSupported()) {
    alert("Your browser does not support the audio element, ogg, or mp3.");
    return;
}

var sound = new buzz.sound( "shorttones", {
    formats: [ "ogg", "mp3" ]
});

sound.play();

Upvotes: 0

Related Questions