How do I use Javascript to Select Audio File from Button Value

Question

So I have an array of buttons all with different values and I want them play the song with it's number value, when clicked. All of the files are numbered, i.e. 1.mp3, 2.mp3, 3.mp3, etc.

Is there a way of doing it without a lot of repeating Javascript code for each song.

Here is my HTML:

<audio id="player">
        <source id="sourceMp3" src="" type="audio/mp3">
        Your browser does not support the audio element.
</audio>

<button onclick="loadSong()" value="1">1</button>
<button onclick="loadSong()" value="2">2</button>
<button onclick="loadSong()" value="3">3</button>
<button onclick="loadSong()" value="4">4</button>
<button onclick="loadSong()" value="5">5</button>

Here is my JavaScript:

function loadSong(){

var player=document.getElementById('player');
var songNo = document.getElementByTagName('button').value;
var sourceMp3=document.getElementById('player');

sourceMp3.src='songs/' + songNo + '.mp3;

player.load();
player.play(); 

}

Any suggestions would be greatly appreciated.

set an id to every button and add a switch case in your function — ivan
– ivan, Commented Oct 27, 2015 at 20:49

chris_blues · Accepted Answer · 2015-10-27 22:11:53Z

3

Your call in the JS portion should be:

var sourceMp3=document.getElementById('sourceMp3');

Then

sourceMp3.src='songs/' + songNo + 'mp3';

should work.

Notice, you should pick the 'src' of the <source>-tag, not the <audio>-tag

also, I would add a function-call with the buttons: - and then define your function like this: function loadSong(songNo)...

So, your code could look like this:

<audio id="player">
    <source id="sourceMp3" src="" type="audio/mp3">
    Your browser does not support the audio element.
</audio>

<button onclick="loadSong(1)">1</button>
<button onclick="loadSong(2)">2</button>
<button onclick="loadSong(3)">3</button>
<button onclick="loadSong(4)">4</button>
<button onclick="loadSong(5)">5</button>

And the JS:

function loadSong(songNo) {
var player=document.getElementById('player');
var sourceMp3=document.getElementById('sourceMp3');
sourceMp3.src='songs/' + songNo + '.mp3';

player.load();
player.play();

edited Oct 27, 2015 at 22:11

answered Oct 27, 2015 at 20:58

chris_blues

1299 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andy Buckle Over a year ago

Thank you so much, this worked. I was worried I would have had to copy and paste loads of javascript to get this to work. Thanks for your help @chris_blues

chris_blues Over a year ago

Glad to be of help! :)

chris_blues Over a year ago

Funny! I'm currently fiddling on a html5 player myself, and your approach of using only one <audio> element and change it's sources dynamically, will hopefully solve some of my problems as well - so thanks to you too! :D

Luca Rasconi · Accepted Answer · 2015-10-27 21:05:56Z

0

var songNo = this.value not var songNo = document.getElementByTagName('button').value;

document.getElementByTagName('button') returns HTMLCollection and loadSong is the handler of the click event so you have access to 'this'

answered Oct 27, 2015 at 21:05

Luca Rasconi

1,1051 gold badge11 silver badges34 bronze badges

Collectives™ on Stack Overflow

How do I use Javascript to Select Audio File from Button Value

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related