onchange with select, option and audio

Question

I've been fiddling with this code all day but i just can't seem to get it working and i wonder if any of you could tell me what the problem is?

I have a select with 2 options and the audio should change according to the selected option. The select is showing as it should with both options available but the audio is not showing so i think the issue lies in the following line:
audioFiles.options[audioFiles.selectedIndex].id == "English"

<div>
    <i>Audio:</i> 
    <select id="audioFiles" onchange="toggle()">
        <option id="English" value="audio/english.mp3">
            English
        </option>
        <option id="German" value="audio/german.mp3">
            Deutch
        </option>
    </select>                
    <audio controls id="audioPlayer">
        <source id="mp3" type="audio/mpeg">
        <source id="ogg" type="audio/ogg">
        <source id="wav" type="audio/wav">
        <embed id="embedded" height="50" width="100">
    </audio>
</div>

function toggle()
{
    var audioFiles = document.getElementById("audioFiles");

    var mp3 = document.getElementById("mp3");
    var ogg = document.getElementById("ogg");
    var wav = document.getElementById("wav");
    var embedded = document.getElementById("embedded");

    if (audioFiles.options[audioFiles.selectedIndex].id == "English") {
        var audioPath = document.getElementById("English");
        mp3.src = audioPath.value;
        ogg.src = audioPath.value;
        wav.src = audioPath.value;
        embedded.src = audioPath.value;
    }
    else if(audioFiles.options[audioFiles.selectedIndex].id == "German")
    {
        var audioPath = document.getElementById("German");
        mp3.src = audioPath.value;
        ogg.src = audioPath.value;
        wav.src = audioPath.value;
        embedded.src = audioPath.value;
    }
}

Are any of you able to see what i am doing wrong? I am not using jQuery and the paths to the files are as they should be.

Answer 1

There are a few things here, for one:

if (audioFiles.options[audioFiles.selectedIndex].id == "English") {
    var audioPath = document.getElementById("English");
    mp3.src = audioPath.value;
    ogg.src = audioPath.value;
    wav.src = audioPath.value;
    embedded.src = audioPath.value;
}

You seem to make the ogg.src and wav.src the same value as the mp3.src, as you have only defined the value for an MP3 file in the option's value, this will glitch when the browser tries to play the ogg / wav formats, due to the file being an mp3 extension and the mime type being sent will be ogg / wav.

This however might be caught and fixed by the browser itself, depending on which one you prefer.

the HTML5 Audio object has certain properties (e.g. the controls) which you can manipulate via JS, these are found here on this SO question.

If you want the audio to play after you clicked a select, you should add this line to your toggle function:

document.getElementById('audioPlayer').play();

This should work for you, if there are no errors with the mime types / src's in your <source>'s.

Since you are showing the controls, you should be able to click pause / continue from there as well as play.

This is from what I understand you are asking. If you need more details, please provide us with information to help you better.

e.g. what have you tried to do?