17.1: Loading and Playing - p5.js Sound Tutorial

[@jan49_]

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

[@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

[@obedotto4465]

Man you really got that song stuck in my head!

[@dbzlinkinpark99]

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

[@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!!

[@jpopperman9369]

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

[@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!

[@Shidou_san]

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

[@feros94]

I love how you dance!

[@TheCodingTrain]

hah, thanks!

[@dbzlinkinpark99]

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

[@andrewlozano88]

(EDITED) LOVE YOUR WORK DAN!

[@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?:(

[@theboringtube]

this is what you called Fun + Learning

[@thalianoboalamar1710]

You are an amazing teacher. Thank you so much.

[@sofiagarcia3581]

lol everything about this is amazing

[@LynnHu]

The dances deserve more likes!

[@Kino-Imsureq]

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

[@15_CROWNS]

Como te quiero pa, siempre salvandome de todas 🤗

[@devpadrao6988]

I love yours videos. Thanks a lot!!

[@Luka1928]

LOVE YOUR VIDEO!! IT HELP ME SO MUCH

[@Luka1928]

but how can i loop the song?

[@TheCodingTrain]

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

[@gregfield4457]

panning works fine.

[@TheCodingTrain]

oh good!

[@seanjohnson2906]

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

[@destinyjames6117]

I love this playlist!

[@tyulik]

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

[@AsaTaylor]

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

[@TheCodingTrain]

heh, i'm glad you enjoyed it!

[@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

[@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

[@naraksama3903]

for anyone that has problem with "loadSound is not a function", just put these lines on top of your file: import p5 from "p5"; import 'p5/lib/addons/p5.sound' Now you can use it as p5.loadSound()

[@cipher3966]

"Cannot use import statement outside a module"

[@ShaXCwalk]

The intro!!! Love it haha

[@mattkaczmarczyk6953]

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

[@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

[@channinghurley7270]

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

[@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 ?

[@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!

[@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?

[@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!

[@robinirving8307]

Awesome video and videos!

[@brittl3nfriends224]

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

[@gabrielaltamirano1112]

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

[@graxxarecords3456]

WE LOVE THIS GUY! GENIOUS!

[@jmanvi]

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 :-))

[@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

[@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_*

[@rachaelconcessio3019]

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

[@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

[@STLightiix]

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

[@elanonimatov9726]

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

[@Weckacore]

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

[@corichin2156]

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

[@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

[@newdragon88]

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

[@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?

[@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)"

[@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.

[@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?

[@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.

[@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!

[@HoangTran-jz4rz]

can i connect

[@ankurmazumder5590]

Is the sound file being loaded to the server?

[@marsproyek6987]

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

[@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

[@andrearaujodacunha7653]

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

[@chanasiegel2706]

sketch.js:5 Uncaught (in promise) ReferenceError: loadSound is not defined at preload (sketch.js:5) at p5._start (p5.js:62970) at new p5 (p5.js:63317) at _globalInit (p5.js:62466) Please help soon.

[@chanasiegel2706]

I realized the problem was that I wasn't including p5.sound.js in my HTML, if any else is having this problem I recommend you check that.

[@danzy182]

@@chanasiegel2706 I am having the same issue but I checked when I include the P5.sound.js in the html it says it can not connect.

[@danzy182]

@@chanasiegel2706 I added this to the html.

[@danzy182]

This is the error i get GET 127.0.0.1:56133/path/to/p5.sound.js net::ERR_ABORTED 404 (Not Found)

[@obedotto4465]

16:34 I'm actually pretty surprised this works!

[@jackriseley3629]

my song plays itself about 10000 times at once

[@brokenrobotgames2577]

Shouldn't be in the draw function. Everything inside the draw function loops for infinity. Can only assume that you've failed to put it outside of the main-loop as you've provided almost no information related to your problem.

[@IsmailBuzerJamher]

can i use this library in my Laravel project too ?

[@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());"

[@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

[@bensonlemonz8878]

Yeah, whatevz Dan. Not a centaur... Yeah right. You're telling me a Centaur/Professor couldn't figure out how to photoshop a leg at 6:26 into your vid. Plus, your leg is a lighter skin color than your face. What, you're tryin to tell me that your legs are a different color than your neck? How's that even posibl Professor Centaur?!? Nice try Dan. He's a centaur 4 sure! Centaur or not, keep the amazeballz vid tuts coming. Peace! Sincerely, Ashley (ps. just joking, puhleeze don't dispatch your CHGS (Centaur Hacker Goon Squad) to sprinkle bugs through out my feeble newbie programming attempts.

[@TheCodingTrain]

I appreciate the effort put into this comment! Made my day!

[@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.

[@xnick_uy]

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

[@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.

[@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.

[@ardenchilders3618]

Can you load a sound into the web editor?

[@sabyasachisamadder3612]

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

[@letswatchcartoons181]

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

[@jazzediceberg1175]

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

[@01234567897298]

How often do you answer questions?

[@nikkonikko371]

I recommend you to look at his discord server

[@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.

[@danmusiceasy]

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

[@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..

[@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

[@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

[@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!!

[@alyssamaldonado3881]

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

[@alyssamaldonado3881]

I'm on a Macbook.

[@mridulmishra8166]

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

[@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

[@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!

[@eotikurac]

chrome won't load the song but it's fine in firefox and in the p5 editor browser window :/

[@TheCodingTrain]

strange, different browsers have different file format compatibility.

[@zacharyrowden7692]

same here :(

[@hatzygonal]

yah was puzzled with the same thing before checking out the comments, but I made it work in the "chrome incognito mode" meaning that we might have some plugins that are blocking the audio loading

[@anujmehta5708]

this is bacause of 'cross origin' errors. Running the code using a local server will do the job. For creating a local server visit github.com/processing/p5.js/wiki/Local-server

[@a.s.4309]

Thank you!

[@herrbanane]

Where do I have to put the sound file?

[@johncerpa3782]

Great video

[@nicolasarbio820]

Daniel! Is this library available on Processing?

[@nicolasarbio820]

@Jonah MannOk! Thanks!

[@tanishqsrivastava6496]

please dan, please reply, it gives an error loadSound is not defined. and i am doing this on a local server

[@dairbaidauletov3620]

be sure to include p6.sound.js library in your html

[@tanishqsrivastava6496]

I have

[@dairbaidauletov3620]

had the same problem, then realized that my file is wrong. make sure it looks like this file github.com/processing/p5.js-sound/blob/master/lib/p5.sound.js

[@tanishqsrivastava6496]

Trying it right now.

[@youmah25]

what editor are u using if i may???

[@alok1166]

He is using the Atom editor

[@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

[@cookiecutter5162]

Doesn't work in Chrome for some reason...

[@Arseny97MC]

yep, not working for me either :( I've tried using the latest version of the p5 libraries, but it doesn't work in chrome.

[@mayowadan]

There’s a thing with new permissions that don’t let sounds play before people interact with a page. Sounds like that’s the problem you’re having