wx-open-audio安卓端监听不到ready事件
复现链接：http://test.kuailetingba.cn/?data=eyJvcGVuaWQiOiJvSzF6NDZzNlZBNFdiMm1MQmhZZnpkckFyLWlrIiwibW9kZWwiOiJhcnRpY2xlIn0=#
微信客户端版本：8.0.系列（15，16）
手机版本：安卓10，安卓11
测试用例页面：
<!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>
<!-- <wx-open-audio id="audioTag11" title="001 补天神石落仙山"-->
<!-- style="position:absolute;left: 50%;top: 200px;margin-left: -50px;width:100px;height:100px;background-color: darkblue;z-index:5002;"-->
<!-- src="http://qn.kuailetingba.cn/2021/03/03/a21258ae-3af9-4f0d-9177-d036b5332213.mp3">-->
<!-- </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);
});
// const audio1 = document.getElementById('audioTag11');
// if (audio1 != null) {
// audio1.addEventListener('ready', () => {
// console.log('audio1 ready');
// });
// audio1.addEventListener('play', () => {
// console.log('audio1 play');
// });
// audio1.addEventListener('pause', () => {
// console.log('audio1 pause');
// });
// }
};
</script>
</body>
</html>
