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!