javascript HTML5 音频：如何仅播放音频文件（音频精灵）的选定部分？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5932412/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Audio: How to Play only a Selected Portion of an Audio File (audio sprite)?
提问by Josiah
I'm working on an iOS metronome web app. Since mobile safari can only play one sound at a time, I'm attempting to create an 'audio sprite' - where I can use different segments of a single audio track to generate different sounds. I have a 1 second clip with 2 half-second sounds on it.
我正在开发一个 iOS 节拍器网络应用程序。由于移动 safari 一次只能播放一种声音，我正在尝试创建一个“音频精灵”——我可以在其中使用单个音轨的不同片段来生成不同的声音。我有一个 1 秒的剪辑，上面有 2 个半秒的声音。
<audio id="sample" src="sounds.mp3"></audio>
<a href="javascript:play1();">Play1</a>
<a href="javascript:play2();">Play2</a>
<a href="javascript:pauseAudio();">Pause</a>
<script>
var audio = document.getElementById('click');
function play1(){
audio.currentTime = 0;
audio.play();
// This is the problem area
audio.addEventListener('timeupdate', function (){
if (currentTime >= 0.5) {
audio.pause();
}
}, false);
}
function play2(){
audio.currentTime = 0.5;
audio.play();
}
function pause(){
audio.pause();
}
</script>
See it on JSFiddle.
As you can see, I've attempted to use the 'timeupdate' event (jPlayer example) with no avail.
如您所见，我尝试使用 'timeupdate' 事件（jPlayer 示例）但无济于事。
I've seen Remy Sharp's post on audio sprites, but (A) I wasn't able to get it to work for me, and (B) I would prefer to stay away from a library dependency.
我看过Remy Sharp 关于音频精灵的帖子，但是 (A) 我无法让它对我来说有效，并且 (B) 我宁愿远离库依赖。
Any ideas? Thanks in advance for your help!
有任何想法吗？在此先感谢您的帮助！
Update
更新
I now have it working using setInterval:
我现在使用它工作setInterval：
function play1(){
audio.currentTime = 0;
audio.play();
int = setInterval(function() {
if (audio.currentTime > 0.4) {
audio.pause();
clearInterval(int);
}
}, 10);
}
function play2(){
clearInterval(int);
audio.currentTime = 0.5;
audio.play();
}
There are some issues with sequence and setting/clearing intervals, but for my purpose - it seems to work.
序列和设置/清除间隔存在一些问题，但就我而言 - 它似乎有效。
Thanks!
谢谢！
P.S. If anyone has a fix for this, this could be used in Games and Interface Sound FX.
PS 如果有人对此进行了修复，则可以在游戏和界面声音 FX 中使用它。
回答by Sam Dutton
I think there are a couple of problems here.
我认为这里有几个问题。
Firstly, you're adding an event listener every time the user clicks Play 1.
首先，每次用户单击 Play 1 时，您都会添加一个事件侦听器。
Also I think
我也觉得
if (currentTime >= 0.5) { ...
should be
应该
if (audio.currentTime >= 0.5) { ...
This also works:
这也有效：
<audio id="sample" src="http://dl.dropbox.com/u/222645/click1sec.mp3" controls preload></audio>
<a href="javascript:playSegment(0.0, 0.5);">Play1</a>
<a href="javascript:playSegment(0.5);">Play2</a>
<script>
var audio = document.getElementById('sample');
var segmentEnd;
audio.addEventListener('timeupdate', function (){
if (segmentEnd && audio.currentTime >= segmentEnd) {
audio.pause();
}
console.log(audio.currentTime);
}, false);
function playSegment(startTime, endTime){
segmentEnd = endTime;
audio.currentTime = startTime;
audio.play();
}
</script>
