【记录】h5音频播放和按钮

最新推荐文章于 2025-05-20 10:42:34 发布

原创

最新推荐文章于 2025-05-20 10:42:34 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#h5 #css #html #JavaScript

本文详细介绍了如何使用HTML5的音频标签进行音频播放，并着重解决了在微信环境中音频自动播放的问题。通过结合HTML和CSS，创建了播放/暂停按钮，并调整了样式，确保在不同场景下音频播放的顺畅。

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

h5音频播放
顺带解决微信中浏览时音频不会自动播放
html5 音频标签：

<audio src="music/music01.mp3" hidden="hidden" preload loop="loop" autoplay="autoplay" id="bg"></audio>

按钮标签：

<img src="img/music.png" id="music" />

按钮样式：

#music {	
    position: fixed;
    top: 0.4rem;
    right: 0.3rem;
    width: 32px;
    height: 32px;
    z-index: 10000; 
}

方法：

//音频标签播放
function audioAutoPlay(id){
    var audio = document.getElementById(id);
    audio.play();
    document.addEventListener("WeixinJSBridgeReady", function () {
        audio.play();
    }, false);
}
audioAutoPlay('bg');

//音乐开启
function music(){
    //音乐
    var music = 0;
    var musicOpen = true;
    var musicTween = setInterval(function() {
        music += 2;
        $('#music').css('transform', "rotate(" + music + "deg)");
        if(music == 360) {
            music = 0;
        }
    }, 10);
    $('#music').on('