需求:利用html5实现类似微信的手机摇一摇功能,并实现微博转发
难点:
1.监控摇动状态
2.播放摇动后音频
难点一,通过html5的DeviceMotionEvent实现,核心代码如下
var SHAKE_THRESHOLD = 3000;
var last_update = 0;
var x=y=z=last_x=last_y=last_z=0;
function init(){
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion',deviceMotionHandler, false);
} else{
alert('not support mobile event');
}
}
function deviceMotionHandler(eventData) {
var acceleration =eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
if ((curTime - last_update)> 100) {
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 * 10000;
if (speed > SHAKE_THRESHOLD) {
alert("摇动了");
}
last_x = x;
last_y = y;
last_z = z;
}
难点二:代码
function deviceMotionHandler(eventData) {
var acceleration =eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
if ((curTime - last_update)> 100) {
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 * 10000;
if (speed > SHAKE_THRESHOLD) {
media.setAttribute("src","http://192.168.1.106/weixin_yaoyiyao.mp3");
media.load();
media.play();
}
last_x = x;
last_y = y;
last_z = z;
}
}
<audio style="display:hide" id="musicBox" preload="metadata" controls
src="http://192.168.1.106/weixin_yaoyiyao.mp3"
autoplay="false"
>
</audio>
此两种方式为目前唯一方式
但只能适用少数浏览器
ios平台,safari,可以监控摇动,但无法通过js直接播放音频
android平台,android os 自带浏览器无法监控摇动,但是第三方浏览器,opera,chrome均能监控摇动,也可以通过js直接播放音频
总之目前,用手机实现摇一摇功能,不能完全满足要求
分享到:
相关推荐
通过HTML实现手机摇一摇的简单功能,并通过上传服务器实现手机摇一摇功能
HTML5实现的简单的摇一摇,主要是测试HTM5的摇一摇功能。代码中有不需要的代码,未做处理,相信可以看懂自动过滤掉。
javascript html5摇一摇功能的实现_.docx
HTML5模拟微信摇一摇功能,有两种方式实现,分别在代码中实现
经常我们玩微信都会用到查到附近的人,都是在app上实现手机摇一摇的功能。现在,我们将此技术搬移到手机web上,供大家学习,主要是用到HTML5的重要特性就是
主要介绍了Html5+JS实现手机摇一摇功能,本文使用HTML5的DeviceOrientation实现监听手机方向传感器数据,实现摇一摇功能雏形,需要的朋友可以参考下
通过网上的资料,加上自己的整理,写了一份html摇一摇功能的简介,用做技术备份。 知识要点 1、DeviceMotionEvent 这是html5支持的重力感应事件,关于文档请看:...
主要介绍了HTML5使用DeviceOrientation实现摇一摇功能的相关资料,需要的朋友可以参考下
其实H5+JavaScript写出来的页面,通过获取手机的屏幕长和宽,以及添加声音等就可以实现摇一摇的效果。 第一步,实现手机摇动改变颜色 <!doctype html> <html> <head> <meta charset=utf-8 ...
主要介绍了基于HTML5实现类似微信手机摇一摇功能(计算摇动次数),需要的朋友可以参考下
微信摇一摇添加好久,很多朋友都在玩,那么基于html5 DeviceOrientation 如何实现微信摇一摇功能的呢?下面由脚本之家小编把详细内容分享给大家,供大家参考。
主要介绍了HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例,本文直接给出实现代码,需要的朋友可以参考下
手机上的摇一摇功能不错.怎么实现的呢
最近接了个项目,其中有需求是要实现摇一摇红包功能,在网上搜了好久,都没有找到源码,没办法,只有自动写了,下面小编把我的劳动成果分享给大家供大家参考,本文写的不好,还请各位大侠提出宝贵意见,共同学习进步...
主要介绍了利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换,非常具有实用价值,需要的朋友可以参考下。