如何设置音频的持续时间

Question

我试图使用音频的属性来设置音频标记的持续时间。

我尝试过以下几种方法，但似乎行不通：$('audio')[0].duration = 1;

我已经看过其他的答案，但是我没有看到任何使用持续时间属性的答案。

如果持续性属性是只读的，那么它给我留下了什么其他方法？

Answer 1

您不能更改持续时间，因为它锁定到原始数据(这些数据不能通过音频元素更改)。

不过，您可以通过监视时间来限制播放时间，并在阈值启动时暂停音频，从而实现不同持续时间的错觉：

• 使用事件并根据阈值检查currentTime
• 您还可以使用requestAnimationFrame轮询相同的值并执行相同的检查。
• 或者，对于超精确的计时，您需要使用Web音频API，为音频创建一个音频缓冲区，然后在首选的时间使用开始/停止。这将要求CORS要求得到满足。

在加载端，浏览器可能会加载整个文件。如果您想要控制这个部分，您必须使用媒体源扩展，它允许您控制缓冲过程。

Answer 2

我想和大家分享我是怎么解决的。希望这能帮到你。假设您的HTML中有一个音频元素(您可以隐藏它)：

<audio src="source_to_audio_file.mp3" controls="controls" id="audio_el" type="audio/mpeg"></audio>

您有另一个用于启动音频播放的元素：

<div><a onclick="play_audio('audio_el',2.01,3.2);"></a></div>

函数play_audio在下面，它接受三个参数: audio_element、time_start、工期

当元素开始播放时，音频元素的属性值设置为给定的持续时间。然后，您将在timeupdate事件中使用它来暂停音频。

在剧本中：

var player = document.getElementById("audio_el");  
player.addEventListener("timeupdate", function() {
if (player.currentTime - player._startTime >= player.value){    
      player.pause(); 
 };

});

function play_audio(audio_element,time_start,duration){
var player = document.getElementById(audio_element);
player.value=duration;
player._startTime=time_start;
player.currentTime = time_start;  
player.play();
}

Answer 3

sound = new Howl({

    src: ['./assets/audio/classic_bell.mp3'], //you can set the custom path 
                                       **OR** 
    src : ['http://...../your url/mp3file.mp3'], //you can also set the url path to set 
                                                 the audio                                                        loop: true,
  });

//in method where you want to play the sound

 this.sound.play();

 setTimeout(()=> {

      this.sound.stop();

  }, 1000);