HTML5 Audio在点我达骑手APP新手引导中的应用

王孙娜

最近新做一个新手引导的需求,要求在页面上有语音播放的功能,并且根据语音来引导用户操作以及页面的自动切换。

虽然HTML5的audio标签很早就有了,而且各大浏览器的支持情况良好,但由于骑手app里的新手引导功能一直是native在做,我们移动端在这块的应用较少,故此抛砖引玉写一篇拙文,以记录此次开发中的各种思考以及遇到的点滴。

手机端与pc端不同,由于浏览器限制,手机端HTML5的audio无法自动播放,需要用户点击操作后才行,并且从截图上可以看到,ios端音频在页面加载时也是默认不加载的。

image

产品这边的需求是:用户在点击“我知道了”按钮后,即刻播放声音,并且页面跳转至第二页。考虑到用户网速问题,很可能出现的情况是:音频文件一直在加载,而导致页面已跳转至第二页,但没有声音播放。

看文档可知,audio有个非常牛逼的事件oncanplay,即在用户可以开始播放视频/音频(audio/video)时触发。

可惜的是,部分安卓机会在页面加载时就开始加载音频文件,可能在用户点击“我知道了”按钮之前,就已经触发了oncanplay事件。

所以,利用oncanplay并不能适配所有手机。

幸好,audio还有两个最重要的事件和属性:ontimeupdatecurrentTime

currentTime,就是设置或返回音频播放的当前位置,单位为秒。

返回 currentTime 属性:audioStart.currentTime

设置 currentTime 属性: audioStart.currentTime=seconds

利用这两个事件和属性,我们可以在用户点击后,加一个缓冲状态,保证了用户体验。

<audio id="start" src="./audio/audio.mp3" ontimeupdate="myAudio()"></audio>

function myAudio() {  
    audioStart.currentTime > 0 && $('#loading').hide();
}

$('.guide').click(function(event) {
    $('#loading').show();
    $('.guide').hide();
    document.getElementById('start').play(); // 声音播放
});

ontimeupdate还有一种触发方式:
document.getElementById('start').ontimeupdate

但在实践过程中,魅族MX4,4.2.2系统并不能触发此方法,所以安全起见,尽量使用第一种方式。

由于手机端浏览器对音频文件的各种限制,为了页面声音播放更加流畅,我们将所有的音频文件合成了一个,通过控制播放进度来进行相对页面的切换。

这里,依旧采用ontimeupdatecurrentTime

从截图上可知,currentTime不一定会恰好返回你某一段音频的结尾,所以,在合成音频时,每一段sprite中间都应该间隔几秒,以防暂停时已播放了另一段sprite的开头。

image

关键代码:

var audioData = [  
    { // 请点击按钮开始接单
        start: 0,
        end: 3,
    },
    { // 点我达正在为您派单
        start: 5,
        end: 8,
        name: 'dispatch',
        callBack: function() {
            // 播放完后执行
        }
    },
    ...
]
function myAudio() {  
    if (audioData[audioIdx] && audioStart.currentTime >= audioData[audioIdx].end) {
        audioStart.pause();
        audioData[audioIdx].callBack && audioData[audioIdx].callBack();
    }
}

至此,基本可以满足新手引导中的音频播放需求。

本次项目做的匆忙,加上本人才疏学浅,若有不足,望各位指正。