Play sound when pressed

Question

I asked this question in several places, but have not yet found or received an answer. I am new to code, so any help would be greatly appreciated.

I use in-page javascript on some of my pages to play sound when I click on an image that sings a background track, in order to practice using scales / guitars.

here is 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 is what I call it for each image / mp 3:

 <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 is - the track is not looping - is something wrong with the script?

my second question is how can I expand the function so that when I press the png button to play the file, it will be replaced with another stop button - which stops the cycle when I click.

thank you very much jan

Answer 1

Welcome to stack overflow.

Embedding sounds in web pages is a very complex business, and getting a solution that works in all browsers and mobile devices is a real problem.

Fortunately, there are libraries that you can use to make nesting, playback, looping, mp3 switching a lot easier.

I would recommend looking into Soundmanager2 before you advance too much in this project to find out if it can save you a lot of coding time, effort and frustration!