html5 - js如何优雅的控制html中audio标签播放的次数？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

html5 - js如何优雅的控制html中audio标签播放的次数？

巴扎黑 2017-04-17 11:47:26

[HTML讨论组]

768

思考：audio加了loop属性是控制audio不间断循环播放，但是很多时候我们需要的是连续播放三次或者四次，如何指定loop的次数呢？

巴扎黑

全部回复(3)

ringa_lee2017-04-17 11:49:26 3楼

抛砖：）

audio有一个事件： end

http://www.w3.org/html/wg/drafts/html/master/semantics.html#event-media-ended

思路就是：通过监听播放结束的次数，来控制播放。

function playTimes(elem, times) {
    var start = 0;
    elem.addEventListener("ended",function() {
        start++;
        start == times && elem.pause();
    });
}

了解更多：

http://stackoverflow.com/questions/14190160/html5-audio-element-with-dynamic-source

赞 +0

添加回复

PHP中文网2017-04-17 11:49:26 2楼

var audio = document.createElement("audio");  
var index = 0;
    audio.src = "xx.mp3";  
    audio.addEventListener('ended', function () {  
    setTimeout(function () {if(index<4){ audio.play(); index++}}, 500);  
    }, false);  
    audio.play();

赞 +0

添加回复