17.1: Loading and Playing - p5.js Sound Tutorial

[@jan49_]

Thank you for your videos :) You reignited my passion for programming! ❤️

[@shafaatkazmi4228]

Great work boss .. i am developing a game soon it will be released but you have really helped me in making it more interactive

[@edharkins112]

Amazing coder and educator!!! Thank you so much Dan!!

[@huuarethey]

love you dude, really thankful for your teaching and help, have a nice day and week and year

[@jrmumm]

You are awesome sir... keep doing what you're doing!

[@obedotto4465]

Man you really got that song stuck in my head!

[@thalianoboalamar1710]

You are an amazing teacher. Thank you so much.

[@andrewlozano88]

(EDITED) LOVE YOUR WORK DAN!

[@paniproduce]

Almost on every video of you i have to laugh. GOAT the nobel is a little prize for this job you doing. Thanks. A teacher from college recommended this for our digital interfaces class, and this is the most complete channel i've seen. Thanks again

[@ShaXCwalk]

The intro!!! Love it haha

[@destinyjames6117]

I love this playlist!

[@dbzlinkinpark99]

could you recommend more updated p5 sound videos because I think they've changed some of the references since this video

[@devpadrao6988]

I love yours videos. Thanks a lot!!

[@sofiagarcia3581]

lol everything about this is amazing

[@robinirving8307]

Awesome video and videos!

[@Shidou_san]

how about a coding challenge: making a mp3 player with playlist and shuffle button?

[@Luka1928]

LOVE YOUR VIDEO!! IT HELP ME SO MUCH

[@Luka1928]

but how can i loop the song?

[@TheCodingTrain]

the loop() function! (instead of play())

[@graxxarecords3456]

WE LOVE THIS GUY! GENIOUS!

[@BlockofAmethyst]

Como te quiero pa, siempre salvandome de todas 🤗

[@johncerpa3782]

Great video

[@xesigndesign]

hello there Daniel. thank you for all the tutorials. I´m making a sketch where after 4 minuts the sketch exists or stops. i have remove(); on mousepressed, but is it possible "delay" that effect? or a simple countdown? thank you

[@mauriciocedrazromero8084]

Hey man, thank you so much for sharing these precious information. Just a question: How old preload and play at the same time multiple audio files? Hope you answer me! Regards!

[@rohitsamineni8990]

Hey shiff,I want to simulate the log vs linear volume increment would I be able to do with js, or u recommend anything else?

[@feros94]

I love how you dance!

[@TheCodingTrain]

hah, thanks!

[@dbzlinkinpark99]

@@TheCodingTrain i love the dancing too it always puts a smile on my face

[@mitalisharma440]

thenx. vv v helpful.

[@jpopperman9369]

I was watching this stoned and the sound panning tripped me TF out 😂

[@Thespokenone]

Is there a way to create an array and loud different sounds into that array? I've been trying to do so, but I just can't seem to get it right!

[@2512kanika]

Thanks for all the amazing tutorials Dan. I can't seem to play through the console command only. especially after i use 'song.stop();' or song.pause() song.setVolume(0.3); undefined song.setVolume(0.1); undefined song.pause(); undefined song.play(); undefined this sequence doesn't play the song back again

[@tyulik]

can't believe i saw this earlier omg, welcome p5.js, goodbye processing minim

[@elenamanrique]

and what about preloading (or with callback) multiple audio files? I have tried but If there are two loadSound in preload only the first works (is loaded). (thanks a lot for the videos :-))

[@brittl3nfriends224]

is there a way to shuffle between songs?(referring to more than 1 song you want to play )

[@STLightiix]

Is there a way to change the pitch without changing the speed of an audio sample ? thank you !

[@thehaptiK]

thanks for showing us how to use the callback function. this was not covered in my class and i couldn't properly load music

[@corichin2156]

How do you load more than one sound, and get the songs to alternate on mouse press?

[@suomynona1937]

Hi, I don't understand why when I use the functions seen in the video like play(), I have a deformed sound whereas when I listen to it whith Windows media Player it's ok. Is this a common mistake or a thing I forgot to initialize ?

[@gregfield4457]

panning works fine.

[@TheCodingTrain]

oh good!

[@aadilmufti4933]

Awesome video, But I have a question, so I have an express server that is getting links to MP3 files, and I want to load the audio from API calls into my p5 file, how would I do this? I can’t seem to find examples that use API calls to load audio, not a static audio file, thanks!

[@Kino-Imsureq]

when i load a sound file, it just completely crashes and gives me 2 errors which i do not understand

[@adefirmanfauzi5500]

Hmm, I got an error something like this "AudioContext error at decodeAudioData for intro.mp3 The error stack trace includes: preload"

[@EtonFisch]

Great video! I wondered how I can load a mp3 from an url, I always get the eror : "There was no response from the server at (dropboxlink) Check the url and internet connectivity. The error stack trace includes: loadSound at setup (pen.js:105:12)"

[@Weckacore]

Does anyone know how to load sounds from an tag or live stream?

[@barryryan5187]

thank you thank you

[@channinghurley7270]

Can you do the same sort of thing in Processing 3?

[@HoangTran-jz4rz]

can i connect

[@dopinkus]

Love the videos! Daniel - is it possible to use your speaker output as audio input? Basically, I want to process something I'm listening to on Spotify. Is that possible?

[@TheCodingTrain]

yes, but you probably need additional software for example rogueamoeba.com/loopback/. You could also just get mic input and play it loud!

[@newdragon88]

Hi. I can't load mp3 file because of cors problem in windows OS. Is there any way to solve it?

[@christophrenschler7650]

I can't load any sound in p5.js... Every time I run the code it says: "Unable to load Quan recording.aif. The request status was: 404 (Not Found) The error stack trace includes: loadSound at preload (localhost:3000/sketch.js:4:9)" How can I fix this???

[@ligavasiluna]

me too? :(

[@elanonimatov9726]

go to sketch file and then add a file which is the music I think that could solve your problem im not a expert :/

[@GapIntheNap]

you have to declare sound format of you file use this code in preload or callback for ex soundFormats("mp3");

[@birzeytindir]

Hi, can you fix this?:(

[@samclarke8724]

anyone know where to get raw files i can link in, hosted somewhere else? like i would link in external scripts from websites etc.

[@renottoner6120]

is there any way to record audio from the same page im playing audio and export to downloadable wav/mp3? thnx

[@dbzlinkinpark99]

I think it’s possible with coding you just have go through a few more videos to find out how, but I kinda get what you mean, I can’t do it myself yet but I see that it’s possible

[@gabrielaltamirano1112]

Is there a way the user (of the sketch) can input an audio file in real time? no mic. Uploading an audio file ?

[@IsmailBuzerJamher]

can i use this library in my Laravel project too ?

[@ankurmazumder5590]

Is the sound file being loaded to the server?

[@frankanastasia9389]

Hello I am trying to use this code but I cant seem to get it to do anything when I run it through nodejs any ideas?

[@LynnHu]

The dances deserve more likes!

[@marsproyek6987]

dear thank you very much... i have one quesition only little idea on android studio by sound amplifier hearing aid

[@letswatchcartoons181]

your videos are awesome, could you upload a video on SoundLoop, please? Like I am trying to use SoundLoop and conditions together...

[@mattkaczmarczyk6953]

can't find your index.html code in github??

[@mohammedabenourseddiki6860]

i have a problem i am trying to make a perfect car engine sound loop it sounds perfect on the editor but it craps at the sketch

[@gracehu3031]

I tried importing the library into the index.html file but the sound library doesn't seem to be loaded properly and I can't figure out why. Any ideas?

[@seanjohnson2906]

14:40 Literally reminds me of the ballroom scene music in the film "The Shining."

[@jazzediceberg1175]

how can you use sound in a program which can be exported?

[@danzy182]

For some reason, i keep getting an error that loadSound is not defined. I checked the HTML and it links to the library fine.

[@MrMelvi87]

Hey Daniel, thanks for making the videos. Do you have some kind of Cross Origin Request on your Chrome browser? Ive been trying this for a few hours now, even loaded a nodeJS server but i cant access the mp3 files on my folder the same way you are doing it

[@MrMelvi87]

Fixed: github.com/processing/p5.js/wiki/Local-server

[@TheCodingTrain]

yes, need to run a server!

[@dimitrisdimoulitsas6660]

New Question here! Hi Daniel !! following you for years from switzerland! I have a bigger sound file to play (50mb) and I want it to start playing before it is completely loaded.. like in any web classical audio/video player there is a loading and a playing progress... is it possible?

[@TheCodingTrain]

this, as far as I know, is not a feature of p5 so you'd have to dig into the native web audio API.

[@humming8013]

i got this to work in one of my projects with a scream sound and it scared me even though i knew it was coming Edit: it dosnt stop and i cant figure how to make it stop after it starts jps.stop() wont work jps if the sounds variable

[@herrbanane]

Where do I have to put the sound file?

[@sleep-404]

i looooooveeeeeeee you!!!!!!!!!!!!!!!!

[@mridulmishra8166]

it's throwing error connecting to node.. how to resolve that??

[@danmusiceasy]

Does anyone know how to slow down playback rate without the pitch changing?

[@andrearaujodacunha7653]

The pan works???? That is so amazing that it makes me want to program

[@ivanbezerra3531]

Hehe, love from Brazil

[@accentor713]

having trouble with this. Currently using the p5.js web editor to try and load a song from my desktop which doesnt work. Need to know all the software to use

[@TheCodingTrain]

Our Coding Train Discord is a great place to get help with coding questions ! discord.gg/hPuGy2g - The Coding Train Team

[@williamaughenbaugh6886]

I loved that Intro, It twas amazing XD. But i was going to ask you something not relating to this video. In processing how do you make the perlin noise generator a different color and remove the stroke with out it looking like a blob

[@TheCodingTrain]

answered there!

[@ardenchilders3618]

Can you load a sound into the web editor?

[@elanonimatov9726]

*_why don't you have more suscribers? pd: I love your dance_*

[@sabyasachisamadder3612]

It constantly showing loading. What should I do? I am doing it on Visual Studio Code.

[@rachaelconcessio3019]

The drag modal doesn't appear for me? I'm logged in but I don't see aything

[@elanonimatov9726]

*_I need help pls! it says this: Unable to load boxmusic.mp3. The request status was: 404 ()_* *_can u figure out what is going on?-_* this is my code var song; function preload() { song = loadSound("boxmusic.mp3"); } function setup() { createCanvas(400, 400); song.play(); } function draw() { background(220); }

[@elanonimatov9726]

*_Nevermid i did it the problem was that I should go to sketch file and then add a file which is the music! I did it n_n_*

[@steventrujillo8641]

Sometimes my sound plays, but then sometimes it doesn't. Is this normal with html5 dev?.. Because I haven't really changed the code haha.

[@objectsobjects4424]

Not sure why, but every single time I try doing "song.setVolume(slider.value));", nothing wants to load onto the HTML page. When I remove it, everything works. Using the latest version of Firefox.

[@andreas6508]

you mean "song.setVolume(slider.value());"

[@AsaTaylor]

That intro music and you coming into frame has to stay. Please and thanks.

[@TheCodingTrain]

heh, i'm glad you enjoyed it!

[@REXanadu]

Still getting 'loading...' messages for playing audio files even after following instructions on your github page. I've used both .mp3 and .wav, and nothing works.

[@ruhanaazam3479]

I'm gettin this same issue, any solution?

[@brettlee5382]

Same here

[@oshotz]

I was having the same problem myself, but I think I've found a solution. On trying to run the code, the Developer Console that comes with Chrome spits out an error. I looked it up, and found this page here: stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local According to that, the sound file cannot be loaded due the the usage of file:// The easiest way to fix this is to use a local server, which can be done by directly using the p5.js app (open the project and hit the play button), rather than opening index.html separately. If you really wanted to, you could also host a local server using node.js, but that's not necessary.

[@aaronvanderhorst6773]

use firefox

[@dipanshuverma8819]

I get this error in Chrome and I wonder why don't you get it? Is there any way around? Access to XMLHttpRequest at __ from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. By the way, you are just amazing , watched so many of your videos and learnt so much from you.

[@DarKosT12]

I'm getting ReferenceError: loadSound in not defined every time. I simply can't load this libraries properly I suppose. I've already tried to connect them through the links and the disk. Have tried different source. The method of FLy1nRabBit stated here doesn't work either.

[@TheCodingTrain]

Do you have p5.sound.js referenced in index.html? For more help try discourse.processing.org/! It's a better platform for Processing and p5.js related code questions. You can share code there easily! Feel free to link from here to your post.

[@DasCartoonLand]

how do you get the "var" class. is it part of p5.js?

[@DasCartoonLand]

damn i thought you were making a tutorial for processing.... just realized that its java script

[@01234567897298]

How often do you answer questions?

[@nikkonikko371]

I recommend you to look at his discord server

[@sabinesformula]

In P5.js, can I implement youtube API and loadsound using youtube url? your tutorials are always so helpful!

[@TheCodingTrain]

You can use the KZbin API with p5.js yes! I don't know how easy it is to access the sound from youtube however.

[@sabinesformula]

Good to know it works! I will play around with it. Thank you!!

[@verdynn5917]

This is most likely due to a problem with the sound file's location, but the webpage only shows "loading..." and nothing else. Any suggestions?

[@verdynn5917]

These are the errors I get: p5.sound.js:819 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. goo.gl/7K7WLu Tone.Context @ p5.sound.js:819 (anonymous) @ p5.sound.js:992 (anonymous) @ p5.sound.js:997 (anonymous) @ p5.sound.js:73 (anonymous) @ p5.sound.js:74 p5.sound.js:1002 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. goo.gl/7K7WLu (anonymous) @ p5.sound.js:1002 (anonymous) @ p5.sound.js:1095 (anonymous) @ p5.sound.js:73 (anonymous) @ p5.sound.js:74 p5.sound.js:1883 Access to XMLHttpRequest at 'file:///D:/Logan/Downloads/p5/p5/empty-example/song.mp3' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. p5.SoundFile.load @ p5.sound.js:1883 p5.SoundFile @ p5.sound.js:1748 p5.loadSound @ p5.sound.js:1803 (anonymous) @ p5.js:58778 preload @ sketch.js:3 _start @ p5.js:58736 p5 @ p5.js:59080 _globalInit @ p5.js:58340 load (async) 25.../core/main @ p5.js:58353 o @ p5.js:34 (anonymous) @ p5.js:38 16../color/color_conversion @ p5.js:52829 o @ p5.js:34 r @ p5.js:51 (anonymous) @ p5.js:55 (anonymous) @ p5.js:18 (anonymous) @ p5.js:20 p5.sound.js:1880 There was no response from the server at song.mp3. Check the url and internet connectivity. The error stack trace includes: loadSound

[@theboringtube]

this is what you called Fun + Learning

[@michalbotor]

lol, for a split second there i thought you were snoring. ;p

[@youmah25]

what editor are u using if i may???

[@alok1166]

He is using the Atom editor

[@Lyzerglick]

when I do this I get an error saying "loadSound is not defined", anyone know what I'm doing wrong?

[@TheCodingTrain]

Would you mind asking at discourse.processing.org/! It's a better platform for Processing and p5.js related code questions. You can share code there easily! Feel free to link from here to your post.

[@beaverjoe9171]

try to use laodSound("bg.mp3") instead of loadSound("bg.mp3", loaded). I have same issue but i have figured out it by using above solution

[@deadend8111]

yes you need to add the p5sound.js lib

[@alyssamaldonado3881]

SOS why is loadSound not being recognized it shows error "cannot find var loadSound".

[@alyssamaldonado3881]

I'm on a Macbook.

[@nicolasarbio820]

Daniel! Is this library available on Processing?

[@nicolasarbio820]

@Jonah MannOk! Thanks!

[@namanmehta5243]

Why are there 2 sets of playlists numbered 11 i can't understand, i know it's stupid,sorry but ocd! if anyone can tell

[@mathblank]

One is for the p5.js(JavaScript video series - Blue text for the title) The other one is for part of the Processing(Java) video series - Orange text for the title.

[@namanmehta5243]

got it, thanks man

[@xnick_uy]

SliderPan!! SliderPan!! Does whatever a slider can Sound to left, then to right Look out! Here comes the sliderPan!!

[@darkestsunray]

I cannot get the audio file to load for some reason. It works when I use an audio file from wikipedia, But not when I try to use other audio files.

[@iFeElGoOd63]

different browsers support different types of files. The best file to go use for online programming is oftenly .ogg (these are royalty free, as opposed to mp3 files).

[@darkestsunray]

@@iFeElGoOd63 Thx for replying, I think the issue was that I needed to run a local host..

[@ksbalaji1287]

keep on dancin'.

[@Kino-Imsureq]

i have a problem in putting it in my index.html....

[@the2bestfriendstv971]

16:21 I can hear them on my AirPods.when it is right side I hear the right side when it is left side I hear on left