多个音视频标签只播放一个音视频

最新推荐文章于 2022-08-11 13:11:14 发布

原创最新推荐文章于 2022-08-11 13:11:14 发布 · 295 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

12 篇文章

订阅专栏

html

5 篇文章

订阅专栏

该博客内容展示了如何使用HTML5的<audio>标签在网页上创建多个音频播放器，并通过JavaScript实现当一个音频播放时，其他音频暂停的功能，确保同一时间只有一个音频在播放。这涉及到前端开发中的多媒体处理和JavaScript事件监听。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <audio class="aplay" controls src="http://message.qtonghua.com/sign_sound_verify.php?mid=5923546">"&gt;</audio>
    <audio class="aplay" controls src="http://message.qtonghua.com/sign_sound_verify.php?mid=5923546">"&gt;</audio>
    <audio class="aplay" controls src="http://message.qtonghua.com/sign_sound_verify.php?mid=5923546">"&gt;</audio>
    <audio class="aplay" controls src="http://message.qtonghua.com/sign_sound_verify.php?mid=5923546">"&gt;</audio>
    <audio class="aplay" controls src="http://message.qtonghua.com/sign_sound_verify.php?mid=5923546">"&gt;</audio>
    <audio class="aplay" controls src="http://message.qtonghua.com/sign_sound_verify.php?mid=5923546">"&gt;</audio>
    <audio class="aplay" controls src="http://message.qtonghua.com/sign_sound_verify.php?mid=5923546">"&gt;</audio>
    
</body>
<script>
    window.onload = function(){  
        var audios = document.getElementsByTagName("audio");  
        // 暂停函数  
        function pauseAll() {  
            var self = this;  
            [].forEach.call(audios, function (i) {  
                // 将audios中其他的audio全部暂停  
                i !== self && i.pause();  
            })  
        }  
        // 给play事件绑定暂停函数  
        [].forEach.call(audios, function (i) {  
            i.addEventListener("play", pauseAll.bind(i));  
        })  
    } 
</script>

</html>