移动端解决IOS微信下audio时长不显示

如下图所示,在Android手机微信中打开是显示时长的,但在IOS手机上打开不显示:在这里插入图片描述

解决方案:

微信环境和IOS环境

	// 微信
    is_wxBrowser: function () {
        return /micromessenger/.test(navigator.userAgent.toLowerCase());
    },
    //IOS
    is_iOS: function () {
        return /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent);
    },
通过 WeixinJSBridgeReady 和 替换audio标签来实现

1.创建audio元素添加到bogy中,判断是否是微信环境并且在IOS下,是的话动态添加adudio,监听 WeixinJSBridgeReady事件,播放暂停audio获取时长。

		 if (tools.is_wxBrowser() && tools.is_iOS()){
                $("body").append(``)
                document.addEventListener("WeixinJSBridgeReady", function () {
                    $("#myAudio")[0].play()
                    setTimeout(function () {
                        $("#myAudio")[0].pause()
                    }, 50)
                }, false);
            }

2.将后台获取的audio替换成动态添加的audio

		if (tools.is_wxBrowser() && tools.is_iOS()){
                if ($('.article_word audio').length==1) {
                    var id=new Date().getTime();
                    $(".article_word audio").attr('id',id);
                    $("#myAudio").attr("src",$(".article_word audio").attr("src"))
                    $(".article_word audio").before($("#myAudio"));
                    $("#myAudio").show();
                    $("#"+id).remove();
                    $("#myAudio")[0].play()
                    setTimeout(function(){
                        $("#myAudio")[0].pause()
                    },50);
                }
            }

你可能感兴趣的:(audio,移动端)