由于微信浏览器时不时出现无法自动播放音乐的问题,比如7.0.8及现在的7.0.15,都无法播放音乐。
替代方案:
<!--music start--> <aside class="media-wrap on"> <img class="music_on" src="images/music_Light_on.png" alt=""> <img class="music_off" src="images/music_Light_off.png" alt=""> </aside> <audio id="autoplay" src="music.mp3"></audio>
function onDomReady() { musicSwitch(); console.log('DOM is ready'); }
// 音乐切换 function musicSwitch() { var mediaWrap = document.querySelector('.media-wrap'); var audio = document.querySelector('#autoplay'); var musicOn = document.querySelector('.music_on'); var musicOff = document.querySelector('.music_off'); var AudioContext = window.AudioContext || window.webkitAudioContext; var audioCtx = new AudioContext(); // IOS策略,无法自动播放,只能使用原来的方式播放 var isUseAudioCtx = AudioContext && !/(i[^;]+;( U;)? CPU.+Mac OS X/gi.test(navigator.userAgent); // var isUseAudioCtx = AudioContext; var url = audio.getAttribute('src'); var isPalying = true; if (isUseAudioCtx) { loadSound(url, audioCtx); } else { document.addEventListener( 'WeixinJSBridgeReady', function() { audio.play(); }, false ); audio.play(); $('#autoplay').on('ended', function() { this.load(); this.play(); }); } mediaWrap.addEventListener( 'click', function() { if (isUseAudioCtx) { if (audioCtx.state === 'suspended') { audioCtx.resume(); isPalying = true; } else { audioCtx.suspend(); isPalying = false; } } else { if (audio.paused) { audio.play(); isPalying = true; } else { audio.pause(); isPalying = false; } } if (isPalying) { mediaWrap.classList.add('on'); musicOn.style.display = 'block'; musicOff.style.display = 'none'; } else { mediaWrap.classList.remove('on'); musicOn.style.display = 'none'; musicOff.style.display = 'block'; } }, false ); } function loadSound(url, context) { var request = new XMLHttpRequest(); request.open('GET', url, true); request.responseType = 'arraybuffer'; // Decode asynchronously var onError = function(e) { console.log(e); }; request.onload = function() { context.decodeAudioData( request.response, function(buffer) { playSound(buffer, context); }, onError ); }; request.send(); } function playSound(buffer, context) { var source = context.createBufferSource(); source.buffer = buffer; source.connect(context.destination); source.start(0); source.loop = true; }