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 Audio对象具有某些属性（例如控件），您可以通过JS操作这些属性here on this SO question。

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

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

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

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

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

e.g。你试过做什么？

使用选择，选项和音频进行更改

1 个答案: