收藏
回答

wx-open-audio 开发工具和ios均正常,但安卓ready事件调用为什么没有反应?

wx-open-audio 开发工具和ios均正常,安卓ready事件调用没有反应

微信版本:8.0系列(7,8,10,15,16等)

安卓版本:安卓10,安卓11等

手机型号:华为,oppo,小米等安卓手机

测试链接:http://test.kuailetingba.cn/?data=eyJvcGVuaWQiOiJvSzF6NDZzNlZBNFdiMm1MQmhZZnpkckFyLWlrIiwibW9kZWwiOiJhcnRpY2xlIn0=#

测试代码:<!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>


回答关注问题邀请回答
收藏

1 个回答

  • 6
    6
    2022-02-01

    请问 解决了吗?

    2022-02-01
    有用
    回复
登录 后发表内容