2

単語リストを再生したい。各単語は、3 つの異なる方言でその単語の音声録音によって表されます。3 つのオーディオ ファイルはすべて、単語ごとに同時に再生を開始する必要があります。以下のコードはほとんどの場合機能しますが、特定の単語に対して 3 つのオーディオ ファイルが同期せずに再生されることがあります。これはなぜですか、どうすれば修正できますか?

更新: 問題は、オーディオを取得して、クライアントのマシンの何らかのキャッシュに保存する必要があることだと思います。少なくとも、新しい単語がプレイリストに追加されたときに問題がより一般的であることに気付いたので、これが私の結論です。プレイを開始する前に、すべての単語のすべてのオーディオをキャッシュできますか?

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Player</title>

<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){

var _dialects = ["c","m","u"];

var _playlist = 
[
    "ta_x", 
    "me_x", 
    "ag",
    "rith",
    "agus",
    "ag",
    "ceol",
];

var _players = new Array(); 
for (var i=0;i<_dialects.length;i++)
{
    _players[i] = document.getElementById("audio_player_"+(i+1));
}

var _number_of_available_players = _dialects.length;
var _playlist_index = 0;

var _play_button = document.getElementById("play_button");

function play()
{
    _playlist_index = 0;
    _play_button.disabled  = true;
    next();
}

function next()
{
    if(_number_of_available_players == _dialects.length)
    {
        if(_playlist_index < _playlist.length)
        {
            for (var i=0;i<_players.length;i++)
            {
                if (_players[i].canPlayType('audio/mpeg;')) 
                {
                    _players[i].src = "http://www.focloir.ie/media/ei/sounds/" + _playlist[_playlist_index] + "_"+_dialects[i]+".mp3";
                }
                else
                {
                    _players[i].src = "http://www.focloir.ie/media/ei/sounds_ogg/" + _playlist[_playlist_index] + "_"+_dialects[i]+".ogg";
                }
                _players[i].play();
            }
            _playlist_index = _playlist_index + 1;
            _number_of_available_players = 0;
        }
        else
        {
            _play_button.disabled  = false;
        }
    }
}

function end()
{
    _number_of_available_players = _number_of_available_players + 1
    next();
}

for (var i=0;i<_players.length;i++)
{
    _players[i].addEventListener('ended', end);
}
_play_button.addEventListener('click', play);

}//]]>  

</script>
</head>

<body>
    <audio id = "audio_player_1"></audio>
    <audio id = "audio_player_2"></audio>
    <audio id = "audio_player_3"></audio>
    <button id = "play_button">Play</button>
</body>
</html>
4

0 に答える 0