音乐自动播放，播放暂停。微信自动播放

最新推荐文章于 2021-05-25 15:13:52 发布

丑心疼

最新推荐文章于 2021-05-25 15:13:52 发布

阅读量345

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Zhangqwr/p/8125066.html

本文介绍了一种在网页中实现音频文件自动播放的方法，并针对不同浏览器环境及微信平台提供了具体的JavaScript代码实现。通过监听触屏事件来触发音频播放，解决了跨平台自动播放的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

   <p onclick="play()" id="audioBtn"></p>
  <audio src="music1.mp3" id="indexaudio" autoplay="autoplay" loop="loop"></audio>

autoplay加载完自动播放
    loop播放完重新播放

    function play() {
    var audio = document.getElementById('indexaudio');
    if(audio.paused) {
        audio.play(); //audio.play();// 这个就是播放
        //$("#btn").addClass("active")
        alert('播放')
    } else {
        audio.pause(); // 这个就是暂停
        //$("#btn").removeClass("active")
        alert('暂停')
    }
}

解决微信自动播放效果

function autoPlayMusic() {
    // 自动播放音乐效果，解决浏览器或者APP自动播放问题
    function musicInBrowserHandler() {
            play(true);
            document.body.removeEventListener('touchstart', musicInBrowserHandler);
    }
    document.body.addEventListener('touchstart', musicInBrowserHandler);

    // 自动播放音乐效果，解决微信自动播放问题
    function musicInWeixinHandler() {
        play(true);
        document.addEventListener("WeixinJSBridgeReady", function() {
                musicPlay(true);
        }, false);
        document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
    }
        document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
 }

转载于:https://www.cnblogs.com/Zhangqwr/p/8125066.html