Refactor Single Song example to use init and .playNow()

tacman commented 4 years ago

Please consider replacing the code for Single Song Player example with code that uses .playNow(), which is a better way of understanding how to simply play one song without a playlist. The code now initializes a songList of one song, but playNow, which in theory is the easiest of all example, is a bit hard to understand.

In particular, .Init() requires a songs element. But I'm managing my playlist outside of Amplitude, I simply want to initialize Amplitude once, then control which songs are being played by calling

Amplitude.playNow({url: '/audio/my.mpg'});

The real issue is that when I play the song, I'm getting the message

AbortError: The fetching process for the media resource was aborted by the user agent at the user's request.

I'm pretty sure this issue has something to do with .Init with no songs and then .playNow().

I guess I could re-initialize Amplitude each time with a one-song playlist, but that does not feel right at all. I'm also hiding/showing elements a lot (hiding the audio element when the song list is displayed, for example), so maybe my issue is related to that, but can't tell.

I'll try to put together a simple case, but I was hoping you could also provide a simple case in the example scripts.

Thanks.

fzngagan commented 4 years ago

Just wondering, when you initialize with an empty songs array, does Amplitude.addSong make any difference?

tacman commented 4 years ago

I haven't tried that with the latest version, but I had problems with doing that before. I ended up having a fake song when initializing it. I ended up going with another player for single audio tracks, and only using Amplitude when I had multiple tracks.

On Tue, Jun 30, 2020 at 1:19 AM Faizaan Gagan notifications@github.com wrote:

Just wondering, when you initialize with an empty songs array, does Amplitude.addSong make any difference?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/521dimensions/amplitudejs/issues/408#issuecomment-651543573, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEXIQJVAGTFNO63JAPY27DRZFYUXANCNFSM4KOTY7JQ .

danpastori commented 4 years ago

So I started working on this and ran into a few questions. Some of which I need some advice on how you plan on using it and how I can build it in a way where we can maintain it and be flexible.

Here's what I understand

Goals

Ability to initialize AmplitudeJS without songs or playlists
Use the AmplitudeJS public functions to play audio (Amplitude.playNow(), Amplitude.stop(), Amplitude.pause(), etc).
Use the dynamic display features of AmplitudeJS to display the current meta data for the song run through Amplitude.playNow() (ie: The data-amplitude-song-info="name" gets populated through the now playing).

Options

Making a `minimal`

This would allow you to initialize AmplitudeJS like this:

Amplitude.init({
    minimal: true
});

From there, we'd only set up the UI elements, callbacks, etc and you could use AmplitudeJS the same way.

Making "play now" elements

You wouldn't even have to initialize AmplitudeJS. You'd just have to bind the AmplitudeJS functionality to whatever element you want. For example, an element with ID #my-play-button would call Amplitude.playNow(). With this approach, you'd have to bind all of your custom elements to AmplitudeJS functions.

Let me know if I'm the right path and following the same thought process as your use case.

fzngagan commented 4 years ago

Thanks for taking this step @danpastori I was wondering, is it worth having two ways to initialize Amplitude. IMHO, if it was possible to make Amplitude.init call optional, that would be the best. I've been having issues with my discourse integration in the case where I don't know whether I have a song to initialize with. I've been getting around with building a lazy initializer which initializes it only when it hasn't been already initialized and we have some songs.

stubar commented 3 years ago

I've just been struggling with playNow as well. I was initializing without a songs property. Although it plays the progress bar doesn't update. So I am now trying a lazy init approach like @fzngagan it works but every time I play a new song, the song progress bar in the ui isn't updated.

Maybe an update on the playNow() documentation is required before a decision on how to handle songless initialization.

EDIT: I've fixed it by doing a check

        if (this.inited) {
          window.Amplitude.stop()
        }

Now the play is get's a bit out of sync but that's not the end of the world for me right now.

serversideup / amplitudejs