播放连续的声音，用HTML5和javascript构建一个音频句子

Question

我正试图为phonegap应用程序制作一个音频地图。我想用简单的句子来创造方向。

为了缩小范围，我有一组音频元素，我想连续播放这些元素来执行音频导航。例如：

// playList[0].play --> "You are coming from the"
// playList[1].play --> "Reptile House"
// playList[2].play --> "(half-second pause as sentence period...)"
// playlist[3].play --> "Please select a destination from the list on the left."

在这篇文章的底部是我一直在玩的简化代码，但没有取得多大成功。我总是犯错误。在建议使用jplayer或其他系统之前，在我看来，这些系统更适合播放能够阻止它们的歌曲。我不需要一个全面的jplayer或其他风格的界面。我只需要人们按下按钮，这样他们就可以通过音频地图系统进行引导。我在控制台上不断收到这个错误：

Uncaught TypeError: Object #selectionFrom has no method 'play' audio-map.js:142
(anonymous function) audio-map.js:142
jQuery.event.dispatch jquery-1.9.1.js:3074
jQuery.event.add.elemData.handle jquery-1.9.1.js:2750

我已经尝试将数组作为元素ID和变量。

var playList= ["#selectionFrom","#playReptileHouse","#play500msPause","#selectDestination"];
var playList= ["selectionFrom","playReptileHouse","play500msPause","selectDestination"];

如果有任何帮助，我将不胜感激。这是简化的脚本：

$(document).ready(function() {
    var playZooEntrance = document.createElement('audio');
    playZooEntrance.setAttribute('src', 'assets/audio/playZooEntrance.mp3');
    playZooEntrance.setAttribute('id', 'playZooEntrance');
    document.body.appendChild(playZooEntrance);
    var playReptileHouse = document.createElement('audio');
    playReptileHouse.setAttribute('src', 'assets/audio/playReptileHouse.mp3');
    playReptileHouse.setAttribute('id', 'playReptileHouse');
    document.body.appendChild(playReptileHouse);
    var selectionFrom = document.createElement('audio');
    selectionFrom.setAttribute('src', 'assets/audio/selectionFrom.mp3');
    selectionFrom.setAttribute('id', 'selectionFrom');
    document.body.appendChild(selectionFrom);
    var selectDestination = document.createElement('audio');
    selectDestination.setAttribute('src', 'assets/audio/selectDestination.mp3');
    selectDestination.setAttribute('id', 'selectDestination');
    document.body.appendChild(selectDestination);
    var play500msPause = document.createElement('audio');
    play500msPause.setAttribute('src', 'assets/audio/play500msPause.mp3');
    play500msPause.setAttribute('id', 'play500msPause');
    document.body.appendChild(play500msPause);
    $('#selected_from').click(function() {  // On the press of a button...
        var playList= ["selectionFrom","playReptileHouse","play500msPause","selectDestination"];
        var i;
        for (i = 0; i < playList.length; ++i) {
            console.log(playList[i]);
            playList[i].play();
            playList[i].setAttribute('ended',function(){/* next i??? */});
        }
    });
    // Play this consecutively...
    // playList[0].play --> "You're coming from the"
    // playList[1].play --> "Reptile House"
    // playList[2].play --> "(half-second pause)"
    // playlist[3].play --> "Please select a destination from the list on the left."
});

Answer 1

您似乎犯了一个类型错误：当您想要获得具有该id的元素时，您要求播放一个字符串（'SelectionFrom'）。
因此，您可以在创建元素时将其预存储在数组或对象中，或者使用jquery（$('#'+playList[i]）通过id查找它们。