H5页面使用一个audio标签获取不同的url对应的音频长度,怎么实现

miss_all 发布于 2016/05/26 15:24
阅读 2K+
收藏 0

如题:微信项目中收到微信端推送过来的amr格式的音频文件,转码为MP3

之后,需要在自己的页面上展示,并且播放,使用了HTML的audio标签;

实现方式是:

定义了一个全局的audio标签,每次需要播放的时候,就将语音的url传入audio标签中进行播放;

目前遇到的问题是,页面加载的时候,我想在页面展示语音消息对应的音频长度,我每次传入url到audio中的时候,手动触发load事件,然后在onloadedmetadata回调中获取元数据的时候,只能获取到最后一个传入的url对应的音频长度,其他的都取不到;代码如下

function showVoiceLength(voiceurl){
   
    var voicePath = "http://localhost:10080/xxxxx/libai.mp3"; //音频路径url
    var voice = $('#voice')[0];          //获取到audio标签对象
    voice.src = voicePath;                //将音频和audio进行关联
    voice.load();                            //加载音频
    voice.onloadedmetadata=function(){        //音频元数据加载完成之后的回调 音频/视频的元数据包括:时长、尺寸(仅视频)以及文本轨道。
        console.log(<><><><><><><><><><><><><>"+voice.duration);
    }
}

加载中
0
x
xdsnet_g
你最好在转码的时候获取长度来展示。 audio的持续时间属性是随加载情况变化的,除非是加载完成了。
返回顶部
顶部