<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="utf-8" />

     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

     <title>摇一摇功能</title>

 </head>

 <body onload="init()">

 <p>用力摇一摇你手机</p>

 <audio id="musicBox" controls src=""/>

 </body>

 </html>

 <script type="text/javascript">

         //Javascript

         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("摇动了，播放");

                     var media=document.getElementById("musicBox");//获取音频控件

                     media.setAttribute("src","http://1.html5weby1y.sinaapp.com/2.mp3");

                     media.load();//加载音频

                     media.play();//播放音频

                 }

                 last_x = x;

                 last_y = y;

                 last_z = z;

             }

         }

     </script>

html5 web 摇一摇切换歌曲的更多相关文章

  1. 利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换

    我比较喜欢听音乐,特别是周末的时候,电脑开着百度随心听fm,随机播放歌曲,躺在床上享受.但碰到了一个烦人的事情,想切掉不喜欢的曲子,还得起床去操作电脑换歌.于是思考能不能用手机控制电脑切换歌曲,经过一 ...

  2. html5实现web app摇一摇换歌

    微信可以摇歌曲,根据声音识别出歌曲,然后返回歌曲信息,利用html5的deviceOrientation特性和deviceMotion事件也可以在web app上实现类似于微信摇一摇的功能,原生的ap ...

  3. html5实现摇一摇功能

    原理:使用DeviceMotion实现,关于DeviceMotion介绍可以查看 https://developer.mozilla.org/en-US/docs/Web/Reference/Even ...

  4. 用HTML5实现手机摇一摇的功能(转)

    在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持.这个特性包括两种事件: 1.devi ...

  5. 通过手机Web实现手机摇一摇的功能

    经常我们玩微信都会用到查到附近的人,都是在app上实现手机摇一摇的功能.现在,我们将此技术搬移到手机web上,供大家学习,主要是用到HTML5的重要特性就是DeviceOrientation:官方文档 ...

  6. h5手机摇一摇功能实现：基于html5重力感应DeviceMotionEvent事件监听手机摇晃

    DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪.罗盘及加速计)的Dom事件,事件描述如下: deviceorientation:提供设备的物理方向信 ...

  7. HTML5摇一摇（上）—如何判断设备摇动

    刚刚过去的一年里基于微信的H5营销可谓是十分火爆,通过转发朋友圈带来的病毒式传播效果相信大家都不太陌生吧,刚好最近农历新年将至,我就拿一个"摇签"的小例子来谈一谈HTML5中如何调 ...

  8. HTML5实现摇一摇

    一.原理: 利用devicemotion获取移动速度,得到device移动时相对之前某个时间的差值比 二.效果图: 三.源码: //先判断设备是否支持HTML5摇一摇功能 if (window.Dev ...

  9. html5实现微信摇一摇功能

    在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...

随机推荐

  1. C宏定义

    宏定义中宏名一般用大写,用以和一般的变量名区分开来,但是用宏名用小写也没有错; 对程序中用双引号括起来的字符串内的字符,不进行宏替换操作, #include<stdio.h> #defin ...

  2. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  3. OpenACC 书上的范例代码（Jacobi 迭代），part 1

    ▶ 使用Jacobi 迭代求泊松方程的数值解 ● 原始串行版本,运行时间 2272 ms #include <stdio.h> #include <stdlib.h> #inc ...

  4. 表析LESS、Sass和Stylus的异同

    . 首页 博客园 联系我 前言:CSS预处理语言. 基本差别. 基本语法. 变量与作用域. 混合(Mixins). 嵌套实现后代选择器. 继承. 条件语句. 循环语句. 综合对比. 留言评论 返回顶部 ...

  5. bootstrap做的导航

    顶部导航:nav-tabs 左边导航:nav-list 响应式布局:div嵌套 ~ container.row.ol-lg-X 效果: 源码: <!DOCTYPE html> <ht ...

  6. FireDAC FDQuery

    http://docwiki.embarcadero.com/RADStudio/XE6/en/TFDMemTable_Questions#Q:_How_can_I_copy_all_records_ ...

  7. UI5-文档-4.9-Component Configuration

    在我们介绍了模型-视图-控制器(MVC)概念的所有三个部分之后,现在我们将讨论SAPUI5的另一个重要的结构方面. 在这一步中,我们将把所有UI资产封装在一个独立于索引的组件中.html文件.组件是S ...

  8. Python之reduce函数

    描述 reduce() 函数会对参数序列中元素进行累积. 函数将一个数据集合(链表,元组等)中的所有数据进行下列操作:用传给reduce中的函数 function(有两个参数)先对集合中的第 1.2 ...

  9. 数据恢复软件extundelete介绍

    linux下文件系统一般由文件名.Inode.Block三部分组成.当一个用户在Linux系统中试图访问一个文件时,系统会先根据文件名去查找它的inode,看该用户是否具有访问这个文件的权限.如果有, ...

  10. Haskell语言学习笔记（42）Bifunctor

    Bifunctor class Bifunctor p where bimap :: (a -> b) -> (c -> d) -> p a c -> p b d bim ...