madzadev / audio-player Goto Github PK
View Code? Open in Web Editor NEW🎵 Music player with custom controls, playlist, filters, and search.
Home Page: https://audioplayer.madza.dev
🎵 Music player with custom controls, playlist, filters, and search.
Home Page: https://audioplayer.madza.dev
Dear maintainers, Greetings from CommandDash!
We're an AI tool that helps developers understand and build with open-source repositories.
There has been request to create an agent for this repository and it is ready to try here!.
Demo of an agent in action:
If this could be of help to other developers, you can mention it as a badge in your readme. Or, please close this issues if not.
<a href="https://app.commanddash.io/agent?github=https://github.com/madzadev/audio-player"><img src="https://img.shields.io/badge/AI-Code%20Gen-EB9FDA"></a>
Many thanks.
So In my use case, I'm passing I can pass one or more track, but if the track passed is one, is there a way for me to get the current time stamp of the audio in millisecond?
Currently using react >=17 in a project where I'm attempting to install audio-player. This library currently requires a peerDependency react version ^16.8
npm ERR! Found: [email protected] npm ERR! node_modules/react npm ERR! react@"^17.0.2" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^16.8.0" from @madzadev/[email protected] npm ERR! node_modules/@madzadev/audio-player npm ERR! @madzadev/audio-player@"*" from the root project
A possible fix is to specify a range of react versions to support:
"peerDependencies": { "react": "16 - 17" }
Do you have the version of VUE?
Hey,
So, i'm using Next.Js and i think i have it setup right, but i was a little confused on how to add the config stuff since i already had stuff in my config file to begin with.
But, when i try and start the dev server, this is the error i get
error - ./node_modules/@madzadev/audio-player/dist/loop_current~becmfmpq.png
TypeError: unsupported file type: undefined (file: undefined)
Not 100% sure what's going on here, but it's had me stumped for like a few hours lol
Hi @madzadev
I tried to install this packages in my TypeScript project. But I'm facing the error below at the moment:
Could not find a declaration file for module '@madzadev/audio-player'. '/Users/fvtrx/Documents/ProgrammingProject/syifa/node_modules/@madzadev/audio-player/dist/audio-player.js' implicitly has an 'any' type. Try npm i --save-dev @types/madzadev__audio-player if it exists or add a new declaration (.d.ts) file containing declare module '@madzadev/audio-player
Can help to provide the declaration file for module @madzadev/audio-player
?
Thanks.
Is this possible?
Hello!
Great player, one of the best I found. But there's some issues with the npm package, the icons and Next.js, so I digged into your code and tutorial in order to adapt to my website. BTW, is there a way to add a download button for the current playing track?
Also, a great improvment would be a typescript version :)
Uncaught runtime errors:
×
ERROR
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
instead of showing duration of the audio, what shows is the duration of the audio minus ten minutes. for example, screenshot below shows audio length of '1:34' but the actual audio length is '11:34' (eleven minutes and thirty four seconds). the audio not saved locally, it is in google cloud platform storage bucket.
am I implementing the audio-player incorrectly?
Hello Thank you for your player it is very helpful, I noticed in your code base you are automatically sorting track title alphabetically but if you want to sort the array yourself and control the order of the playlist, currently you are unable to do so
const Player = ({ trackList, includeTags = true, includeSearch = true, showPlaylist = true, autoPlayNextTrack = true, customColorScheme = colors, sortTracks = true, })
if you add sortTracks as a config and a user could pass in False
Then on line 203 of index.js
you can add
const sortCompare = (a, b) => { if (!sortTracks) return null return a.title > b.title ? 1 : -1; }
and on line 311
you can just use that fun
.sort(sortCompare)
If I put in a PR would you approve?
one of our users requested to slow down playback speed. some of the AI voices we use for generated guided meditations feel too fast. i think i can write this code, although i'm not skilled at coding.
thanks!
For projects created using Typescript unfortunately the Lib doesn't work, because it doesn't find equivalent types of the lib.
Can you please tell me how to install in Next 13?
And could you make documentation for Next.js with installation and setup separately playlist and player?
Hi Madza,
Very nice to e-meet you.
I'm currenty using your audio player app. Unfortunatly, I'm unable to jump to next song when I set "showPlaylist={false}". In addition, I'm come across with 'url=undefined'. Is there any solution you can share?
Thanks a lot in advance
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.