单击播放一段 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代码，以便在执行代码时加载音频标签。