2019-07-16 09:30:32 weixin_39304726 阅读数 158
  • RK3399开发板调试android8.1功能实现

            本次课程将会使用 RK3399 多块开发板,使用 android 8.1 最新代码,带领大家把开发板上面的硬件模块功能都实现了 总体课程规划如下;         1准备篇         2.点亮屏幕         3.触摸屏         4.以太网WIF和蓝牙         5.USB功能实现和TF卡         6.GPIO驱动操作及串口         7.camera摄像头         8. audio音频

    950 人正在学习 去看看 谢荣

在IOS端 audio是不能自动播放的 audio必须在点击的情况下才能播放
1 以下是js全部代码 当你点击页面某个地方 都可以触发audio播放
setTimeout(() => {
(function () {
var audio = document.querySelector(’#audio’);
function PlayAudio() {
audio.load(); // iOS 9 需要load一下, 否则直接play无效
audio.play(); // iOS 7/8 需要play一下
}
audio.addEventListener(‘play’, function () {
// 当 audio 能够播放后, 移除这个事件
window.removeEventListener(‘touchstart’, PlayAudio, false);
}, false);
window.addEventListener(‘touchstart’, PlayAudio, false);
})();
}, 500)
let user = window.localStorage.getItem(‘ethelWxUserInfo’)
if (!user || user == undefined || user == ‘undefined’) {
window.localStorage.removeItem(‘ethelWxUserInfo’)
}
延时的原因是 页面渲染事件大概17毫秒 时间随自己设定

2 以下是html部分
<audio src=“https://aiser.oss-cn-beijing.aliyuncs.com/media/shinian.mp3” autoplay=“autoplay” loop="" audio/》

2019-10-17 13:41:05 weixin_41587194 阅读数 9
  • RK3399开发板调试android8.1功能实现

            本次课程将会使用 RK3399 多块开发板,使用 android 8.1 最新代码,带领大家把开发板上面的硬件模块功能都实现了 总体课程规划如下;         1准备篇         2.点亮屏幕         3.触摸屏         4.以太网WIF和蓝牙         5.USB功能实现和TF卡         6.GPIO驱动操作及串口         7.camera摄像头         8. audio音频

    950 人正在学习 去看看 谢荣

audio设置了自动播放,在安卓系统上可以自动播放,但是在IOS系统上由于限流机制不能自动播放,所以要用户触发播放事件才能播放

<audio id="singleDog" autoplay="autoplay" loop="loop">
      <source src="singleDog.wav" type="audio/wav">
</audio>

解决IOS微信环境下不能自动播放

const singleDog= document.getElementById('singleDog');
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
        singleDog.play();
} else {
    if (document.addEventListener) {
         document.addEventListener("WeixinJSBridgeReady", function() {
            singleDog.play();
         }, false);
    } else if (document.attachEvent) {
         document.attachEvent("WeixinJSBridgeReady", function() {
            singleDog.play();
         });
         document.attachEvent("onWeixinJSBridgeReady", function() {
            singleDog.play();
         });
    }
}

 

2020-01-07 11:51:31 amihui 阅读数 5
  • RK3399开发板调试android8.1功能实现

            本次课程将会使用 RK3399 多块开发板,使用 android 8.1 最新代码,带领大家把开发板上面的硬件模块功能都实现了 总体课程规划如下;         1准备篇         2.点亮屏幕         3.触摸屏         4.以太网WIF和蓝牙         5.USB功能实现和TF卡         6.GPIO驱动操作及串口         7.camera摄像头         8. audio音频

    950 人正在学习 去看看 谢荣

手机界的ie——ios手机,总是会有很多自己的一些规则,或好或坏的影响了开发者。

这次记录的是本次开发遇到的多音轨播放音乐,各种场景下切换音频时候遇到了一些坑。

无法自动播放

ios下的safari和微信内置浏览器都不支持audio的自动播放

document.addEventListener('WeixinJSBridgeReady',function(){audio.play()},false)

WeixinJSBridgeReady 事件从页面加载开始到结束只会执行一次

多音轨播放的时候就会有点问题了。因为我需要一个背景音乐和点击播放的音效。

解决

创建两个audio标签,一个为背景音乐,一个为其他音效

<audio id="audioBg1" preload loop autoplay :src="url" ></audio>
<audio id="audioBg2" preload controls autoplay :src="otherurl" ></audio>
// 加载一次
document.addEventListener(
  "WeixinJSBridgeReady",
  function() {
    audioBg1.load();
    audioBg2.load();
  },
  false
);

// 每次替换audioURL
audioBg2.setAttribute("src", musicURL);
audioBg2.load();
audioBg2.volume = 0.6;
audioBg2.play();

注意:

  1. audio标签必须设置 controls , 然后通过css隐藏该audio ,否则无法播放 ;
  2. 在页面加载的时候需要通过 监听 WeixinJSBridgeReady 让audio.load()加载一次 ,否则后续也无法自动播放 ;
2020-01-10 14:54:29 qq_42734999 阅读数 6
  • RK3399开发板调试android8.1功能实现

            本次课程将会使用 RK3399 多块开发板,使用 android 8.1 最新代码,带领大家把开发板上面的硬件模块功能都实现了 总体课程规划如下;         1准备篇         2.点亮屏幕         3.触摸屏         4.以太网WIF和蓝牙         5.USB功能实现和TF卡         6.GPIO驱动操作及串口         7.camera摄像头         8. audio音频

    950 人正在学习 去看看 谢荣
	最近的一个项目需要给页面加背景音乐,安卓中audio的autoplay属性可以自动播放,但是ios播放失败,在网上看了解决办法,记录一下,O(∩_∩)O~~。但是这个方法只有在微信中打开有效,浏览器中无效

第一步、引入jweixin-1.0.0.js

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

第二部、wx.config配置 错误也没问题

function autoplay() {
	wx.config({
		debug: false,
		appId: '',
		timestamp: '',
		nonceStr: '',
		signature: '',
		jsApiList: []
	})
	wx.ready(function() {
		var audio = document.getElementById('music');
		audio.play()
	})
}
autoplay()
2019-04-15 10:59:00 Brianhp 阅读数 655
  • RK3399开发板调试android8.1功能实现

            本次课程将会使用 RK3399 多块开发板,使用 android 8.1 最新代码,带领大家把开发板上面的硬件模块功能都实现了 总体课程规划如下;         1准备篇         2.点亮屏幕         3.触摸屏         4.以太网WIF和蓝牙         5.USB功能实现和TF卡         6.GPIO驱动操作及串口         7.camera摄像头         8. audio音频

    950 人正在学习 去看看 谢荣

audio标签在安卓系统上面只需要设置audio标签的一些属性就可以实现自动播放和循环播放功能,但是在ios系统中因为其独特的安全设置原因,不能自动播放和循环播放,下面是我在项目中的解决办法:
用js判断当前浏览器类型,是否为微信浏览器
//window.navigator.userAgent 方法可以返回关于当前浏览器信息
在这里插入图片描述
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190415104902901.png在这里插入图片描述
上面只是针对在微信浏览器中的方法,而WeixinJSBridge是微信浏览器私有api,并不是所有浏览器都内置了WeixinJSBridge,所以对代码修改如下:
在这里插入图片描述
//设置循环播放
//设置循环播放$('#audio').on('ended', function() {  //监听音乐播放状态$("#audio").get(0).load();$("#audio").get(0).play();});

没有更多推荐了,返回首页