2

我整天都在摆弄这段代码，但我似乎无法让它工作，我想知道你们中是否有人能告诉我问题是什么？

我有一个带有 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，文件的路径应该是这样的。

4

1 回答 1

0

这里有几件事，其中之一：

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 操作的某些属性（例如控件），这些可以在此 SO question中找到。

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

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

这应该对你有用，如果你的<source>'s.

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

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

例如，你试图做什么？

于 2013-10-21T12:21:51.470 回答