带有选择，选项和音频的onchange

Question

我整天都在摆弄这个代码，但似乎无法正常工作，我想知道你们中的任何一个是否可以告诉我问题出在哪里？

我有2个选项供您选择，并且音频应根据所选选项而变化。 选择显示为应该具有两个可用选项，但音频未显示，因此我认为问题出在以下几行：
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;
    }
}

你们中有人能看到我做错了吗？ 我没有使用jQuery，并且文件的路径是应该的。

Answer 1

这里有几件事，其中一项是：

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;
}

您似乎将ogg.src和wav.src的值设为与mp3.src相同的值，因为您仅在选项的值中定义了MP3文件的值，当浏览器尝试播放ogg / wav时，此值会出现故障格式，因为文件是mp3扩展名，并且要发送的mime类型为ogg / wav。

但是，这可能会被浏览器本身捕获并修复，具体取决于您喜欢哪种浏览器。

HTML5音频对象具有某些属性（例如，控件），您可以通过JS操作这些属性，这些属性在此SO问题上找到。

如果要在单击选择项后播放音频，则应将此行添加到切换功能中：

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

如果<source>的mime类型/ src没有错误，则此方法对您有用。

由于您正在显示控件，因此您应该能够单击“暂停” /从此处继续播放以及。

根据我的理解，这就是您的要求。 如果您需要更多详细信息，请向我们提供信息以帮助您更好。

例如你试图做什么？