1

Good day,

I'm currently building a website for myself (I'm a composer/producer), and I'm using Media Element for the main demo page. The page is under construction at the following link:

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

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

Below are what I think are the relevant functions and code:

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";
    }
}

All the CSS end of this seems to be fine. It finds the next song on the list and sets the new source; I've verified it does this properly via alert and other debugging. However, on the Android default browser and the Dolphin browser, it seems to not be able to load the mp3 sometimes, and prematurely triggers the "ended" event to go to the next song. The result is that it appears to skip 2-3 songs after one is done playing. And it takes some finagling even to get it to play one, clicking on the song divs and the player play button. I can type in the same url that's in the html, and the browser will play/download it just fine, no problems accessing or loading it.

Here are the 3 mp3 files that repeat down the playlist, for reference. They are by me, but are placeholders for the real music.

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

Note that all of this works properly on Chrome, Firefox, IE8+, and Android Chrome (I haven't tested iPhone or iPad yet).

Is my diagnosis correct? Can anyone point me in the right direction? Is there any experience where MediaElement doesn't work properly on the Android default and Dolphin browsers?

V. Rubinetti
  • 1,324
  • 13
  • 21
  • If it's a server or MediaElement anomaly, I'm fine with just letting it be. But if it's my code, I can't rest until it's right! But I can't conceivably see what's wrong with my code, though. Some workaround might be necessary due to the ad-hoc/piecemeal nature of web development. – V. Rubinetti Mar 18 '13 at 00:25

1 Answers1

2

I have the same problem in android (but with video...)

I was told that this is an issue with the file not being downloaded in time -- i.e. the browser starts the download, but since the file isn't downloaded it is 0:00 long, so the ended event is triggered.

If there is someway to make it so that the video / audio can be downloaded faster it solves the problem.

Strangely enough, if the device has good WiFi then this problem basically disappears.

See what John Dyer said about it here:

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

jbhorsewriter7
  • 21
  • 2