javascript – HTML5音频:如何仅播放选定部分的音频文件(音频精灵)?

前端之家收集整理的这篇文章主要介绍了javascript – HTML5音频:如何仅播放选定部分的音频文件(音频精灵)?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用iOS节拍器网络应用程序.由于移动漫游只能播放 one sound at a time,我正在尝试创建一个“音频精灵”,我可以使用单个音轨的不同段来生成不同的声音.我有一个1秒的剪辑,其中有两个半秒钟的声音.
  1. <audio id="sample" src="sounds.mp3"></audio>
  2.  
  3. <a href="javascript:play1();">Play1</a>
  4. <a href="javascript:play2();">Play2</a>
  5. <a href="javascript:pauseAudio();">Pause</a>
  6.  
  7. <script>
  8. var audio = document.getElementById('click');
  9.  
  10. function play1(){
  11. audio.currentTime = 0;
  12. audio.play();
  13.  
  14. // This is the problem area
  15. audio.addEventListener('timeupdate',function (){
  16. if (currentTime >= 0.5) {
  17. audio.pause();
  18. }
  19. },false);
  20. }
  21.  
  22. function play2(){
  23. audio.currentTime = 0.5;
  24. audio.play();
  25. }
  26.  
  27. function pause(){
  28. audio.pause();
  29. }
  30. </script>

JSFiddle.

正如你所看到的,我试图使用’timeupdate’事件(jPlayer example)无效.

我看过Remy Sharp’s post on audio sprites,但(A)我无法让它为我工作,(B)我宁愿远离图书馆依赖.

有任何想法吗?在此先感谢您的帮助!

更新

我现在使用setInterval工作:

  1. function play1(){
  2. audio.currentTime = 0;
  3. audio.play();
  4. int = setInterval(function() {
  5. if (audio.currentTime > 0.4) {
  6. audio.pause();
  7. clearInterval(int);
  8. }
  9. },10);
  10. }
  11.  
  12. function play2(){
  13. clearInterval(int);
  14. audio.currentTime = 0.5;
  15. audio.play();
  16. }

序列和设置/清除间隔有一些问题,但为了我的目的 – 它似乎工作.

JSFiddle

谢谢!

附:如果有人有这个修复,这可以用于游戏和界面声音FX.

解决方法

我认为这里有几个问题.

首先,您每次在用户点击Play 1时添加事件侦听器.

我也想

  1. if (currentTime >= 0.5) { ...

应该

  1. if (audio.currentTime >= 0.5) { ...

这也可以:

  1. <audio id="sample" src="http://dl.dropBox.com/u/222645/click1sec.mp3" controls preload></audio>
  2.  
  3. <a href="javascript:playSegment(0.0,0.5);">Play1</a>
  4. <a href="javascript:playSegment(0.5);">Play2</a>
  5.  
  6. <script>
  7. var audio = document.getElementById('sample');
  8. var segmentEnd;
  9.  
  10. audio.addEventListener('timeupdate',function (){
  11. if (segmentEnd && audio.currentTime >= segmentEnd) {
  12. audio.pause();
  13. }
  14. console.log(audio.currentTime);
  15. },false);
  16.  
  17. function playSegment(startTime,endTime){
  18. segmentEnd = endTime;
  19. audio.currentTime = startTime;
  20. audio.play();
  21. }
  22. </script>

猜你在找的JavaScript相关文章