Question

I am trying to play sound A when click button A, sound B when click B etc, in HTML5 audio, using javascript. I am working though the code and I am getting confused with my functions and vars. But I think the best way would be to have a function where playAudio(a) plays a.mp3 etc but I cant get it working.

The example below has the input ID defining the sound being played, but I cant make it dynamic.

Javascript

var a = sounds/a.mp3
var b = sounds/b.mp3

function playX() {
    var xAudio = document.getElementById('xxx');
         xAudio.src = $("#audiofile").val();          
    xAudio.play();   
}

HTML:

<input id="audiofile" type="text" value="sounds/a.mp3" /><br />
<input id="audiofileb" type="text" value="sounds/b.mp3" /><br />

<button id="play" onclick="playX();">        A    </button>
<button id="play" onclick="playX();">        B    </button>
<button id="play" onclick="playX();">        C   </button>



<audio id="xxx">  
</audio>

Answer 1

var a = sounds/a.mp3
var b = sounds/b.mp3

function playX(id) {
    var xAudio = document.getElementById('xxx');
         xAudio.src = $("#audiofile"+id).val();          
    xAudio.play();   
}

and html:

<input id="audiofileA" type="text" value="sounds/a.mp3" /><br />
<input id="audiofileB" type="text" value="sounds/b.mp3" /><br />
<input id="audiofileC" type="text" value="sounds/c.mp3" /><br />

<button id="play" onclick="playX('A');">        A    </button>
<button id="play" onclick="playX('B');">        B    </button>
<button id="play" onclick="playX('C');">        C   </button>