【工作笔记】微信公众号页面摇一摇+触发音效

最新推荐文章于 2018-09-23 05:19:03 发布

戴璟昊

最新推荐文章于 2018-09-23 05:19:03 发布

阅读量921

点赞数

分类专栏： JavaScript 微信公众号文章标签：工作需求微信公众号

本文链接：https://blog.csdn.net/dairongliang123/article/details/78251718

版权

JavaScript 同时被 2 个专栏收录

8 篇文章 1 订阅

订阅专栏

微信公众号

4 篇文章 0 订阅

订阅专栏

需求是微信公众号页面能支持摇一摇且能够触发音效。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" />
<title>摇一摇</title>
<script src="${ctx}/static/js/jquery-1.10.1.min.js"></script>
<script src="${ctx}/js/jweixin-1.1.0.js"></script>
<script>

$(function(){
	var haveContent = "$!{haveContent}";
	if(haveContent != "" && haveContent != null){
		// 换行处理
		var element = $("#remark");
		var temp =  element.html().replace(/\n/g,'<br/>');
		element.html(temp);
	}
});

window.οnlοad=function(){init();}
function init(){
	//判断移动浏览器是否支持运动传感器事件
	if(window.DeviceMotionEvent){
		//添加一个事件监听器
		window.addEventListener('devicemotion',deviceMotionHandler,false);
	}else{
		alert('not support mobile event');
	}
}

function autoPlayAudio(){
　　wx.config({
	// 配置信息, 即使不正确也能使用 wx.ready
　　　　debug: false,
　　　　appId: '',
　　　　timestamp: 1,
　　　　nonceStr: '',
　　　　signature: '',
　　　　jsApiList: []
　　});
　　wx.ready(function() {
　　　　document.getElementById('musicBox').play();
　　});
}

// 摇一摇相关
var i = 1;
var f = 1;
var yqcount = 1;
			 
var InterValObj; //timer变量，控制时间
var count = 60; //间隔函数，1秒执行
var curCount;//当前剩余秒数
			 
window.onload = function(){init();}
var SHAKE_THRESHOLD = 2500;//定义一个摇动的阈值
var last_update = 0;//定义一个变量记录上一次摇动的时间
//定义x、y、z记录三个轴的数据以及上一次触发的时间
var x = 0, y = 0, z = 0, last_x = 0, last_y = 0, last_z = 0;

//运动传感器处理
function deviceMotionHandler(eventData){
	//获取含重力加速
	var acceleration = eventData.accelerationIncludingGravity;
	var curTime = new Date().getTime();//获取当前时间戳
	var diffTime = curTime - last_update;
	
	if(diffTime>100){
		last_update = curTime;//记录上一次摇动的时间
		
		x = acceleration.x;//获取加速度X方向
		y = acceleration.y;//获取加速度Y方向
		z = acceleration.z;//获取加速度垂直方向
		var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;//计算阈值
		if(speed > SHAKE_THRESHOLD){	
			if(f==1 && yqcount>0){
				autoPlayAudio();
				var mid = "${mid}";
				var state = "${state}";
				var token = "${token}";
				f = 0;
			}	
		}
		//记录上一次加速度
		last_x=x;
		last_y=y;
		last_z=z;
	}
}	
</script>
</head>
<body>
    <div class="shake">
        <div class="shakebox">
        	<img id="shakeimg" src="${ctx}/images_yaoyiyao/yaohand1.png">
        </div>
        <div class="gets">
        	<a>请摇一摇您的手机</a>
        </div>
        #if($!{content} != "")
	     <div style="padding: 2rem 1.2rem 1.2rem 2rem;color:#fff;text-align: left;font-size: 0.8em;">
	         <p>活动说明</p>
		 <p id="remark">$!{content}</p>
	     </div>
        #end
    </div>
    <div style="display:none;" id="voiceDiv">
	<audio id="musicBox" preload="load" controls="controls" src="${ctx}/static/music/5018.wav"/>
    </div>
</body>
</html>

其中公众号页面摇一摇方法如上，遇到的问题是ios不能触发<audio>标签的play()方法，网上查找了资料，说ios必须得用户与页面进行交互才能触发，比如点击之类的，安卓手机没有这样的问题。

找了好久，一般的方法都是加监听，但是没用，最终解决方法是引入微信的js，然后在方法中这样写：

function autoPlayAudio(){
　　wx.config({
	// 配置信息, 即使不正确也能使用 wx.ready
　　　　debug: false,
　　　　appId: '',
　　　　timestamp: 1,
　　　　nonceStr: '',
　　　　signature: '',
　　　　jsApiList: []
　　});
　　wx.ready(function() {
　　　　document.getElementById('musicBox').play();
　　});
}

这里wx.config涉及的参数不需要正确配置，wx.ready中调用<audio>标签的play()方法，即可在摇一摇的时候触发音效。

戴璟昊

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
【工作笔记】微信公众号页面摇一摇+触发音效

微信公众号页面能支持摇一摇且能够触发音效。
复制链接

扫一扫

专栏目录