play event not triggered if autoplay set to true

[diygod]

play event not triggered if autoplay set to true

[DIYgod]

I could not recreate the problem.
Can you get play in the console of http://aplayer.js.org/

[Haocen]

There is a logical problem in my code, which will result in events listeners remove from elements not being displayed, I believe that caused the problem.

Update:
No, my unbinding the events didn't break the events, the problem is canplay being triggered after play, how weird.

Let me illustrate my problem a little:
I'm trying to create a floating music player on page.
When the music is not being played for a while, I would like it to disappear silently.
My first attempt is to check its status periodically by using playing event and make it disappear if this event not being triggered for a while but it caused performance problem.
Then I turn to play pause ended and error.
I make it visible upon play and disappear upon others.
The problem is play will not be triggered even when autoplay set to true thanks to mobile browser limitations.
They I decide to setTimeout(disappear(), 4000) when canplay then cancel the timeout if play triggered.
The experiment confirmed canplay will be triggered after play so I have to turn to mobile browser detecting now.

Another Update:
I achieved it by simulating mutex behavior in my code. Whoever try to make APlayer a floating item as I do should try to do it this way.
I'm pasting my code here for reference:

    var audioPlayerDisappearTimeOut = null;
    var audioPlayer = null;

    function activeAudioPlayer() {
        $('.audio').on("click", function() {
            if (audioPlayer !== null) {
                audioPlayer.pause();
            }
            var option = {
                element: document.getElementById("floatingAudioPlayer"), // Optional, player element
                narrow: true, // Optional, narrow style
                autoplay: true, // Optional, autoplay song(s), not supported by mobile browsers
                showlrc: 0, // Optional, show lrc, can be 0, 1, 2, see: ###With lrc
                mutex: true, // Optional, pause other players when this player playing
                theme: '#c44dff', // Optional, theme color, default: #b7daff #e6d0b2
                loop: false, // Optional, loop play music, default: true
                music: [{ // Required, music info, see: ###With playlist
                    title: "", // Required, music title $(this).data("title")
                    author: "", // Required, music author
                    url: $(this).data("href") // Required, music url
                }]
            }
            $('#floatingAudioPlayer').animate({
                height: "66px"
            }, 600);
            audioPlayer = new APlayer(option);
            /* Change the order of following lines will cause events failed to be triggered. */
            hide();
            audioPlayer.on("ended", function() {
                hide();
            });
            audioPlayer.on("pause", function() {
                hide();
            });
            audioPlayer.on("play", function() {
                show();
            });
            audioPlayer.on("error", function() {
                hide();
            });
            audioPlayer.init();
        });

        function show() {
            if (audioPlayerDisappearTimeOut !== null) {
                clearTimeout(audioPlayerDisappearTimeOut);
                audioPlayerDisappearTimeOut = null;
            } else {
                $('#floatingAudioPlayer').animate({
                    height: "66px"
                }, 600);
            }
        }

        function hide() {
            if (audioPlayerDisappearTimeOut === null) {
                console.log("will hide");
                audioPlayerDisappearTimeOut = setTimeout(function() {
                    if (audioPlayerDisappearTimeOut !== null) {
                        $('#floatingAudioPlayer').animate({
                            height: 0
                        }, 600);
                        audioPlayerDisappearTimeOut = null;
                    }
                }, 4000);
            }
        }
    };

These code will ensure following behavior:
On desktop:

1. When link to mp3 clicked the floating player will show itself and start playing.
2. Clicking on another link will pause current one.
3. If paused, ended or error, floating player will disappear after 4 seconds.
   On mobile:
4. When link to mp3 clicked the floating player will show itself and wait user to click on play, otherwise disappear after 4 seconds.
5. Clicking on another link will pause current one.
6. If paused, ended or error, floating player will disappear after 4 seconds.

Floating player will not disappear if music is playing.