Menu icon Foundation
Audio Player

Hey Everyone, I'm trying to create an audio player for my site. I've designed it (above), but I'm not a coding master but I've built my own site using Foundation: 


http://damicoa27.pancakeapps.com/

and I'd like to create a page where I can upload my music.

My goals: 

- Have the tape spin when a track is being played 
- Drop shadow on track (on hover and when playing)

Stretch goals:

- Music plays while on other pages on the site

I would appreciate the help if anyone knows how to make this happen or could steer me in the right direction. The design is important to me so I'm not trying to use a sound cloud plug in or a third party aggregator. 

audio

Hey Everyone, I'm trying to create an audio player for my site. I've designed it (above), but I'm not a coding master but I've built my own site using Foundation: 


http://damicoa27.pancakeapps.com/

and I'd like to create a page where I can upload my music.

My goals: 

- Have the tape spin when a track is being played 
- Drop shadow on track (on hover and when playing)

Stretch goals:

- Music plays while on other pages on the site

I would appreciate the help if anyone knows how to make this happen or could steer me in the right direction. The design is important to me so I'm not trying to use a sound cloud plug in or a third party aggregator. 

Rafi Benkual 2 months ago

That's a cool thing to build. I haven't played with Audio Myself but I'd imagine there are events you can use to see if it's playing or not playing to start and stop the animation. I think this is it: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

Have you looked on codepen for some ideas? Lots of audio examples there:

http://codepen.io/search/pens?q=audio&limit=all&type=type-pens