onchange with select, option and audio

Question

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.

In case you're not aware, you can use `audioFiles.value` to retrieve the `value` of selected ` — Passerby, Oct 21 '13 at 11:53
I knew about the audioFiles.value, but my values are my paths and they may change. I've just entered some data to show you what might be there. So i need the ID of the option which won't change since there might be added more options later also. You are right about the initializing so im fixing that. — Ghost, Oct 21 '13 at 12:20
[`audioFiles.value`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement) always points to the **selected** ``'s value, no matter _when_ the option is added, _when_ the option is picked. — Passerby, Oct 22 '13 at 03:06

score 0 · Accepted Answer · edited May 23 '17 at 11:45

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?

Well i've tried quite a few ideas from other solutions on the net, but i can't really remember which ones now. It seems i have gotten so far now that i can find and play the audiofiles. But the onchange does not seem to do it's job. If i choose English the english file appears and i am able to play it. If i then choose German it is still the english file that plays. If i reload the browser when on German it retireves the german file. I've tried adding audioFile.load(); at the end of both. — Ghost, Oct 21 '13 at 12:34
Ah this was my bad.. i forgot to use the audio with the load instead of the audioFiles which is the select. It works now. :) — Ghost, Oct 21 '13 at 12:43

onchange with select, option and audio

1 Answers1