Question

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

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

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

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

Answer 1

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

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

使用timeupdate event并针对您的阈值检查currentTime
您还可以使用requestAnimationFrame轮询相同的值并执行相同的检查
或者，对于超精确计时，您需要使用Web Audio API，为音频创建音频缓冲区，然后使用首选时间的开始/停止。这将要求履行CORS要求

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

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',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();
}

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

如何设置音频的持续时间

3 个答案: