android默认浏览器和海豚浏览器加载mp3问题

Question

大家好，

我目前正在为自己建立一个网站(我是一个作曲家/制作人)，我正在使用媒体元素的主要演示页面。网页正在建设中，链接如下:

http://www.vincentrubinetti.com/listen.html

http://www.vincentrubinetti.com/listen.js

下面是我认为相关的函数和代码:

function initPlayer()
{
    player = new MediaElementPlayer('#listen_player',{
        success: function (mediaElement, domObject) 
        { 
            mediaElement.addEventListener('play', resumeSong, false);
            mediaElement.addEventListener('ended', playNextSong, false);
            mediaElement.addEventListener('pause', pauseSong, false);
        }
    });
    [omitted]
}
function setSong(element)
{
    if (element != "")
    {
        unselectAllSongs();
        document.getElementById(element).className = "listen_song_highlight";
        [omitted]
        var newSrc = document.querySelector("#"+element+" .listen_song_source").title;
        player.pause();
        player.setSrc(newSrc);
        player.load();
    }
}
function playSong(element)
{
    document.querySelector("#"+element+" .listen_song_status").innerHTML = "playing";
    player.play();
}
function playNextSong()
{
    var newSong = document.querySelector(".listen_song_highlight + div.listen_song");
    if (autoplay && newSong != null)
    {
        setSong(newSong.id);
        playSong(newSong.id);
    }
    else
    {
        document.querySelector(".listen_song_highlight .listen_song_status").innerHTML = "stopped";
    }
}

所有的CSS结束这似乎是好的。它在列表中找到下一首歌曲并设置新来源;我已经通过警报和其他调试验证了它正确地做到了这一点。然而，在Android默认浏览器和Dolphin浏览器上，有时似乎无法加载mp3，并且过早地触发"ended"事件以转到下一首歌曲。结果是，它似乎跳过2-3首歌曲后，完成播放。甚至要让它播放一个都需要一些技巧，点击歌曲div和播放器播放按钮。我可以在html中输入相同的url，浏览器会很好地播放/下载它，访问或加载它没有问题。

这里是重复播放列表的3个mp3文件，供参考。它们是我写的，但是是真正音乐的占位符。

NEW/music/creation.mp3
NEW/music/startup.mp3
NEW/music/win.mp3

请注意，所有这些都可以在Chrome, Firefox, IE8+和Android Chrome上正常工作(我还没有测试iPhone或iPad)。

我的诊断正确吗?有人能给我指个方向吗?是否有任何经验，其中MediaElement不能正常工作在Android默认和海豚浏览器?

Answer 1

我在android上也有同样的问题(但是有视频…)

我被告知这是一个文件没有被及时下载的问题——即浏览器开始下载，但由于文件没有下载，所以它是0:00长，所以结束事件被触发。

如果有某种方法可以使视频/音频下载得更快，那么问题就解决了。

奇怪的是，如果设备有良好的WiFi，那么这个问题基本上就消失了。

看看John Dyer是怎么说的:

https://github.com/johndyer/mediaelement/issues/543