Jump to content

html5 master audio player controlled by separate play buttons


CaptWeirdBeard
 Share

Recommended Posts

Hi I wasn't sure exactly how to ask this so I made up a couple of mock-up pictures to help.

I am making an audio website and currently I have each song in an html file being called into a list. they each have their own audio player. Works fine, but is a bit cluttered with many players on screen when the list is large.

current.jpg

I would really like to have a master audio player in the header and each song in the list has just a play button when clicked will play the song in the main audio player at the top as shown below.I will have the main player at the top in a sticky/floating header so it remains on top and is always visible when scrolling.

want.jpg

I hope this makes sense. Any help or guidance/tutorial links on how I can adjust things to achieve this would be greatly appreciated. Thanks

Link to comment
Share on other sites

You can have Javascript create a set of audio elements and attach the one currently being used. You can have it so that when a button is clicked all the audio elements stop playback before it changes the elements.

Here's an introduction to controlling audio with Javascript.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Controlling_media_playback

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...