手机摇一摇功能的总结
分析:监控用户摇的动作,并且播放声音
主要功能就是上面两步,实现监控用户是否在摇,shake.js 解决了这个问题,
var myShakeEvent = new Shake({
threshold: 7, // 摇动阈值
timeout: 500 // 事件发生频率,是可选值
});
// 开始监听
myShakeEvent.start();
// 绑定函数
window.addEventListener('shake', shakeEventDidOccur, false);
function shakeEventDidOccur () {
//回调函数
// 在这里执行摇后的事件
}
播放声音的两种方法
第一种利用h5 audio播放声音
<audio id="media">
<source src="coin.mp3"/>
</audio>
// 利用play() 播放声音
document.getElementById("media").paly();
缺点:在移动端的qq浏览器、苹果原生浏览器等 不能播放声音,h5 的兼容还是存在的
使用sound.js 播放声音
// 在html中添加一个 dom元素,用来添加声音对象
<div id="ios_ms"></div>
// 加载 sound.js
// 这里利用的是 jquery的插件
soundManager.setup({
url: 'swf/',
onready: function() {
soundManager.createSound({
id: 'msg',
autoLoad: true,
autoPlay: false,
url: './coin.mp3'
});
}
});
// 添加事件
$('#ios_ms').click(function () {
soundManager.play('msg');
});
// 在回调函数中,用trigger 触发click事件来播放声音
$('#ios_ms').trigger('click');
最后这个问题还是么有解决了,怎样在苹果手机端摇一摇播放声音呢?
参考网址
demo地址
楼主博客
如果您看了本篇博客,觉得对您有所收获,请点击右下角的 [推荐]
如果您想转载本博客,请注明出处
如果您对本文有意见或者建议,欢迎留言
感谢您的阅读,请关注我的后续博客