Custom Audio Player with Web Component and Web Audio API

How do you solve audio player needs of your projects now?

Would like to see the same implementation in a specific UI library or framework?

- react
- angular
- vue
- svelte
- web components
- other

I am now struggling with the streaming, because i am serving the audio from a proxy and i get hundreds of calls when you start playing with the progress bar, is there a simple way to limit the calls? may be if the progress bar has less positions? thanks a lot!

Cool, but now I don’t know why any of this works.

This one saved me hours of try and error. Thanks Mate

Thanks for your video. The player works nicely, but I found a little bug and don't know how to fix it. (maybe that's my problem, not yours)
On my main page, some players play a particular song. Then, I visit another one using <a href="....html">...</a> and then go back to the main page in the same way. As soon as I visit the main page, all audio players start playing all together and there is a huge chaos. I hope You can help me, thanks!

Hello, how do you think we can make this work on ios devices and safari because there is no support for the webkit-slider-thumb ?

Neat.. (BUT) I am stumped .. No Audio when I click <play> (yes I have the sample mp3 named "audio2.mp3" .. Progress Bar moves forward.. (But no Sound or spectrum) ?? any Idea WHY ??

thank you so much for this work, please tell me how to make sure that when playing another track on the page, the first one is paused

geezeus way above my head tbh

Thanks for the tutorial. The source code works perfectly in Safari after adding an audio file. Chrome however doesn't have a good luck. The duration and time value works well but the actual sound doesn't play. Does anyone have a clue?

How autoplay code?

Looking to spice up the Google site audio player.

having issue with: MediaElementAudioSource outputs zeroes due to CORS access restrictions for FILE...

Is there a way to capture a webcams audio and put into a html or css, script for a webpage. I have been trying to find a way to install my cams audio while I am in a live video session to my webpage but have not found any scripts showing how to do this? I also like to see if I can put a listen live to my show button when clicked it goes into the webpage and show a player for my live broadcast. is there a way to do this??

About 400 lines of JS and 25 lines of HTML. Simplicity in mind, my brain is fried with all of the algorithms lmaoo I need to learn more before taking on this much without a reference.

great work, I really like it

Please multitrack player for web

Hi everyone, can you help me ? How can I make the sound bars with rounded corner like bar-radius: 5 (or something like this)

Hello!
Thanks for yout great explainer.
Can I ask?
How to make to playe only one track in same time, when on the page plased several audio players?
Thanks!