Vue--模仿微信摇一摇--音频播放的坑

左手的ㄟ右手 2022-02-27 15:54 248阅读 0赞

let vm = new Vue({
    	data:{
    		timer_c: '',//动画定时器
            timer_d:'',//数据请求定时器
            lastTime:0,
            lastX:0,
            lastY:0,
            lastZ:0,
            shakeSpeed:3800,
            animating:false,//是否动画
    	},
    	methods:{
    		shake(eventDate){
                    //获取设备加速度信息
                    var acceleration = eventDate.accelerationIncludingGravity;
                    var nowTime = new Date().getTime();
                    //如果这次摇的时间距离上次摇的时间有一定间隔 才执行
                    if(nowTime - this.lastTime > 100){
                        var diffTime = nowTime - this.lastTime;
                        this.lastTime = nowTime;
                        var x=0,y=0,z=0;
                        x = acceleration.x;
                        y = acceleration.y;
                        z = acceleration.z;
                        var speed = Math.abs(x + y + z - this.lastX - this.lastY - this.lastZ) / diffTime * 10000;
                        if(speed > this.shakeSpeed){
                            //判断是否登录
                            if(this.login==false){
                                this.$indicator.close();
                                this.AppLogin('{
       { route('m.activityGame.shake').'?act=' }}'+app.request('act'));
                                return;
                            }
                            window.removeEventListener('devicemotion', this.shake, false);
                            this.$indicator.close();
                            this.is_operate = false;
                            if(this.timer_c){
                                clearTimeout(this.timer_c);
                            }
                            if(this.timer_d){
                                clearTimeout(this.timer_d);
                            };
                            document.getElementById('start').play();
                            this.animating = true;
                            this.timer_c = setTimeout(function(){
                                this.timer_d = setTimeout(function(){
                                    window.removeEventListener('devicemotion', this.shake, false);
                                    document.getElementById('end').play();
                                    this.getAward();
                                },2000);
                                this.animating = false;
                                this.$indicator.open('开奖中...');
                                window.addEventListener('devicemotion', this.shake, false);
                            },1450)
                        }
                        this.lastX = x;
                        this.lastY = y;
                        this.lastZ = z;
                    }
                },
    	},
    	mounted(){
    		//添加devicemotion事件
                                if(window.DeviceMotionEvent){
                                    window.addEventListener('devicemotion', this.shake, false);
                                }else{
                                    app.vm.$toast('本设备不支持摇一摇功能');
                                }
    	}
    })

## 音频播放 ##

ios App加载音频有延迟，解决办法：

//手动加载音频，解决ios App播放延迟的问题
    let start=document.getElementById('start');
    start.load();

audio兼容  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70]  
ios系统下的浏览器播放音频或者视频时需要用户交互才可以

if (/i(Phone|P(o|a)d)/.test(navigator.userAgent)) {
          $(document).one('touchstart',function(e) {
                   alert('touchstart');
                   document.getElementById('start').play();
                   document.getElementById('start').pause();
                   document.getElementById('end').play();
                   document.getElementById('end').pause();
          });
    }

微信浏览器做了特殊处理，可以不用交互

<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    autoPlayAudio2() {
                    wx.config({
                        // 配置信息, 即使不正确也能使用 wx.ready
                        debug: false,
                        appId: '',
                        timestamp: 1,
                        nonceStr: '',
                        signature: '',
                        jsApiList: []
                    });
                    wx.ready(function() {
                        var globalAudio_start=document.getElementById("start");
                        var globalAudio_end=document.getElementById("end");
                        globalAudio_start.play();
                        globalAudio_start.pause();
                        globalAudio_end.play();
                        globalAudio_end.pause();
                    });
                }

这里需要注意是http还是https，**如果生产环境是https，务必前缀是https**，否则不起作用。

[https://www.ibm.com/developerworks/cn/web/wa-ioshtml5/][https_www.ibm.com_developerworks_cn_web_wa-ioshtml5]  
[https://segmentfault.com/q/1010000002500597][https_segmentfault.com_q_1010000002500597]  
[https://www.jianshu.com/p/b26cdf3a96f2?from=timeline][https_www.jianshu.com_p_b26cdf3a96f2_from_timeline]  
[https://www.jianshu.com/p/21ac8ff7bac5][https_www.jianshu.com_p_21ac8ff7bac5]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70]: /images/20220227/972172bd21764bb18c57d67cc0538c9c.png
[https_www.ibm.com_developerworks_cn_web_wa-ioshtml5]: https://www.ibm.com/developerworks/cn/web/wa-ioshtml5/
[https_segmentfault.com_q_1010000002500597]: https://segmentfault.com/q/1010000002500597
[https_www.jianshu.com_p_b26cdf3a96f2_from_timeline]: https://www.jianshu.com/p/b26cdf3a96f2?from=timeline
[https_www.jianshu.com_p_21ac8ff7bac5]: https://www.jianshu.com/p/21ac8ff7bac5

发表评论取消回复

表情：

评论列表（有 0 条评论，248人围观）

还没有评论，来说两句吧...

相关阅读

相关摇一摇声音 html5,HTML5摇一摇以及音频播放问题优化总结

前言感想：不放过任何一个WARNING、ERROR或者不够好的体验点，持续不断优化，精益求精，我们就能够得到提高。 1. 摇一摇不够灵敏、摇动很多次没有响应的问题、原来摇

古城微笑少年丶/ 2022年10月06日 13:49/ 0 赞/ 130 阅读

相关 html5微信摇一摇api,摇一摇关注JSAPI

出自微信公众平台开发者文档跳转到：导航, 搜索摇一摇关注JS API 摇一摇关注JS API目的是为已开通微信摇一摇周边，且有一定开发能力的商户提供摇一摇关注能力

╰半橙微兮°/ 2022年10月06日 07:50/ 0 赞/ 141 阅读

相关 iOS仿照微信摇一摇功能实现

iOS仿照微信摇一摇功能实现一、描述需要做一个界面，仿照微信摇一摇，获取接口进行签到功能。首先明确以下几点： 1、需要震动。 2、需要声音。（准备好[m

谁借莪１个温暖的怀抱￠/ 2022年07月17日 02:24/ 0 赞/ 165 阅读

相关 Weex-iOS 摇一摇功能

Weex-iOS 摇一摇功能需求： Weex+Vue开发混合App。项目需求中，有一个页面，需要用到摇一摇功能，来进行业务交互。由于Weex 三方插件资料比较少，这

秒速五厘米/ 2022年05月13日 15:06/ 0 赞/ 184 阅读

相关 Weex-Android 摇一摇功能

Weex-Android 摇一摇功能需求： Weex+Vue开发混合App。项目需求中，有一个页面，需要用到摇一摇功能，来进行业务交互。由于Weex 三方插件资料比

短命女/ 2022年05月13日 15:00/ 0 赞/ 237 阅读

相关摇一摇功能的实现

实现摇一摇功能须在视图控制器中进行编码。首先将当前视图控制器设置为第一响应者；其次实现摇一摇的三个协议方法。示例如下： [UIApplication sh

一时失言乱红尘/ 2022年05月07日 20:04/ 0 赞/ 135 阅读

相关微信摇一摇之获取设备与用户信息

一.前言利用微信摇一摇的功能接口可实现我们日常的某些需求,比如微信摇一摇签到等。首先需要购买设备，然后在开发者后台创建应用以及绑定回调界面，回接下来就开始开发了。

古城微笑少年丶/ 2022年04月11日 07:40/ 0 赞/ 246 阅读

相关 js实现手机摇一摇

事件监听 DeviceMotion，html5提供的新的DOM事件，其提供设备的加速信息，表示为定义在设备上的坐标系中的卡尔迪坐标。其还提供了设备在坐标系中的自转速率。

╰半橙微兮°/ 2022年03月17日 08:06/ 0 赞/ 237 阅读

相关 Vue--模仿微信摇一摇--音频播放的坑

let vm = new Vue({ data:{ timer_c: '',//动画定时器 timer_d:'',//数据

左手的ㄟ右手/ 2022年02月27日 15:54/ 0 赞/ 249 阅读

相关摇一摇抽奖

情景分析：商家时常会搞一些抽奖活动，这类活动有个特点就是抽奖用户会在抽奖时间突然大量的涌入系统，这时DB瞬间承受压力倍增，随时可能出现宕机的情况，从而影响整个

刺骨的言语ヽ痛彻心扉/ 2021年10月15日 08:59/ 0 赞/ 262 阅读