IOS微信摇一摇声音无法播放的解决办法

在IOS中第一次调用play方法播放音频会被阻止，必须得等用户有交互动作，比如touchstart，click后才能正常调用，所以可以在摇一摇之前提醒用户点击一下开始游戏的按钮或者给用户一个弹窗，用户点击的时候播放一个超级短的无声音文件，之后替换src，这样再调用play方法就可以了。

代码如下如：

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 <title>Document</title>
</head>
<body>

 <button>开始游戏</button>

 <audio src="https://daoket.github.io/img/load.mp3" id="audio"></audio>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script type="text/javascript">

 $('button').one('touchstart', function () {
  var audio = document.getElementById("audio");
  audio.play();
  audio.setAttribute('src', 'https://daoket.github.io/img/shake.mp3');
  audio.load();
  $(this).text('游戏进行中');
 })

 /**
  * 移动端摇一摇
  * @params devicemotion 提供设备加速度信息
  */
 window.addEventListener('devicemotion', devicemotionHandler, false);

 var x,
  y,
  z,
  last_x,
  last_y,
  last_z,
  last_time = 0,
  SHAKE_SPEED = 4000;
 function devicemotionHandler (evet) {
  var acc = event.accelerationIncludingGravity,
   curTime = new Date().getTime(),
   diffTime = curTime - last_time;

  if (diffTime > 100) {
    last_time = curTime;

    x = acc.x;
    y = acc.y;
    z = acc.z;

    var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
    if (speed > SHAKE_SPEED) {
    document.getElementById("audio").play()
    }

    last_x = x;
    last_y = y;
    last_z = z;
  }
 }
 </script>
</body>
</html>

在线查看

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • IOS 实现摇一摇的操作

    要实现摇一摇的功能,类似于微信的摇一摇 方法1:通过分析加速计数据来判断是否进行了摇一摇操作(比较复杂) 方法2:iOS自带的Shake监控API(非常简单) 本文介绍方法2: 判断摇一摇的步骤: 1)检测到开始摇动 - (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event{ //检测到后可做一些处理 } 2)摇一摇被取消或中断 - (void)motionCancelled:(UIEventSubtype)mot

  • iOS使用CoreMotion实现摇一摇功能

    iOS使用CoreMotion实现摇一摇功能

    现在网上介绍的iOS摇一摇功能,基本是以借助系统的ShakeToEdit功能来实现,什么是ShakeToEdit?看下图应该就能懂: 怎么实现?请看以下代码: //ViewController 加入以下两方法 -(BOOL)canBecomeFirstResponder { //让当前controller可以成为firstResponder,这很重要 return YES; } -(void)motionEnded:(UIEventSubtype)motion withEvent:(UIEven

  • iOS实现“摇一摇”与“扫一扫”功能示例代码

    iOS实现“摇一摇”与“扫一扫”功能示例代码

    "摇一摇"功能的实现: iPhone对 "摇一摇"有很好的支持,总体说来就两步: 在视图控制器中打开接受"摇一摇"的开关; - (void)viewDidLoad { // 设置允许摇一摇功能 [UIApplication sharedApplication].applicationSupportsShakeToEdit = YES; // 并让自己成为第一响应者 [self becomeFirstResponder]; } 在"摇一摇

  • iOS实现微信朋友圈与摇一摇功能

    iOS实现微信朋友圈与摇一摇功能

    本Demo为练手小项目,主要是熟悉目前主流APP的架构模式.此项目中采用MVC设计模式,纯代码和少许XIB方式实现.主要实现了朋友圈功能和摇一摇功能. 预览效果: 主要重点 1.整体架构 利用UITabBarController和UINavigationController配合实现.其中要注意定义基类,方便整体上的管理,例如对UINavigationController头部的颜色,字体和渲染颜色等设置.以及对UITabBarController的底部的渲染等. [self.navigationB

  • iOS仿微信摇一摇动画效果加震动音效实例

    iOS仿微信摇一摇动画效果加震动音效实例

    众所周知, 微信中的摇一摇功能: 搜索人/歌曲/电视,同样在一些其他类APP中也有一个摇一摇签到, 摇一摇随机选号等功能,下面以微信摇一摇功能来介绍实现原理. 对于摇一摇功能, 在iOS中系统默认为我们提供了摇一摇的功能检测API. iOS 中既然已经提供了接口, 我们直接调用就好了. #import <QuartzCore/QuartzCore.h> #import <AudioToolbox/AudioToolbox.h> 实现原理 1. 监听摇一摇方法 // 摇一摇开始 -

  • iOS通过UISwitch控制摇一摇

    iOS通过UISwitch控制摇一摇

    很多项目中用到了摇一摇功能,当我去实现的时候,发现很多问题: 1.如何控制摇一摇功能?即打开和关闭 2.如何在所有控制器中实现摇一摇功能? 摇一摇功能很好实现,但如何控制它,却不那么简单,我找了很多资料,最后决定用NSUserDefaults属性存储来控制摇一摇功能 具体实现细节 我在个人设置里面添加摇一摇开关 1.通过NSUserDefaults属性存储保存UISwitch开关的状态(解决问题一) 在此开关下实现以下代码: - (IBAction)shakeNavi:(UISwitch *)s

  • iOS仿微信摇一摇功能

    iOS仿照微信摇一摇功能实现 一.描述 需要做一个界面,仿照微信摇一摇,获取接口进行签到功能. 首先明确以下几点: 1.需要震动. 2.需要声音.(准备好mp3音效) 二.直接贴代码 / Created by 石雄伟 on 16/7/29. // Copyright © 2016年 石雄伟. All rights reserved. // #import "SignBoardViewController.h" #import <AVFoundation/AVFoundation.

  • IOS微信摇一摇声音无法播放的解决办法

    在IOS中第一次调用play方法播放音频会被阻止,必须得等用户有交互动作,比如touchstart,click后才能正常调用,所以可以在摇一摇之前提醒用户点击一下开始游戏的按钮或者给用户一个弹窗,用户点击的时候播放一个超级短的无声音文件,之后替换src,这样再调用play方法就可以了. 代码如下如: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /

  • 微信小程序 wx.uploadFile无法上传解决办法

    微信小程序 wx.uploadFile无法上传解决办法

    微信小程序 wx.uploadFile无法上传解决办法 微信安卓客户端无法使用wx.uploadFile上传文件的问题有不少开发者都遇到. 我也因为一直不能解决,硬着头皮提交审核最后被拒(抱着审核者最好用iOS检测的心态,不巧审核我应用的用的是安卓),才尝试使用第三方的手段解决. 最终我是用了七牛第三方存储的方式,将文件直接上传至七牛的储存的空间上再回调使用. 当然像又拍云,万象优图这些第三方存储源都可以采用这种思路. 首先是将七牛的https上传域名放进小程序的域名名单中. 这里我使用的是七牛

  • Android实现类似IOS右滑返回的效果(原因分析及解决办法)

    使用类库SwipeBackLayout https://github.com/Issacw0ng/SwipeBackLayout 出现的问题: 1. 主Activity返回时黑屏或者返回只是看到桌面背景而没有看到上一个Activity界面 原因: 使用滑动返回需要在Activity的额主题中声明android:windowIsTranslucent=true,而该属性是设置Activity为是否为透明主题,当主Activity采用透明主题时,由于是app Activity栈中的第一个,所以滑动返

  • iOS中打包上传常见的错误与解决办法

    iOS中打包上传常见的错误与解决办法

    一.ERROR ITMS-90535 首先这个原因导入了其他第三方导致的问题,首先找到友盟库里面的腾讯API,找到其中的info.plist文件: 找到箭头所指向的一行,随后删掉 这一行 就可以了: 二.ERROR ITMS-90635 这个是由于项目中有使用到Cocoapods导入第三方的库使用bitcode造成的,此种错误我在网上找到了三种解决办法: 方法一 项目->targets->enable bitcode->no pods->project->enable bit

  • 微信小程序audio组件在ios端无法播放的解决办法

    微信小程序audio组件在ios端无法播放的解决办法

    解决方法: 给 audio 组件绑定点击事件,手动触发播放暂停方法! 代码片段: wxml文件 <!-- 判断是语音通话,有通话记录,通话描述不包含'未接' --> <view class="reference" wx:if="{{itemList.activity_type === 'phone' && itemList.activity_reference_id && tool.indexOf(itemList.comme

  • iOS中定位(location manager )出现log日志的解决办法

    iOS中定位(location manager )出现log日志的解决办法

    前言 最近发现一个问题,自iOS 10.0以后,项目中老是出现有关定位管理者的日志信息,说定位管理者最好放在主线程;在实际开发中,当在子线程中创建定位管理者,有可能收不到回调信息 提示信息如下: A location manager (0x7fbafac12560) was created on a dispatch queue executing on a thread other than the main thread. It is the developer's responsibili

  • iOS实现微信摇一摇功能

    一.描述 需要做一个界面,仿照微信摇一摇,获取接口进行签到功能. 首先明确以下几点: 1.需要震动. 2.需要声音.(准备好mp3音效) 二.这边直接贴代码 / Created by 石雄伟 on 16/7/29. // Copyright © 2016年 石雄伟. All rights reserved. // #import "SignBoardViewController.h" #import <AVFoundation/AVFoundation.h> #import

  • java仿微信摇一摇实现播放音乐

    摇一摇功能是使用手机加速度传感器来判断是否处于摇一摇状态,从而进行相应的操作. 1.将音乐文件放在res/raw下,如果没有raw,创建一个 2.布局文件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http:/

随机推荐