wx-open-audio 开发工具和ios均正常,安卓ready事件调用没有反应
微信版本:8.0系列(7,8,10,15,16等)
安卓版本:安卓10,安卓11等
手机型号:华为,oppo,小米等安卓手机
测试代码:<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta http-equiv=Content-Security-Policy
content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
<meta name=viewport
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui,viewport-fit=cover">
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=default>
<meta name=theme-color content=#ff9500>
<meta name=format-detection content="telephone=no">
<meta name=msapplication-tap-highlight content=no>
<title>狮子老爸</title>
<script type=text/javascript
src=http://res2.wx.qq.com/open/js/jweixin-1.6.0.js></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
</head>
<body>
<div id=app>
<wx-open-audio id="audio" title="001 补天神石落仙山"
style="position:absolute;left: 50%;top: 20px;margin-left: -50px;width:100px;height:100px;background-color:#1c1c1d;z-index:5002;"
src="http://qn.kuailetingba.cn/2021/03/03/a21258ae-3af9-4f0d-9177-d036b5332213.mp3"
cover="http://qn.kuailetingba.cn/2021/03/01/43571267-f81b-49ab-9bf7-5c3aef4556f3.jpg">
<script type="text/wxtag-template">
<div class="playBackground"></div>
</script>
<script slot="playing" type="text/wxtag-template">
<div class="pauseBackground"></div>
</script>
<script slot="style" type="text/wxtag-template">
<style>
.playBackground {
width: 60px;
height: 64px;
background-color: #ff9500;
cursor: pointer;
}
.pauseBackground {
width: 60px;
height: 64px;
background-color: #cccccc;
cursor: pointer;
}
</style>
</script>
</wx-open-audio>
</div>
<script>
// 初始化
var vConsole = new VConsole();
window.onload = () => {
axios.post('http://test.kuailetingba.cn/liontest/wechat/signature', {
url: window.location.href.split('#')[0],
})
.then(function (response) {
console.log('response:', response);
let result = response.data ? response.data : {};
console.log('result:', result);
let params = result.data || {};
console.log('params:', params);
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: params.appid || '', // 必填,公众号的唯一标识
timestamp: params.timestamp || 0, // 必填,生成签名的时间戳
nonceStr: params.noncestr || '', // 必填,生成签名的随机串
signature: params.signature || '',// 必填,签名
jsApiList: [
"chooseWXPay",
"closeWindow",
"chooseCard",
"openCard",
"onMenuShareTimeline",
"onMenuShareAppMessage",
"onMenuShareQQ",
"onMenuShareWeibo",
"onMenuShareQZone",
"updateAppMessageShareData",
"updateTimelineShareData",
], // 必填,需要使用的JS接口列表
openTagList: [
"wx-open-audio",
],
});
})
.catch(function (error) {
console.log('error:', error);
});
console.log('==========');
wx.ready(() => {
const audio = document.getElementById('audio');
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
console.log("ready=================");
console.log("audio", audio);
console.log(audio.readyState);
audio.addEventListener('ready', (event) => {
console.log('audio ready');
console.log('audio readyState', audio.readyState);
console.log('event.readyState', event.readyState);
});
audio.addEventListener('play', (event) => {
console.log('audio play');
});
audio.addEventListener('pause', (event) => {
console.log('audio pause');
});
audio.addEventListener('timeupdate', function (event) {
console.log('audio timeupdate');
const state = event.detail;
console.log(state.src); // 当前音频来源
console.log(state.title); // 当前音频标题
console.log(state.episode); // 当前专辑名称
console.log(state.singer); // 当前歌手名称
console.log(state.cover); // 当前专辑封面
console.log(state.playState); // 播放状态,'playing' | 'pause' | 'seeked'
console.log(state.paused); // 是否暂停
console.log(state.buffered); // 已缓冲位置,单位秒
console.log(state.currentTime); // 当前播放位置,单位秒
});
audio.addEventListener('error', function (event) {
console.log('audio error');
// 发生错误
const error = event.detail;
console.log(error.errMsg);
// 1. play:fail(调用play方法失败)
// 2. pause:fail(调用pause方法失败)
// 3. seek:fail(设置currentTime失败)
// 4. ratechange:fail(设置playbackRate失败)
});
});
wx.error((err) => {
console.log('wx error=', err);
});
// 微信版本不支持微信开放标签时的错误信息监听
document.addEventListener('WeixinOpenTagsError', (e) => {
// 无法使用开放标签的错误原因,需回退兼容。仅无法使用开发标签,JS-SDK其他功能不受影响
console.error('open tags error====', e.detail.errMsg);
this.isWXOpenTagAudio = false;
console.log('=======is wx open tag audio ===', this.isWXOpenTagAudio);
});
};
</script>
</body>
</html>