/    Sign up×
Community /Pin to ProfileBookmark

Need help with audio play/reset toggle to sync with animation

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();
});[/CODE]

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>[/code]

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();
}
}[/CODE]

And, finally, the URL is: [url]http://totemdecks.com.au/alphabet/animationb.html[/url]
Please click the big yellow ‘play’ button to see what I mean. I’d appreciate any help on this because I’m stumped.

to post a comment
JavaScript

0Be the first to comment 😎

×

Success!

Help @sayak spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...