微信網頁背景音樂及互動音樂自動播放
因為移動端的普及,在製作微信 H5 及微信互動如:搖一搖時,會涉及到頁面中新增音樂,然後現在在手機中,為了避免流量流失情況,安卓和蘋果系統都已禁止視訊的自動播放了,
解決方案:
監聽 DOM 載入,在DOM 載入之後來監聽微信的 WeixinJSBridgeReady ,程式碼如下:
document.addEventListener('DOMContentLoaded',function (){
function audioAutoPlay(){
var audioElem = document.getElementById('mail');
audioElem .play();
document.addEventListener("WeixinJSBridgeReady", function () {
// 可在這裡對 audioElem 進行 src 賦值
audioElem .play();
}, false);
}
audioAutoPlay();
});
搖一搖:
var SHAKE_THRESHOLD = 300,
last_update = 0,
x = y = z = last_x = last_y = last_z = 0,
function deviceMotionHandler(eventData) {
var acceleration = eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
if ((curTime - last_update) > 500) { //多次移動事件中取兩個點的事件間隔
var diffTime = curTime - last_update;
last_update = curTime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
//var speed = Math.abs(x + y + z - last_x - last_y - last_z) / (diffTime * 1000);
var dist = Math.sqrt((x-last_x)*(x-last_x)+(y-last_y)*(y-last_y)+(z-last_y)*(z-last_y))
var speed = dist/diffTime*10000;
if (speed > SHAKE_THRESHOLD) {
alert('搖一搖顯示');
audioAutoPlay();
}
last_x = x;
last_y = y;
last_z = z;
}
}