带有选择、选项和音频的 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 操作这些属性，这些属性位于 here on this SO question。

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

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

如果您的 <source> 中的 mime 类型/src 没有错误，这应该对您有用。

由于您正在显示控件，因此您应该可以从那里单击暂停/继续以及播放。

据我了解，这是您所问的。 如果您需要更多详细信息，请向我们提供信息以更好地帮助您。

例如你有什么尝试？