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:
The html tags are: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(); });
At the moment, the audio script I have is:HTML Code:<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>
And, finally, the URL is: http://totemdecks.com.au/alphabet/animationb.htmlCode:function aud_play() { var myAudio = document.getElementById("myAudio"); if (myAudio.paused) { myAudio.play(); } else { myAudio.load(); } }
Please click the big yellow 'play' button to see what I mean. I'd appreciate any help on this because I'm stumped.


Reply With Quote
Bookmarks