添加音樂文件

Question

我試圖讓我點擊「Music1」或「Music2」時播放不同的音頻。在頁面（不知道它是什麼特別呼籲底部的滾動條」將仍然需要滾動。

任何人都願意幫助我嗎？代碼如下。將不勝感激了很多。謝謝。

http://hastebin.com/yupigijepe.xml

Answer 1

你可以使用音頻標籤。

<audio src="example.midi" preload="auto" autoplay="autoplay"></audio> 

今天大多數的瀏覽器沒有插件支持MIDI文件，而是播放MIDI文件，使用MP3文件作爲替代品。有了這個標籤，你可以顯示'播放按鈕「，以播放音頻，可以說，它甚至比鏈接到」Music1「更好。 http://www.w3schools.com/tags/tag_audio.asp

編輯：

使用HTML5 <audio>

<audio controls id="linkAudio"> 
    <source src="demo.ogg" type="audio/ogg"> 
    <source src="demo.mp3" type="audio/mpeg"> 
Your browser does not support the audio element. 
</audio> 

<script> 
document.getElementById("link_id").addEventListener("click", function() { 
document.getElementById("linkAudio").play(); 
}); 
</script> 

注：有關音頻標籤

更多信息作爲音頻是HTML5標籤，它不支持舊的瀏覽器，所以請確保在使用之前..

Answer 2

一個工作解決方案...

1）如果你選擇使用錨標記，而不是按鈕，添加ID和失去的超鏈接引用： A HREF =「＃」 ID =「A1」>音樂1

2）完全刪除源代碼即在音頻標籤內。我們將在下一步中動態添加它。

3）這個JavaScript添加到您的腳本標籤的開頭：

for (var i = 1; i <= 2; i += 1) { 
    var target = document.getElementById('music'); 
    var element = document.getElementById('a' + i); 

    element.addEventListener('click', function() { 
     switch (this.id) { 
      case 'a1': 
       target.innerHTML = '<source src="path/to/file1">'; 
       break; 
      case 'a2': 
       target.innerHTML = '<source src="path/to/file2">'; 
       break; 
     } 
    }); 
} 
// this is the same as before... 
var music = document.getElementById('music'); // id for audio element 

其他一些指針：

• 它始終是一個好主意，包括在開始時的DOCTYPE！你的html文件。
• 移動你的風格標籤，使它位​​於html和body標籤之間

• 這段代碼中有很多事件監聽器，爲什麼不讓播放按鈕不顯眼呢？也許在腳本去除播放按鈕的onclick =「播放（）」，並改變播放（）函數來此：

  pButton.addEventListener('click', function() { 
       // start music 
       if (music.paused) { 
        music.play(); 
        // remove play, add pause 
        pButton.className = ""; 
        pButton.className = "pause"; 
       } else { // pause music 
        music.pause(); 
        // remove pause, add play 
        pButton.className = ""; 
        pButton.className = "play"; 
       } 
      });