如何设置音频的持续时间

Question

我正在尝试使用音频的 HTML DOM 持续时间属性来设置音频标签的持续时间。

我尝试了以下方法，但似乎不起作用： $('audio')[0].duration = 1;

我已经查看了其他答案，但我看不到任何使用持续时间属性的答案。

如果持续时间属性是只读的，我还有什么其他方法？

Answer 1

您无法更改持续时间，因为它被锁定到原始数据（无法通过音频元素更改）。

您可以通过监控时间限制播放并在达到阈值时暂停音频来实现不同持续时间的错觉：

使用 timeupdate event 并根据您的阈值检查 currentTime
您也可以使用requestAnimationFrame轮询相同的值并进行相同的检查
或者，为了获得超精确的计时，您需要使用 Web Audio API，为音频创建一个音频缓冲区，然后使用 start/stop 和首选时间。这将需要满足 CORS 要求

在加载端，浏览器可能会加载整个文件。如果你想控制这部分，你必须使用 Media Source Extension 来控制缓冲过程。

Answer 2

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);

Answer 3

我想分享我是如何解决的。希望这对你有帮助。假设您的 HTML 中有一个音频元素（您可以隐藏）：

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

您有另一个元素用于开始播放音频：

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

下面是函数play_audio，它需要三个参数：audio_element、time_start、duration

当元素开始播放时，音频元素的属性 value 设置为给定的持续时间。然后，您将在 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();
}

如何设置音频的持续时间

How to set the duration of audio

javascript

jquery

html5-audio