Set start time of song on initialization

:point_right: Describe the problem

  • As a web developer, I would like to set the start time upon page load

:busts_in_silhouette: Problem evidence & reach

:smiling_face_with_three_hearts: Describe the “impact” on users?

  • This gives the developer a lot of control for the experience of their users

:trophy: How to solve this problem

Detail 1

  • A
  • B
  • C

:100: How do we validate the problem is solved?

  • [ ] As a developer, I should be able to set 2 min 38 secs to start the first song on the AmplitudeJS demo player

My use case for this - I am tracking and logging process to what has been listened to in a playlist (audiobooks / podcasts). When returning to the player at a later date, I wish for the user to start where they left off.

Thanks for posting on here @jacobraccuia!

That’s a very interesting use case.

@danpastori: I think Jacob’s feature use case is very interesting. Do you think we should track that as a separate feature? This is different from what we understood yesterday.

just to clarify - I have all of that data stored in my database, I don’t want the player to store any of that data in cookies or local, I just want the Plyr to start where I tell it to, without having to load the track multiples times or at 00:00 and then 90 seconds in. (which I believe it’s currently doing)

Oh nice! Thanks for clarifying.

I think we should be good keeping this to one feature. @danpastori will know better than me :grinning:

Dan: Feel free to chime in and let me know what you think is best.

Hi @jacobraccuia,

Love the idea! This is definitely one feature with a few parts to it.

What I’m thinking is we add a timestamp that we set along with the starting song. There are two approaches I’m bouncing around in my head to make this work from a configuration perspective.

Adding A Config Variable

To initialize the start song time stamp on Amplitude.init() like so:

Amplitude.init({
start_song: '',
start_time: 'timestamp_in_seconds',
});

This way when you initialize AmplitudeJS it will jump to the time in the start song in seconds.

Make Start Object

Instead of having two separate variables, we could do it as one object so we can expand this in the future. I’m thinking maybe something like:

Amplitude.init({
    start: {
       song: '',
       time: '',
       playlist: '',
       ...
    }
});

This would be easy to expand if other initialization measures that aren’t covered for. Just a though. If you can think of any other start scenarios besides what we discussed, I’d recommend going with this route so we don’t flood the config.

How this would work

Mainly for me as I think about this, but we’d have to override the preload so we don’t have it loading twice. What this would do is if there’s a start song & start time, we’d initialize the start song on the audio object, then set the time, but set preload to none so it doesn’t start loading right away and we end up with a double load.

If there are any other thoughts on this feature, let me know and we can plan out the implementation.

I think an object is the right choice - as you said, more scalability in the future. The only other thing I have to also initialize is playback speed, as I want users to have it play at the speed they select, when they return in the future.

I also admit one of the more confusing aspects of this JS to me is anything involving plugins (I don’t want to get off topic but I can expand on my confusion if you want).

Thanks so much for the quick replies here!

I agree with the option of making the start configuration an object. I think that’s the approach we will take.

With playback speed, we’ve accounted for here: https://521dimensions.com/open-source/amplitudejs/docs/configuration/playback-speed.html. You can set that on initialization which you could set from your user preferences in the database. I am thinking about scoping that into the start initialization object along with the starting_playlist.

As for plugins, I’d really love to hear your thoughts! Plugins are something that is definitely needed for AmplitudeJS. You can do it to a point by combining all of the public methods and you can do it for making Web Audio API visualizations: https://521dimensions.com/open-source/amplitudejs/docs/fx/visualizations.html#build-your-own-visualization.

If you want to open a thread and share your ideas, it’d be much appreciated :innocent:! We are discussing the future of AmplitudeJS with a 6.0 release in early discussion. Besides fixing the immediate bugs in 5.3: https://github.com/521dimensions/amplitudejs/projects/16 we will be looking at the next level of the project soon.

This is great!

@danpastori: Maybe we should start using the first post to summarize all of the details for the feature?

I added some hip emojis :man_dancing::dancer:

I also added:

  • A section where you can add details and the bullet points underneath
  • A section for “validating” the problem is solved by creating concrete use cases of what “done” looks like

Feel free to edit my post and summarize what needs to be done. See screenshot below for reference and let me know if you have any quesitons.

I made a serious typo in my previous post, and wrote plugins instead of playlists. I find playlists, involving the settings // data-handlers that connect to html elements to be confusing. I don’t need them for my project though so it’s not an important request or complaint or anything on my end.

Ahh gotcha! I’ll take a look at seeing where I can clarify the docs a little more. Thanks!

Hello boys

Any news on this feature (or bugfix) ?

Hey @ErnadoO,

We’ve been busy with client projects and haven’t had the time. If you want to submit a PR or sponsor the feature, we’d be glad to take a look!

Otherwise we’ll take a look into it as soon as we can! :sweat_smile:

Hello @jaydrogers

I think i found in dist/amplitude.js why start_song parameter is ignored (the original github issue), but i don’t know wich files need to be edited for a proper PR; i am more comfortable with php PR than js projects :sweat_smile:

No worries, I don’t understand JavaScript at all :rofl: I am a server guy and a designer hahaha.

If you think it is something that is more of a bug than a feature, I would open a bug on Github and use the links from Github files to explain where you think the issue is.

Any help we can give @danpastori will only make it easier for him to take a look at it :grinning:

Hi @ErnadoO ,

Which version of AmplitudeJS are you using? And are you having issues with setting the start song itself or the start time of the start song?

If you have more information, you could just link to the line number of the dist in the github repo and I can take a look from there!

Hi @jaydrogers, Hi @danpastori

I use v5.3.1 and my problem if with start_song parameter itself. My problem is most related with the original github issue than this topic.

Quick exemple:

             let init_conf = {
                "continue_next": false,
                "preload": "metadata",
                "songs": finalPlaylist,
                "start_song": 1,
                "callbacks": {
                    "initialized": function() {
                       ...
                    },
                    "ended": () => {
                        let nextEpisode = document.querySelector("[data-index='"+(Amplitude.getActiveIndex() + 1) +"']");
                        if (nextEpisode != null) {
                            let url = nextEpisode.querySelector('a.play').href;
                            if (url != null) {
                                window.open(url, '_self');
                            }
                        }
                    }
                }
            };
            Amplitude.init(init_conf);

As you can see with “ended” event, i want to load a specific url for each song (SEO…), so if i a am on the 2nd audio page, i want to set player on the 2nd media (index 1).

finalPlaylist is an array of 4 songs, but, even with “start_song”: 1, it will play song index 0 on each page.

The reason is the condition in amplitude.js: amplitudejs/amplitude.js at 745583f1361a93fce1cd298d7fc86915cc1f20ac · serversideup/amplitudejs · GitHub

without the starting_playlist parameter, start_song has no effect, while starting_playlist is useless here. If i use a custom amplitude.js without the starting_playlist test, start_song works as espected.

For moment, the workaround is to call Amplitude.playSongAtIndex(1) in initialized callback, but it’s not a good solution:

  1. When player is displayed, i see the first song metatada, then, few seconds later, the player display the right metadata, this is not a good user experience.
  2. playSongAtIndex trigger song_change event, and this is irrelevent in this use case

Thanks :slight_smile:

Thanks @ErnadoO for the heads up! You were right, the start_song required a starting_playlist. I probably missed a ! in there because we actually don’t want a starting_playlist when checking the start_song.

I pushed the fix and the new version is 5.3.2: Release v5.3.2 · serversideup/amplitudejs · GitHub.

Let me know how that works for you!

Hi @danpastori

It works like a charm; thanks ! :slight_smile:

1 Like

Awesome! Glad it worked!