并可点击按钮实现暂停或播放【适用手机端】"/>
html增加背景音乐，并可点击按钮实现暂停或播放【适用手机端】
实现效果：
页面加载完成自动播放背景音乐，可点击进行关闭操作
html代码：
<html><title>背景音乐</title></head><body><p class="close_music_div"><a href="javascript:void(0)" onclick="pauseAuto()" class="f85">关闭音乐 <img src="__HOMESTYLE__/images/music_03.jpg" alt=""></a></p><p class="open_music_div" style="display: none"><a href="javascript:void(0)" onclick="openmusic()" class="f85">开启音乐 </a></p><audio style="display:none; height: 0" id="bg-music" preload="auto" src="/uploads/music/{$music_info.music_url}" loop="loop"></audio><script>//音乐自动播放$(document).ready(function(){autoPlayMusic();audioAutoPlay();});function openmusic(){autoPlayMusic();audioAutoPlay();$(".close_music_div").css({"display":"block"});$(".open_music_div").css({"display":"none"});}function pauseAuto(){var audio = document.getElementById('bg-music');audio.pause();$(".close_music_div").css({"display":"none"});$(".open_music_div").css({"display":"block"});}function audioAutoPlay() {var audio = document.getElementById('bg-music');audio.play();document.addEventListener("WeixinJSBridgeReady", function () {audio.play();}, false);}// 音乐播放function autoPlayMusic() {// 自动播放音乐效果，解决浏览器或者APP自动播放问题function musicInBrowserHandler() {musicPlay(true);document.body.removeEventListener('touchstart', musicInBrowserHandler);}document.body.addEventListener('touchstart', musicInBrowserHandler);// 自动播放音乐效果，解决微信自动播放问题function musicInWeixinHandler() {musicPlay(true);document.addEventListener("WeixinJSBridgeReady", function () {musicPlay(true);}, false);document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);}document.addEventListener('DOMContentLoaded', musicInWeixinHandler);}function musicPlay(isPlay) {var media = document.querySelector('#bg-music');if (isPlay && media.paused) {media.play();}if (!isPlay && !media.paused) {media.pause();}}</script></body>
</html>
更多推荐
html增加背景音乐,并可点击按钮实现暂停或播放【适用手机端】
发布评论