onchange與選擇，選項和音頻

我一直在擺弄這個代碼整天，但我似乎無法得到它的工作，我想知道你是否有人可以告訴我什麼問題是？onchange與選擇，選項和音頻

我有一個選擇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，文件的路徑是他們應該的。

來源

2013-10-21 Ghost

如果您不知道，可以使用'audioFiles.value'來檢索所選'

我知道audioFiles.value，但我的價值觀是我的道路，他們可能會改變。我剛剛輸入了一些數據來向你展示可能存在的內容。所以我需要這個選項的ID不會改變，因爲以後也可能會增加更多的選項。你是正確的初始化如此即時修復。 – Ghost

['audioFiles.value']（https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement）總是指向**選擇**''的值，無論_when_該選項被添加，_選項被選中時。 – Passerby

有一些東西在這裏，對於一個：

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();

這應該爲你工作，如果有與MIME類型沒有錯誤/ src在你的<source>的。

由於您正在顯示控件，因此您應該可以點擊暫停/繼續以及播放。

這是根據我的理解你問的。如果您需要更多詳細信息，請向我們提供幫助您更好的信息。

例如你試圖做什麼？

來源

2013-10-21 12:21:51 SidOfc

嗯，我已經嘗試了其他網絡上的其他解決方案的一些想法，但我現在還不記得哪些。現在看來我已經得到了很多，我可以找到並播放音頻文件。但是onchange似乎並沒有做它的工作。如果我選擇英文，則會出現英文文件，我可以播放它。如果我然後選擇德語，它仍然是播放的英語文件。如果我使用德語重新加載瀏覽器，它會退出德語文件。我試過添加audioFile.load（）;在兩個結尾。 – Ghost

啊，這是我的壞..我忘了使用音頻與負載，而不是audioFiles這是選擇。它現在有效。 :) – Ghost

好聽，快樂混合！ – SidOfc

onchange與選擇，選項和音頻

回答

相關問題