Audio使用总结

最新推荐文章于 2024-11-17 04:15:00 发布

转载最新推荐文章于 2024-11-17 04:15:00 发布 · 284 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5caaf2bbf265da24cb3f8dd7

文章标签：

#javascript #ViewUI

下面是自己的一些工作中遇到的问题总结，第一次写，倘若有问题请指出，我会修改，会持续更新

1、ios兼容问题

1.1、ios不能自动播放问题

项目需求：在已进入页面的时候要播放音频

问题：测试的时候发现在ios里面音频不能自动播放

原因：IOS设备系统是不允许视频音频自动播放的，需要用户明确指定播放（通过一定的交互动作），相关的音频或视频才能被加载。

解决办法：

我是微信公众号项目，可以通过微信的jssdk去触发音频播放

代码：

微信的jssdk

//引入微信的js文件<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>//定义audiovar audio = (function(){
   var _audio = new Audio();
   _audio.src = 'xxx';
   _audio.load();   return _audio;
})()// 微信配置信息（即使不正确也没问题wx.config({debug: false,
appId: '',
timestamp: 1,
nonceStr: '',
signature: '',
jsApiList: []});// 在ready时触发相关事件wx.ready(function() {
  // 触发一下play事件  audio.play();});复制代码

野生方法

var audio = (function(){
   var _audio = new Audio();
   _audio.src = 'xxx';
   _audio.load();   return _audio;
})()document.addEventListener("WeixinJSBridgeReady", function () {
  WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
   // 触发一下play事件   audio.play();  });}, false);
复制代码

1.2、ios下audio预加载事件导致延迟

问题描述：如果是在动画音效比较多的页面，此时此刻如果要根据场景的变换播放不同的音效。假如在我们动画播放过程中，音频还没有缓冲完毕，或者只缓冲了一部分，音频是会不播放或者停止播放的，会出现动画和音效不同步的情况，用户体验不好，那么现在就要用到音频预加载；但是在ios中 audio自带的preload属性是失效的播放的时候会有三秒延迟

原生preload

<audio src='xxx.mp3' loop=true preload='auto' />
//兼容性不好，ios不支持preload复制代码

preload.js

//推荐使用createjs里的preloadjs，但还需要配合soundjs使用。[使用方法链接地址](https://segmentfault.com/a/1190000011080683)复制代码

onload

//在上述1.1问题中 
微信jsdk，ready中重新加载音频：audio.load();
但是这样ios刚进入页面就播放音频会出现延迟问题、其他时候点击不会 暂时不知道怎么样才能更好的优化
复制代码

其他：如果是在其他环境中，比如：VUE 可以在请求完数据以后手动load，但要注意要异步load，刚刚请求完数据，dom是没有加载完毕的

//在数据请求成功的位置使用nextTick获取dom
Vue.nextTick(function(){

    console.log(vm.$el) //可以得到'changed'
})
//也可以
setTimeout(function(){
    console.log(vm.$el) //可以得到'changed'
}, 0)复制代码

转载于:https://juejin.im/post/5caaf2bbf265da24cb3f8dd7