CODEWITHSUNDEEP
javascriptaudio
janimal
janimal

Reputation: 41

play sound on click

i have asked this question in a couple of places, but have yet to find or receive an answer. i am a code newbie, so any help would be greatly appreciated.

i am using in-page javascript on some of my pages to play a sound on clicking an image which loops a backing track to practise scales / lead guitar to.

here's the script:

<script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("dummy").innerHTML=
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"true\" />";
}
</script>
<span id="dummy"></span>

and here's how i'm calling it for each image / mp3:

<p><a title="Play file" href="#" onclick="playSound('mp3 url');"><img title="Play" src="play button url" alt="Play" width="48" height="48" /></a>  Blues in <strong>C</strong> : backing for lead melody. Chords: C,F, G</p>

my first question - the track isn't looping - is there something wrong with the script?

my second question - how do i extend the function so that on clicking the png to play the file it is swapped for another - stop button - which stops the loop when clicked.

many thanks, jan

Upvotes: 4

Views: 4815

Answers (1)

DaveR
DaveR

Reputation: 2483

Welcome to Stack Overflow.

Embedding sounds into web pages is a really tricky business and getting a solution that will work across all browsers and on mobile devices is a real challenge.

Fortunately there are libraries that you can use to make the embedding, playing, looping, switching of mp3s much, much easier.

I'd recommend looking into Soundmanager2, before you get too much further into this project to see if it could save you a lot of coding time, effort and frustration!

Upvotes: 2

Related Questions