單擊播放一段 mp3

Question

我有許多按鈕播放許多不同的聲音 - 單擊時每個按鈕播放不同的 mp3。 示例代碼：

<a onclick="this.firstChild.play()"><audio src="1.mp3"  ></audio>1</a>

對於移動設備，我嘗試播放同一 mp3 文件中的所有不同聲音，因此我可以預加載 1 個文件並獲得更多即時體驗。

所以我需要設置點擊時播放的mp3的起點和終點。

我如何使用音頻 html5 或 javascript 來做到這一點？ 僅使用 chrome 就足夠了......

Answer 1

如果我答對了你的問題，你想同時或隨時播放音頻文件的不同時間戳

這是一個你可以使用的例子

 <a onclick="this.firstChild.play()"><audio id="audio2" preload="auto" src="http://cld3097web.audiovideoweb.com/va90web25003/companions/Foundations%20of%20Rock/5.01.mp3#t=00:00:00" > </audio>Part 1 </a> <a onclick="this.firstChild.play()"><audio id="audio2" preload="auto" src="http://cld3097web.audiovideoweb.com/va90web25003/companions/Foundations%20of%20Rock/5.01.mp3#t=00:00:56" > </audio>Part 2 </a> <a onclick="this.firstChild.play()"><audio id="audio2" preload="auto" src="http://cld3097web.audiovideoweb.com/va90web25003/companions/Foundations%20of%20Rock/5.01.mp3#t=00:01:00" > </audio>Part 3 </a>

你也可以以秒為單位給出時間而不是像時間戳

 <a onclick="this.firstChild.play()"><audio id="audio2" preload="auto" src="http://cld3097web.audiovideoweb.com/va90web25003/companions/Foundations%20of%20Rock/5.01.mp3#t=0" > </audio>Part 1 </a> <a onclick="this.firstChild.play()"><audio id="audio2" preload="auto" src="http://cld3097web.audiovideoweb.com/va90web25003/companions/Foundations%20of%20Rock/5.01.mp3#t=56" > </audio>Part 2 </a> <a onclick="this.firstChild.play()"><audio id="audio2" preload="auto" src="http://cld3097web.audiovideoweb.com/va90web25003/companions/Foundations%20of%20Rock/5.01.mp3#t60" > </audio>Part 3 </a>

Answer 2

我尚未測試此代碼，但這應該可以工作：

<a id="audioTag1"><audio src="1.mp3"  ></audio>1</a>

var canPlay = false;
var audio = document.getElementsByTagName('audio')[0];

document.getElementById('audioTag1').addEventListener('click', function(){
    playAudio(15);
});

audio.addEventListener('canplay', function() { // listen for the `canplay`event, to make sure the file is loaded.
    canPlay = true; // Set a boolean to "true" once the audio has loaded.
});

function playAudio(time){
    audio.currentTime = time; // jump to 15 secs into the file
    audio.play(); // I'm not certain if this line is necessary.
}

確保在onload事件偵聽器中運行JS代碼，以便在執行代碼時加載音頻標簽。