Dear Amy, thank you very much for your wonderful tutorial! I truly excited to see how the series continues! :D I followed the tutorial and everythings works for me but the duration read out. After following your 49:29 step I still get sometimes "NaN" when I reload the page, and once I start playing the audio it updates itself. I noticed that around 55:07 of this video you also encountered this error, but then it dissappears. Do you maybe have an idea of why it happens? Thank you again for your channel and the podcast! :D
Angela // Good catch! -- and sorry for the confusion. I'll pin your comment and address this in an upcoming video in this series, but there's actually a built-in event listener that you can hook into instead of using a useEffect. It's called onLoadedMetadata. So, within the audio component, you might say: -- meaning it calls the onLoadedMetadata function once the metadata is loaded. I'm actually using this method on the Compressed.fm site. You can check out the source code here (direct link to the actual audio player component): github.com/ahaywood/compressedfm/blob/master/nextjs/src/modules/shared/components/AudioPlayer/WaveformPlayer.js#L48 Let me know if you continue to run into issues.
@@angelap.8160 Hey Angela , I've been facing same error, can you help me solve it? It says onLoadedMetadata function is not available. I am not sure , do I have to replace useEffect with the onLoadedMetaData function , or to create a new function. I tried both , but neither worked. Do u remember the solution?
this is the best tutorial I've ever seen! just a small issue I found, at 1:01:47 on line 62 you should put the -30 outside the parenthesis, because it can cause bugs (converting to number only after adding them together as string).
On the last line i changed my forwardThirty function to // progressBar.current.value = Number(progressBar.current.value + 30); progressBar.current.value = Number(progressBar.current.value) + 30; I found for me it was appending the number instead of numerically adding them. Great tutorial though Amy thanks so much! I enjoyed following along and I used it in one of my projects :D
Good catch! In a follow up video on debugging (ruclips.net/video/64n-M6W0qKE/видео.html), I realized the code should have been: Number(progressBar.current.value) + 30; -- You want to cast the progressBar.current.value to a number before adding 30.
@@SelfTeachMe I just realised that earlier today :O I watched your debugging video and was kicking myself. Now I know how to isolate bugs like a pro! Thanks again!
hahahahah. i'm laughing because i catch the same problem and i'm reading every comment to find someone who catch the same. Thank you man to ask and Thank you Self Teach Me, i'm learn to create this audioplay to use in a project i have with my wife to get our shortcut spotify audio and show in your webpage whitout spotify . In the future i would like to writing to for peoples chose if they want read ou listen. Thank you!
The thing that I loved the most is that this is not just a tutorial to reach from A to B, but also includes the reason behind why things work the way they do. Thanks for this.
I've been using React for a few years and coding for a long time.....this was such a delightful and well explained video, and really helped me out on a project. Thank you.
Thanks Amy! I really enjoy your teaching style and loved this episode. You deserve a lot of credit for the work you put in and I appreciate the effort and the value you give.
Amazing! This was exactly what I was looking for without knowing this is what I was looking for.. I've explored many articles, repos, videos, and no longer need to continue my search. Well worth the hour. Thank you!
Hi Amy! I'm happy to have found you! I was just looking for how to create a streaming player and I found a gold mine!! I am in love with the easy, practical, fun and calm way that you have to explain, it is a little more difficult for me because I am from Argentina and I do not speak English; (By the way, the 4 inches from the bottom are covered by the subtitle, if you can coding from above it would be a great relief!!). Thanks for your videos!! I hope one day to be as good as you!😙
Hi Amy, thank you for this awesome tutorial. I used your video to implement a custom audio player and had no clue how to do it till I saw your tutorial. Thanks again!!
This is a great tutorial! I've not worked much with audio in the browser before but I've used a lot of video components. I'll for sure be referring to this in the future for *media* related projects & even the approach to various aspects of code design! PS: I converted this to styled-components on the fly and it works perfectly! You now have a new subscriber :D
Building a sticky React audio player which continues to play when switching between pages on a site if anyone wants to help out. Thanks for this power tut Amy! subbed
Thanks again for this great code. I am now using it in my project after customizing the appearance a bit. Actually, I was also able to use almost exactly the same code and css to build a simple video player too with the same look and feel. It looks like the principles for the video are almost identical.
I find it's easier to learn to code if I re-write examples like this video from scratch on my own after watching it, rather than writing from memory or copying blocks trying to produce it from nothing. I find that by only using known-good code when I get stumped as a reference, and taking the time to muddle through on my own, that's the best education one can get in this field. Because that way you know how to do many variations, not just one example. It's much slower, but you'll remember it forever
@@SelfTeachMe I just saw it again ... Yup still helpful! I just found my first job as a Web Developer thanks to you and all of this amazing community! Kudos!
So awesome... thank you very much. I had a good amount of knowledge but am self taught on Reactjs (even though I've been a developer for many years) and you really filled in some major gaps for me!! Did you say you were going to do one with visualization? Also, I would love to apply but it doesn't look like you guys hire older people, especially a female older developer :( Its been very hard to find work as I still have a good decade before retiring but if you're not young... one gets overlooked a TON. You say your people encourage side projects but do they encourage well rounded experienced older developers?
Thanks for this video, it helped me a bit in doing a music player challenge. Animating the progress bar didn't work very well because the method you showed was very memory have and even had a memory leak somehow, though 🤔Not sure why, but I changed the method to update the currentTime with a setInterval. It worked like a charm haha!
what is the font style, or the general style of your visual studio code? i want mine to look like that but idk how to get it like yours btw I love your videos!!
play /pause built in function not working for me. the method is not found or something. when i type them in they become underlined and im asked to create this method. using react app
Thanks for the video. I have built something similar for a website I'm making and it works fine on firefox but the part behind the knobby/thumb does not get styled in chrome based browsers. Do you know a solution to this
i was able to solve the problem of the message that I had brought to you but it turns out that I would like to know, if with this functionality it is possible to play several different audio? case I am confronted with this problem I cannot play several audios case when I launch an audio the two mp3s which I have on my web page play the same song without although I have to click on the second
Great Tutorial! Thank you :)) My only feedback for future videos is to keep the code for longer in sight while you are talking about the next step. I had to pause the video too much to follow along.
Hi Amy. great video. i have been trying to find a good React video on the audio player and i am glad i found yours. i am following along and the design is coming along great. I am having issues though... trying to get the audio stream to play - (1) i am getting CORB errors and (2) when I try to use the '.play()' function I am getting an error: TypeError: Cannot read property of undefined (reading 'play'). I am setting up the play options just as you coded it: I am using the 'useRef' hook for - audioPlayer, and I am setting up the pause-play as such: { isPlaying ? : } if (isPlaying) { audioPlayer.current.play() } else ... The error comes at the play() function, after 'current'. It is not recognised. I know that play() is a part of HTML, but not sure why I am getting the error.
Hey Amy! Really thankful to you for this video. But I am stuck with duration coming as Nan in the beginning and setting the duration automatically after clicking on the play. I tried the below-pinned comment of OnLoadedMetaData and removed the useEffect as suggested But then it shows 0 as duration and it doesn't even change after you have clicked the play. Do you by any chance know the reason behind it? Thanks, Amy once again :)
Loved this tutorial. I want to develop a music player app. It should be able to take a short piece and loop it in sync with the current BPM. There will be a small pattern of music which will repeat infinitely. How do I do that
Thanks a mil! I was wondering if you could link or explain how the prevValue works on a variable pulled from state but not from the state itself? I don't really see anything like that in the component lifecycle documentation (or maybe i did but i'm missing the point lol). I've done similar before in react but I thought i was just hacking around and causing the issue myself, but evidently "it's a feature" lol
Thanks for a great video - very helpful. One question though. The progress in the progress bar currently jumps every second instead of expanding smoothly. This become visually more obvious with a larger width of the progress bar and an audio with a short duration. Is there a way to modify it to have a visually smoother progress?
excuse me, you made a very fascinating and helpful tutorial, but could you help me with this minor bug? Everything works greatly but the progress bar is glitched. When I first play the audio, it doesn't appear. It just appears only when I double click on the play button. Is that the problem of the animation?
Glad you liked the tutorial! -- I'm using the Cobalt 2 Theme, Dank Mono Font, and I'm using a combination of the extension Peacock (marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock) and custom settings within .vscode/settings.json file to change the window frame (top and side bars). -- When I have multiple VS Code windows open, the window color is a quick and easy way to distinguish between each window. Peacock will assign a random color, but for some of my personal projects, I like to choose colors explicitly. That's when I'll change the .vscode/settings.json file by hand.
Hi Amy. Thanks for this great video. You are a good teacher and the way you work is very calming and effective. I also like the way you reason why you are doing what you are doing. TWO THUMBS UP!! I was able to resolve many of the issues I was having but one. I notice that when I hit the 'forwardThirty' button once it moves ahead 30 seconds... but If I hit it again.. it goes to the end of the file regardless of the file size. The 'backThirty' button works great. Also, I a curious if you can proved info on how I can play audio files not hosted on a CDN or remote. Can I play files stored locally in a folder with the React files? I tried and was not able to get it to work. Keep up the good work. I am looking forward to your next video. :)
Hi.. I'm wondering how can we control the audio play, pause, previous and next from the notification bar..like many music player app...would be helpful, if you make a tutorial on it too.., or if you've already covered it, please let me know... Thanks btw!🙌
@@SelfTeachMe Don't know, whether you're thinking exactly what I'm trying to say. Could you just search for "music control on notification bar android" on Google and check the image section... You'll see what I'm talking about.
@@krishnakantmodani353 Ahh, I did misunderstand. I **believe** that functionalty would be through your device's native controls. -- For example, this player would be running through your device's browser. The notification bar would technically be controlling the browser, not your webpage.
Hey Amy, just a quick one. at 42:00 you say to create a const prevValue that can be used so the toggle button works correctly when playing etc. Is there any reason you don't use useEffect(( => { if (isPlaying){ audioPlayer.current.play() } else { audioPlayer.current.pause() } }) , [isPlaying]) ?? or it's just not best practice using useEffect maybe?
Lewis // This is a great question. The code you wrote should work. This is an example of there's more than one way to do things. I didn't use a useEffect because it's setting up a listener (for isPlaying) when I already know exactly when it's going to change. However, if you ever needed to extend isPlaying and need to control it elsewhere, your use case would be perfect. Recently, I discovered a Learn with Jason episode, where they made an Audio Player within React: www.learnwithjason.dev/build-a-custom-accessible-audio-player with source code: github.com/learnwithjason/accessible-react-audio-player It's kind of interesting because he uses React's synthetic event handler, `onPlay` to set the state (specific line of code): github.com/learnwithjason/accessible-react-audio-player/blob/4ed52b799002291b50ac1a5bc06fef73b6b69733/src/components/audio-player.js#L104
wow thank you! super cool stuff, amazing work! i livestream viola performance on twitch and am looking for a situationally aware and conditionally-activated audio player so that when it's not hearing sound from my audio interface (mic), web browser, or audio files, it plays a playlist of audio, and ducks down to -99db when it does hear something. not enough time between sounds to manually turn on music, but enough so that the silence can get too long for my taste. can i hire you to work it out? haha! no but seriously?
Dear Amy excuse me but i across a issue during i play my audio on the website audio don't play but when i quit on my website audio is play i need to your help thank you
I was able to solve the problem of the message that I had brought to you but it turns out that I would like to know, if with this functionality it is possible to play several different audio? case I am confronted with this problem I cannot play several audios case when I launch an audio the two mp3s which I have on my web page play the same song without although I have to click on the second
Aha, right, I see it says your channel is a Zeal show so you must be! Such a coincidence as I have bookmarked the Zeal website because I am trying to figure out how to get video to autoplay in Safari. I am in my second year as an apprentice web developer and love experimenting but still haven't cracked how you've got the video to play on your banner and it's driving me crazy haha.
Yes! I do work at ZEAL! So our website was made in Webflow, which is a no code solution. So they have their own background video widget you can drop on a page. I’ve built several sites though that have background video so maybe I can help. Does your video have audio? Some browsers won’t allow auto play with audio. Do you have a URL or GitHub repo? I’m happy to take a look at the code.
@@SelfTeachMe Oh wow, thank you Amy, that would be super! I know about the audio thing, it's just the autoplay feature I am trying to get to work and it seems like Safari is the only one which doesn't like it. I don't have a Git repo at the moment but will make one ASAP and let you know once it's up. Thank you so much!
I haven't looked at this for a few weeks so have forgotten where I'm at with it. Just loading it again on my portfolio, it isn't actually working on Chrome either! charlie-george.com
Dear Amy, thank you very much for your wonderful tutorial! I truly excited to see how the series continues! :D I followed the tutorial and everythings works for me but the duration read out. After following your 49:29 step I still get sometimes "NaN" when I reload the page, and once I start playing the audio it updates itself. I noticed that around 55:07 of this video you also encountered this error, but then it dissappears. Do you maybe have an idea of why it happens? Thank you again for your channel and the podcast! :D
Angela // Good catch! -- and sorry for the confusion. I'll pin your comment and address this in an upcoming video in this series, but there's actually a built-in event listener that you can hook into instead of using a useEffect. It's called onLoadedMetadata. So, within the audio component, you might say: -- meaning it calls the onLoadedMetadata function once the metadata is loaded. I'm actually using this method on the Compressed.fm site. You can check out the source code here (direct link to the actual audio player component): github.com/ahaywood/compressedfm/blob/master/nextjs/src/modules/shared/components/AudioPlayer/WaveformPlayer.js#L48
Let me know if you continue to run into issues.
@@SelfTeachMe Thank you for the tip! It worked perfectly!! 🔥
@@angelap.8160 Hey Angela , I've been facing same error, can you help me solve it? It says onLoadedMetadata function is not available. I am not sure , do I have to replace useEffect with the onLoadedMetaData function , or to create a new function. I tried both , but neither worked. Do u remember the solution?
@@MrSantino3 replace your useEffect with" `const onLoadedMetaData = () =>
setTotalAudioTime(audioPlayer.current?.duration);`
@@rassolarThank you!!! you are genius!!
this is the best tutorial I've ever seen!
just a small issue I found,
at 1:01:47 on line 62 you should put the -30 outside the parenthesis, because it can cause bugs (converting to number only after adding them together as string).
Thanks, brah. I had a bug that made the `skip forward` function to jump all the way to the end. Your solution fix'd it!
Yep I had the same problem and this fixed it. Thanks!!
true
thank you!!
Thank you sir!
On the last line i changed my forwardThirty function to
// progressBar.current.value = Number(progressBar.current.value + 30);
progressBar.current.value = Number(progressBar.current.value) + 30;
I found for me it was appending the number instead of numerically adding them.
Great tutorial though Amy thanks so much! I enjoyed following along and I used it in one of my projects :D
Good catch! In a follow up video on debugging (ruclips.net/video/64n-M6W0qKE/видео.html), I realized the code should have been: Number(progressBar.current.value) + 30; -- You want to cast the progressBar.current.value to a number before adding 30.
@@SelfTeachMe I just realised that earlier today :O
I watched your debugging video and was kicking myself. Now I know how to isolate bugs like a pro! Thanks again!
@@c4binfever Glad you got it figured out! ... and glad you found that video helpful!
hahahahah. i'm laughing because i catch the same problem and i'm reading every comment to find someone who catch the same. Thank you man to ask and Thank you Self Teach Me, i'm learn to create this audioplay to use in a project i have with my wife to get our shortcut spotify audio and show in your webpage whitout spotify . In the future i would like to writing to for peoples chose if they want read ou listen. Thank you!
The thing that I loved the most is that this is not just a tutorial to reach from A to B, but also includes the reason behind why things work the way they do. Thanks for this.
Thanks Sohail! That's my intent so I'm *so glad* that you picked that up.
@@SelfTeachMe Hope more people find your channel. Keep doing awesome stuff!
I searched audio tags like a years ago, i found nothing on the youtube, here after year, i have such a great instructor. Thank you so so so so much 💗💓
Wow, thanks! Glad that you found it helpful.
Its a 1 hour tutorial and I'm not a tiny bit bored. Loved your attitude! Keep up the great work
Thanks for the kind words!
hope this blows up with the podcasting scene. thanks for showing up.
I've been using React for a few years and coding for a long time.....this was such a delightful and well explained video, and really helped me out on a project. Thank you.
Thanks Amy! I really enjoy your teaching style and loved this episode. You deserve a lot of credit for the work you put in and I appreciate the effort and the value you give.
This is legit the best tutorial that I ever have seen! Thank you very much, helped me a lot :)
That's so great to hear! Thanks!
Amazing! This was exactly what I was looking for without knowing this is what I was looking for.. I've explored many articles, repos, videos, and no longer need to continue my search. Well worth the hour. Thank you!
Hi Amy! I'm happy to have found you! I was just looking for how to create a streaming player and I found a gold mine!!
I am in love with the easy, practical, fun and calm way that you have to explain, it is a little more difficult for me because I am from Argentina and I do not speak English;
(By the way, the 4 inches from the bottom are covered by the subtitle, if you can coding from above it would be a great relief!!). Thanks for your videos!! I hope one day to be as good as you!😙
Hi Amy, thank you for this awesome tutorial. I used your video to implement a custom audio player and had no clue how to do it till I saw your tutorial. Thanks again!!
This is perfect! I've been trying to do this in react and I've been pulling my hair out!! Thank you for sharing this series!
You saved me with the progress-bar, i had no idea how to make it. You stopped me from producing a tumor from frustration.
Glad I could help!
I love the way you explain everything. So visual and easy to follow! Thank you!!
Thanks @klheebang791 Appreciate it!
This is a great tutorial!
I've not worked much with audio in the browser before but I've used a lot of video components. I'll for sure be referring to this in the future for *media* related projects & even the approach to various aspects of code design!
PS: I converted this to styled-components on the fly and it works perfectly!
You now have a new subscriber :D
Amazing tutorial! So good that I subscribed. Look forward to more tutorials like this one. Congrats
Thanks, Sonny! Appreciate that!
This tutorial really helped me as I was stuck on this issue for a while! Very well explained and great video overall!
This video is so useful ! You make it so simple to understand and follow through, thank you so much !
I came across this video at the right time. Thank you!
Yeah! Glad you found it helpful.
woow, I loved the way you explain everything!
I´m a new dev from brasil, a huge thanks!
Yeahh! So glad you found it helpful!
Great video, wonderful presentation style, production quality, etc too!
Thanks!!
Great tutorial and also great pacing of the editing. Made it very interesting to watch!
Yeah! Love hearing that!
Right at the end it should be,
Number(progressBar.current.value) + 30
not
Number(progressBar.current.value + 30)
Thanks for the catch. The next video in the series, Debugging in VS Code, I show how to use VS Code’s tools to debug and fix this.
Building a sticky React audio player which continues to play when switching between pages on a site if anyone wants to help out. Thanks for this power tut Amy! subbed
Aww my heart. i think I'm in love with your teaching style
You're too kind.
Dear Amy, thanks for such a great tutorial. You are doing it great, thanks for it.
Yeah! Glad you found it helpful!
Thanks again for this great code. I am now using it in my project after customizing the appearance a bit. Actually, I was also able to use almost exactly the same code and css to build a simple video player too with the same look and feel. It looks like the principles for the video are almost identical.
🙌🏻 Awesome! Glad you were able to get everything to work.
I find it's easier to learn to code if I re-write examples like this video from scratch on my own after watching it, rather than writing from memory or copying blocks trying to produce it from nothing. I find that by only using known-good code when I get stumped as a reference, and taking the time to muddle through on my own, that's the best education one can get in this field. Because that way you know how to do many variations, not just one example. It's much slower, but you'll remember it forever
Aaaaaawesome!! Looking forward to creating a playlist and handling multiple players on the same page!!! :)
They’re still in the cue! But it’s happening!
Just have to tell one thing: Amazing 🔥🔥🔥🔥
Thanks, Om!
So dope!!
Thanks!!
The Best Tutorial ever! Congratulations! +1 subscriber!
Unreal tutorial!
Thanks!
Thank you so much for this tutorial.
Literally got everything which I wanted in a single video.
Helped me a lot, thank you!
Woo hoo! That's awesome!
Don't normally comment but this was excellent, super educational and clear!
Ahh! Thanks Axel!
If you are using an mp3 file in your project folder, you must first write the import statement at the top.
Man, you are so patient! Thank you so much! Wonderful class!
Yeah!! Glad you found it helpful!
@@SelfTeachMe I just saw it again ... Yup still helpful! I just found my first job as a Web Developer thanks to you and all of this amazing community! Kudos!
@@civilization_tfgonz thank you for saying that!! That’s exactly why I enjoy creating content
@@SelfTeachMe Thank you 🙂
Great tutorial!
Thanks for publishing!
My pleasure!
Love this video. Is it possible to add multiple players to different audio files on one main page?
Works perfectly! Thank you so much! God bless you 🙏
Thank you for the video. Very well explained. I learn a ton :)
Glad it was helpful!
So awesome... thank you very much. I had a good amount of knowledge but am self taught on Reactjs (even though I've been a developer for many years) and you really filled in some major gaps for me!! Did you say you were going to do one with visualization? Also, I would love to apply but it doesn't look like you guys hire older people, especially a female older developer :( Its been very hard to find work as I still have a good decade before retiring but if you're not young... one gets overlooked a TON. You say your people encourage side projects but do they encourage well rounded experienced older developers?
Awesome! Glad to hear that!
what a good and nice teacher thanks
Amy, thank you very much! You really helped me! Hello from Russia
Thank you for this tuto. Amazing !!
Thank you so much! It is very helpful and awsome video ever I watched! 👍
Thank you very much for this learnt a lot!
great video ...helped me ....i like to point out that at the end of the audio it does not show the play button and keeps playing
That's a great point. I've made a note to include this feature as a video in the series.
Thanks for this video, it helped me a bit in doing a music player challenge. Animating the progress bar didn't work very well because the method you showed was very memory have and even had a memory leak somehow, though 🤔Not sure why, but I changed the method to update the currentTime with a setInterval. It worked like a charm haha!
It is better to use onEnded , onTimeUpdate , and onLoadedData of the audio element instead of useEffect to detect changes in those values
So so educative, notes taken. Thanks
Thank you! I know this video is from over a year ago, nevertheless it help me a ton!
id love to know what theme you are using in your vs code! thanks so much for the walk though explanation!
I'm using Cobalt 2.
Thanks! Explanations are concise and perfect
Glad it was helpful!
what is the font style, or the general style of your visual studio code? i want mine to look like that but idk how to get it like yours
btw I love your videos!!
Thank you very much for this.
Thank you so much Amy, this was great!
Awesome! Glad you liked it
Thanks a lot Amy 🤩
thx for the effort benefited a lot
it was really helpful thank you ❤❤❤
You are just awesome. I Iike the way you teach. It is quite interesting 🙂
Thanks Akash
Thanks!! Great tutorial
what kind of camera are you using :D ? its so good
Amazing content! Thanks a lot!
Thank you! Glad to hear that!
Thank you very much for your detailed explanation!!! you are awesome and your smile is gorgeous. thank you very much!
Thank you! 😃 Appreciate the kind words!
play /pause built in function not working for me. the method is not found or something. when i type them in they become underlined and im asked to create this method. using react app
Thanks for the video. I have built something similar for a website I'm making and it works fine on firefox but the part behind the knobby/thumb does not get styled in chrome based browsers. Do you know a solution to this
i was able to solve the problem of the message that I had brought to you but it turns out that I would like to know, if with this functionality it is possible to play several different audio? case I am confronted with this problem I cannot play several audios case when I launch an audio the two mp3s which I have on my web page play the same song without although I have to click on the second
This is perrrrrrrrrfect! Thank you so much.
You're so welcome!
Great Tutorial! Thank you :)) My only feedback for future videos is to keep the code for longer in sight while you are talking about the next step. I had to pause the video too much to follow along.
Thanks for the feedback. There's also a link to the final code in GitHub if you want to review the code further.
Very Good
Glad you enjoyed it.
what would the src be of an audio file that is in our project folder?
Hi Amy. great video. i have been trying to find a good React video on the audio player and i am glad i found yours. i am following along and the design is coming along great. I am having issues though... trying to get the audio stream to play - (1) i am getting CORB errors and (2) when I try to use the '.play()' function I am getting an error: TypeError: Cannot read property of undefined (reading 'play'). I am setting up the play options just as you coded it: I am using the 'useRef' hook for - audioPlayer, and I am setting up the pause-play as such: { isPlaying ? : } if (isPlaying) { audioPlayer.current.play() } else ... The error comes at the play() function, after 'current'. It is not recognised. I know that play() is a part of HTML, but not sure why I am getting the error.
I had the same error you didnt define the audioPlayer using "ref".
Also to track the metadata you will need to preload it to work when pause.
Hey Amy! Really thankful to you for this video. But I am stuck with duration coming as Nan in the beginning and setting the duration automatically after clicking on the play. I tried the below-pinned comment of OnLoadedMetaData and removed the useEffect as suggested But then it shows 0 as duration and it doesn't even change after you have clicked the play. Do you by any chance know the reason behind it? Thanks, Amy once again :)
soo gud thanks you for the best content
Loved this tutorial. I want to develop a music player app. It should be able to take a short piece and loop it in sync with the current BPM. There will be a small pattern of music which will repeat infinitely. How do I do that
Thanks a mil! I was wondering if you could link or explain how the prevValue works on a variable pulled from state but not from the state itself? I don't really see anything like that in the component lifecycle documentation (or maybe i did but i'm missing the point lol).
I've done similar before in react but I thought i was just hacking around and causing the issue myself, but evidently "it's a feature" lol
Thanks for a great video - very helpful. One question though. The progress in the progress bar currently jumps every second instead of expanding smoothly. This become visually more obvious with a larger width of the progress bar and an audio with a short duration. Is there a way to modify it to have a visually smoother progress?
I found a very easy solution to this issue by simply adding " step='0.05' " to the input tag.
Awesome! Smart solution!
Wow amazing tutorial!!xo
Thanks, Natasha!
excuse me, you made a very fascinating and helpful tutorial, but could you help me with this minor bug? Everything works greatly but the progress bar is glitched. When I first play the audio, it doesn't appear. It just appears only when I double click on the play button. Is that the problem of the animation?
I'd need a little more context to be able to troubleshoot. Do you have your code posted somewhere so I can look at it in context?
Tutorial is amazing. Mind me asking what theme you're using in VS code?
Glad you liked the tutorial! -- I'm using the Cobalt 2 Theme, Dank Mono Font, and I'm using a combination of the extension Peacock (marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock) and custom settings within .vscode/settings.json file to change the window frame (top and side bars). -- When I have multiple VS Code windows open, the window color is a quick and easy way to distinguish between each window. Peacock will assign a random color, but for some of my personal projects, I like to choose colors explicitly. That's when I'll change the .vscode/settings.json file by hand.
Wonderful
Thank you
nice work
Thanks
Hi Amy. Thanks for this great video. You are a good teacher and the way you work is very calming and effective. I also like the way you reason why you are doing what you are doing. TWO THUMBS UP!! I was able to resolve many of the issues I was having but one. I notice that when I hit the 'forwardThirty' button once it moves ahead 30 seconds... but If I hit it again.. it goes to the end of the file regardless of the file size. The 'backThirty' button works great. Also, I a curious if you can proved info on how I can play audio files not hosted on a CDN or remote. Can I play files stored locally in a folder with the React files? I tried and was not able to get it to work. Keep up the good work. I am looking forward to your next video. :)
I had a similar problem with the local files. Did you import them in your js code?
@@Djinn667 Amy fixed it in a later video
What is you vscode theme?
Amazing, thanks 🙏🏾
You’re welcome 😊
Hi.. I'm wondering how can we control the audio play, pause, previous and next from the notification bar..like many music player app...would be helpful, if you make a tutorial on it too.., or if you've already covered it, please let me know... Thanks btw!🙌
Great idea! I have a video in the cue for creating a player across the top of the page. Is this what you're talking about?
@@SelfTeachMe Don't know, whether you're thinking exactly what I'm trying to say. Could you just search for "music control on notification bar android" on Google and check the image section... You'll see what I'm talking about.
@@krishnakantmodani353 Ahh, I did misunderstand. I **believe** that functionalty would be through your device's native controls. -- For example, this player would be running through your device's browser. The notification bar would technically be controlling the browser, not your webpage.
I ❤️ YOU!!! THANK YOU!!!
Hey Amy, just a quick one.
at 42:00 you say to create a const prevValue that can be used so the toggle button works correctly when playing etc. Is there any reason you don't use
useEffect(( => {
if (isPlaying){
audioPlayer.current.play()
} else {
audioPlayer.current.pause()
}
}) , [isPlaying])
??
or it's just not best practice using useEffect maybe?
Lewis // This is a great question.
The code you wrote should work. This is an example of there's more than one way to do things.
I didn't use a useEffect because it's setting up a listener (for isPlaying) when I already know exactly when it's going to change. However, if you ever needed to extend isPlaying and need to control it elsewhere, your use case would be perfect.
Recently, I discovered a Learn with Jason episode, where they made an Audio Player within React: www.learnwithjason.dev/build-a-custom-accessible-audio-player with source code: github.com/learnwithjason/accessible-react-audio-player It's kind of interesting because he uses React's synthetic event handler, `onPlay` to set the state (specific line of code): github.com/learnwithjason/accessible-react-audio-player/blob/4ed52b799002291b50ac1a5bc06fef73b6b69733/src/components/audio-player.js#L104
@@SelfTeachMe okay cool 👍😎. Good stuff! Just discovered your channel and really enjoying it
@@lewiswardita9902 Awesome! Glad to hear that.
Thank you! :-)
Sure thing!
Thank you 🥰
You’re welcome 😊
Nice!
Glad you liked it!
How to run an mp3 with react ?
what font family do you use in this video? please answer, for the editor i mean :D
Dank Mono
@@SelfTeachMe Thank you
Thanks so much
Of course!
KD a alteração de áudio?????
wow thank you! super cool stuff, amazing work! i livestream viola performance on twitch and am looking for a situationally aware and conditionally-activated audio player so that when it's not hearing sound from my audio interface (mic), web browser, or audio files, it plays a playlist of audio, and ducks down to -99db when it does hear something. not enough time between sounds to manually turn on music, but enough so that the silence can get too long for my taste. can i hire you to work it out? haha! no but seriously?
Dear Amy excuse me but i across a issue during i play my audio on the website audio don't play but when i quit on my website audio is play
i need to your help
thank you
Hmm... I'm not sure what's causing the problem. I'd need more information to troubleshoot.
@@SelfTeachMe i want play many audio in my website but it play same audio
I was able to solve the problem of the message that I had brought to you but it turns out that I would like to know, if with this functionality it is possible to play several different audio? case I am confronted with this problem I cannot play several audios case when I launch an audio the two mp3s which I have on my web page play the same song without although I have to click on the second
sorry for the inconvenience that I am afflicting you
Hey Amy, so do you work at Zeal?
Aha, right, I see it says your channel is a Zeal show so you must be! Such a coincidence as I have bookmarked the Zeal website because I am trying to figure out how to get video to autoplay in Safari. I am in my second year as an apprentice web developer and love experimenting but still haven't cracked how you've got the video to play on your banner and it's driving me crazy haha.
Yes! I do work at ZEAL! So our website was made in Webflow, which is a no code solution. So they have their own background video widget you can drop on a page.
I’ve built several sites though that have background video so maybe I can help. Does your video have audio? Some browsers won’t allow auto play with audio. Do you have a URL or GitHub repo? I’m happy to take a look at the code.
@@SelfTeachMe Oh wow, thank you Amy, that would be super! I know about the audio thing, it's just the autoplay feature I am trying to get to work and it seems like Safari is the only one which doesn't like it. I don't have a Git repo at the moment but will make one ASAP and let you know once it's up. Thank you so much!
@@charlie-george awesome! I’ll keep an eye out for it.
I haven't looked at this for a few weeks so have forgotten where I'm at with it. Just loading it again on my portfolio, it isn't actually working on Chrome either!
charlie-george.com