I need help on how to incorporate audio into an animation script that is triggered by a play/reset button. I would like the audio to play across Firefox, Chrome, and Safari. I’m quite new to javascript, by the way.
At the moment, I have an onclick .load() script which works in Firefox but only runs once in Chrome and Safari. Also, I’ve been having problems with the audio playing when the button is on “reset” rather than “play”.
Here’s the working animation script:
[CODE]var played = false;
$(function () {
var s = null,
AnimationSpace = {
settings: {
tabHeaders: null,
tabSections: null,
currentIndex: null,
speed: 800,
collection: null,
i: null,
j: null,
startButton: $(“#startbutton”)
},
init: function () {
s = this.settings;
this.startAnimation();
},
startAnimation: function () {
s = this.settings;
s.startButton.click(function() {
$(“div.target”).toggleClass(“animate”);
if (s.startButton.attr(“value”) === “PLAY”) {
played = true;
s.startButton.attr(“value”, “RESET”);
} else {
s.startButton.attr(“value”, “PLAY”);
played = false;
}
});
}
};
AnimationSpace.init();
});
The html tags are:
[code=html]<audio id=”myAudio”>
<source src=”audio/b_letdown.mp3″ type=’audio/mp3′>
<source src=”audio/b_letdown.ogg” type=’audio/ogg; codecs=vorbis’>
Your user agent does not support the HTML5 Audio element.
</audio>
<a class=”button1 active click” href=”#”><input id=”startbutton” onclick=”aud_play()” type=”button” value=”PLAY”></a>
At the moment, the audio script I have is:
[CODE]function aud_play() {
var myAudio = document.getElementById(“myAudio”);
if (myAudio.paused) {
myAudio.play();
} else {
myAudio.load();
}
}
And, finally, the URL is: [url]http://totemdecks.com.au/alphabet/animationb.html
Please click the big yellow ‘play’ button to see what I mean. I’d appreciate any help on this because I’m stumped.