I want to combine the first function with the second, so I can name it only once

Question

I want to combine the first function with the second, so I can name it only once. Basically I have 2 html5 audio files that they play. Everything works perfectly. But if I play my first sound and during this time, if I click on the second sound, the pause button on the first audio will not change to the default value (off)

//First function function toggleState(item) { if (item.className == "play") { item.className = "pause"; } else { item.className = "play"; } } //Second function // Play stop Music function EvalSound(soundobj) { var thissound = document.getElementById(soundobj); if (thissound.paused) { thissound.play(); } else { thissound.pause(); } } 

Answer 1

This question answered the question of its owner with the following solution:

I managed to fix it as follows.

 function toggleState(item, soundobj) { var thissound = document.getElementById(soundobj); if (item.className == "play") { thissound.play(); item.className = "pause"; } else { thissound.pause(); item.className = "play"; } } 

I also managed to get the name of the current track. For example, you click on a song and it will appear after, say, "Now play the song blablabla."

I will show you a working example below.

HTML:

 <option id="1" title="Now Playing." value="URL.mp3">Song name</option> 

JavaScript:

 audioURL = document.getElementById('mylist'); var f = audioURL.options[audioURL.selectedIndex].title; //Here is title document.getElementById("demo").innerHTML = f; //output to f at demo elem.