Html 同步音频文件的播放_Html_Html5 Audio

Html 同步音频文件的播放

html

Html 同步音频文件的播放,html,html5-audio,Html,Html5 Audio,我想播放一组单词。每个单词都用三种不同方言的录音来表示。对于每个单词，所有三个音频文件应同时开始播放。下面的代码大部分时间都能正常工作，但有时这三个音频文件会对给定的单词不同步播放。这是为什么？我如何修复它更新：我认为问题在于音频必须被提取并存储在客户机的某种缓存中。这是我的结论，至少因为我注意到在播放列表中添加新词时问题更普遍。我可以在开始播放之前缓存所有单词的所有音频吗 <!DOCTYPE html> <html> <head> <meta

我想播放一组单词。每个单词都用三种不同方言的录音来表示。对于每个单词，所有三个音频文件应同时开始播放。下面的代码大部分时间都能正常工作，但有时这三个音频文件会对给定的单词不同步播放。这是为什么？我如何修复它

更新： 我认为问题在于音频必须被提取并存储在客户机的某种缓存中。这是我的结论，至少因为我注意到在播放列表中添加新词时问题更普遍。我可以在开始播放之前缓存所有单词的所有音频吗

<!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>


玩家
//  
玩