展厅场景中带语音解说的自动巡航导览

前段时间写了一个项目，大致需求为：在一个展厅内固定路线自动巡航导览，每个点有响应解说，解说完有弹窗提示选择继续巡航导览或是查看此点内容详情。

1、写一个用于循环的列表，里面放入需要的内容

var autoList = [
    {
        cameraPosition: [0, 5, 65],   //相机位置
        explainAudio: './medias/explain/start.mp3',  //介绍语音
        peopleObj: [14,-15.5,19],  //解说员位置
        peopleRotate: '',   //解说员占位方向
        detailAudio: './medias/detail/start.mp3',  //查看详情时播放的语音路径
        pageHref: './pages/detail1.html',   //详情页面
    },
    {
        ...
    }
]

2、执行循环事件

var numAuto = 0
function loadAudio(){
        var item = autoList[numAuto]
   player.position.set(item.cameraPosition[0], item.cameraPosition[1], item.cameraPosition[2])
        if(item.peopleObj){
            peopleObj.position.set(item.peopleObj[0],item.peopleObj[1],item.peopleObj[2])
        }
        if(item.peopleRotate){
            peopleObj.rotateY(item.peopleRotate)
        }
        // 语音播放
        audioPlay(item.explainAudio)
        //监听语音播放完毕     
        $('#explain')[0].addEventListener('ended', audioListener);

}
function audioListener(){
        var item = autoList[numAuto]
        if(numAuto>0){
            $('.go-detail-pop').show()
        }else{
            numAuto++;
            loadAudio()
        }
}  

3、语音播放事件

// 语音播放
function audioPlay(url){
    $('#explain').attr('src',url)
    $('#explain')[0].play()
    $('#explain')[0].addEventListener('ended', function(){
        $('.audio').addClass('audio-stop')
    },false);
    $('.audio').removeClass('audio-stop')
}

4、跳过，继续

// 点击弹窗跳过按钮，继续巡航 
$('.btn-skip').on(changeClick,function(){
        $('.go-detail-pop').hide();    // 提示弹窗隐藏  
        numAuto++;
        if(numAuto < autoList.length){
            loadAudio()
        }
        if(numAuto >= autoList.length){
            numAuto = 0
            
        }
})

到这里所有功能已经完成，其他交互细节可根据需要自行完善。

其他关于音频audio属性及监听事件，请查看：视频video音频audio属性及监听事件_video监听事件_我的2009的博客-CSDN博客