自动播放背景音乐

本文主要是介绍自动播放背景音乐，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

html代码

<div id="audio-btn" class="rotate"><audio id="media" autoplay preload loop src="img/music.mp3"></audio>
</div>

js代码

// 自动播放背景音乐
function audioAutoPlay(id) {var audio = document.getElementById(id);var play = function () {audio.play();};document.addEventListener("WeixinJSBridgeReady", play, false);document.addEventListener('YixinJSBridgeReady', play, false);play();
}
audioAutoPlay('media');// 开关控制音乐播放
var audio = $('#media')[0];
$('#audio-btn').click(function(){if($('#audio-btn').hasClass('rotate')) {$('#audio-btn').removeClass('rotate');audio.pause();}else{$('#audio-btn').addClass('rotate');audio.play();}
});

css样式+动画

#audio-btn {position: fixed;top: .8rem;right: .8rem;z-index: 10;width: 1.25rem;height: 1.25rem;background: url(../img/btn-music.png) no-repeat center center;background-size: 100% 100%;-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}.rotate {animation:rotate-left 2s linear infinite;-webkit-animation:rotate-left 2s linear infinite;-moz-animation:rotate-left 2s linear infinite;
}
@keyframes rotate-left {0%{transform:rotate(360deg);}100%{transform:rotate(0);}
}

这篇关于自动播放背景音乐的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---