老师，关于audio标签的loop属性

老师，我查了一下手册发现loop的值只有一个就是loop，并非有数字，而且这个属性是用来设置无限循环的，如果我想设置循环次数，播到第几遍就停止的该如何设置？

the_dreamhigh 2020-09-29

源自：HTML5标签变化 3-6 audio

收起

1回答

好帮手慕慕子 2020-09-29 13:33:12

同学你好，audio有一个事件ended表示播放结束，可以监听这个事件，来控制播放次数。

可以结合下面示例代码注释测试理解下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <!-- audio 标签 autoplay -->
    <!-- 换成自己的音频文件就可以了 -->
    <audio controls src='data/imooc.wav' autoplay></audio>
    <script type="text/javascript">
        var audio = document.getElementsByTagName('audio')[0]
        //封装一个函数， elem表示要播放的音频元素，times表示指定重复播放的次数
        function playTimes(elem, times) {
            // 使用index表示播放次数，默认播放一次
            var index = 0;
            // 监听播放结束事件
            audio.addEventListener('ended', function () {
                // 没结束一次，index值加一
                index++
                // 当播放次数小于指定的循环播放次数时
                if(index < times){
                    // 再次播放该音频
                    audio.play()
                }
            })
        }
        // 调用函数，循环播放两次
        playTimes(audio, 2)
    </script>
</body>
</html>