title
17.1: Loading and Playing - p5.js Sound Tutorial

description
In this new video series, I discuss the p5.js sound library to work with audio. In this first part, I demonstrate how to load a sound file and play it in the browser. Support this channel on Patreon: https://patreon.com/codingtrain Send me your questions and coding challenges! Contact: https://twitter.com/shiffman p5.js sound library reference: https://p5js.org/reference/#/libraries/p5.sound Source Code for the Video Lessons: https://github.com/shiffman/Video-Lesson-Materials p5.js: https://p5js.org/ Processing: https://processing.org For More Sound in p5.js videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6aFcVjlDAkkGIixw70s7jpW Music track: http://freemusicarchive.org/music/The_Columbians/Antique_Phonograph_Music_Program_08252015/Just_Like_A_Rainbow Help us caption & translate this video! http://amara.org/v/Qbrx/ 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

detail
{'title': '17.1: Loading and Playing - p5.js Sound Tutorial', 'heatmap': [{'end': 330.685, 'start': 309.344, 'weight': 1}, {'end': 486.32, 'start': 473.369, 'weight': 0.77}], 'summary': "Tutorial series '17.1: loading and playing - p5.js sound tutorial' covers the basics of loading sound files in p5js, emphasizing the use of preload event, global variables for sound playback, and interactive sound manipulation with functions like set volume and creating sliders.", 'chapters': [{'end': 128.299, 'segs': [{'end': 33.343, 'src': 'embed', 'start': 7.267, 'weight': 0, 'content': [{'end': 12.751, 'text': 'Hello and welcome to a P5JS video about sound.', 'start': 7.267, 'duration': 5.484}, {'end': 15.192, 'text': 'That was kind of pathetic but I just had to do it.', 'start': 12.771, 'duration': 2.421}, {'end': 16.933, 'text': "I'm going to mute this right now.", 'start': 15.492, 'duration': 1.441}, {'end': 23.397, 'text': 'What I have here is a P5JS sketch that is playing a sound file,', 'start': 17.854, 'duration': 5.543}, {'end': 33.343, 'text': "and this is a first video in a playlist series of videos about working with sound in P5JS, where we'll cover things from playing back music,", 'start': 23.397, 'duration': 9.946}], 'summary': 'Introduction to p5js sound tutorial series.', 'duration': 26.076, 'max_score': 7.267, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Pn1g1wjxl_0/pics/Pn1g1wjxl_07267.jpg'}, {'end': 87.107, 'src': 'embed', 'start': 57.889, 'weight': 1, 'content': [{'end': 60.732, 'text': 'There are lots of different sound file formats.', 'start': 57.889, 'duration': 2.843}, {'end': 66.718, 'text': "I'm going to use a sound file format, mp3, and the function that I want to use is in.", 'start': 60.732, 'duration': 5.986}, {'end': 69.601, 'text': 'in p5 is this function called load sound.', 'start': 66.718, 'duration': 2.883}, {'end': 72.123, 'text': 'So what load sound does?', 'start': 70.262, 'duration': 1.861}, {'end': 75.804, 'text': 'and in here the argument that load sound requires is a file name.', 'start': 72.123, 'duration': 3.681}, {'end': 79.024, 'text': 'You can actually give it an array of several different file names.', 'start': 75.844, 'duration': 3.18}, {'end': 87.107, 'text': 'if you have that same sound file in multiple formats and then different browsers based on what formats are compatible,', 'start': 79.024, 'duration': 8.083}], 'summary': 'The p5.js function loadsound uses mp3 format; it can accept an array of file names for multiple formats.', 'duration': 29.218, 'max_score': 57.889, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Pn1g1wjxl_0/pics/Pn1g1wjxl_057889.jpg'}], 'start': 7.267, 'title': 'Loading sound in p5js', 'summary': 'Covers basics of loading a sound file in p5js, with a mention of topics to be covered in the series and an example of loading an mp3 file for playback.', 'chapters': [{'end': 128.299, 'start': 7.267, 'title': 'Loading and playing sound in p5js', 'summary': 'Covers the basics of loading a sound file in p5js, with a mention of topics to be covered in the series and an example of loading an mp3 file for playback.', 'duration': 121.032, 'highlights': ['The chapter introduces a playlist series covering various aspects of working with sound in P5JS, such as music playback, sound effects, synthesis, melodies, beat detection, and cueing (quantifiable data: series coverage)', "The function 'load sound' in P5JS requires a file name as an argument, which can be an array of different file formats to ensure compatibility across browsers (quantifiable data: function usage)", "An example of loading an mp3 file for playback in P5JS is demonstrated, using the 'load sound' function with an mp3 file named 'Just Like a Rainbow by the Colombian' from the 'play music' folder on the desktop (quantifiable data: file example)"]}], 'duration': 121.032, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Pn1g1wjxl_0/pics/Pn1g1wjxl_07267.jpg', 'highlights': ['The chapter introduces a playlist series covering various aspects of working with sound in P5JS, such as music playback, sound effects, synthesis, melodies, beat detection, and cueing', "The function 'load sound' in P5JS requires a file name as an argument, which can be an array of different file formats to ensure compatibility across browsers", "An example of loading an mp3 file for playback in P5JS is demonstrated, using the 'load sound' function with an mp3 file named 'Just Like a Rainbow by the Colombian' from the 'play music' folder on the desktop"]}, {'end': 381.318, 'segs': [{'end': 293.711, 'src': 'embed', 'start': 267.09, 'weight': 0, 'content': [{'end': 271.593, 'text': 'preload is not for just stuff that you want to happen have happened before setup.', 'start': 267.09, 'duration': 4.503}, {'end': 279.74, 'text': 'preload is only for things like loading files, loading date, loading media, loading things that you want to make sure are finished,', 'start': 271.593, 'duration': 8.147}, {'end': 281.021, 'text': 'loading before setup.', 'start': 279.74, 'duration': 1.281}, {'end': 286.666, 'text': 'p5 is a special way of handling this behind the scenes, but anything that you load load sound, load image,', 'start': 281.021, 'duration': 5.645}, {'end': 288.768, 'text': 'load video I mean load video is not a function.', 'start': 286.666, 'duration': 2.102}, {'end': 293.711, 'text': "I think it's create great video, but those types of things you can put in preload.", 'start': 288.768, 'duration': 4.943}], 'summary': 'Preload in p5 is for loading files, data, and media to ensure they are finished before setup.', 'duration': 26.621, 'max_score': 267.09, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Pn1g1wjxl_0/pics/Pn1g1wjxl_0267090.jpg'}, {'end': 336.446, 'src': 'heatmap', 'start': 309.344, 'weight': 1, 'content': [{'end': 316.689, 'text': 'and then I should be able to and let me just actually just rename the file to rainbow right now, just to make things a little bit simpler,', 'start': 309.344, 'duration': 7.345}, {'end': 317.43, 'text': 'looking at the code.', 'start': 316.689, 'duration': 0.741}, {'end': 325.564, 'text': "And now I'm going to unmute this tab and hit refresh.", 'start': 319.682, 'duration': 5.882}, {'end': 330.685, 'text': 'Look at that scratchy record sound.', 'start': 328.304, 'duration': 2.381}, {'end': 336.446, 'text': 'I should stop doing the dancing.', 'start': 330.805, 'duration': 5.641}], 'summary': "Renamed file to 'rainbow', experienced scratchy record sound.", 'duration': 27.102, 'max_score': 309.344, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Pn1g1wjxl_0/pics/Pn1g1wjxl_0309344.jpg'}, {'end': 365.968, 'src': 'embed', 'start': 340.307, 'weight': 1, 'content': [{'end': 348.373, 'text': "Now what I'm going to do actually is in the console here, since song is a global variable, I could just do that.", 'start': 340.307, 'duration': 8.066}, {'end': 353.138, 'text': 'Stop is a function that will stop a particular song from playing.', 'start': 348.673, 'duration': 4.465}, {'end': 356.442, 'text': 'And then I could also play it again.', 'start': 355.201, 'duration': 1.241}, {'end': 363.006, 'text': "I'll also mention here, Oh, oh, it's very loud.", 'start': 356.462, 'duration': 6.544}, {'end': 364.387, 'text': "It's very loud.", 'start': 363.586, 'duration': 0.801}, {'end': 365.968, 'text': 'So one thing that I think we should do.', 'start': 364.687, 'duration': 1.281}], 'summary': 'Demonstrating how to stop and replay a song in the console.', 'duration': 25.661, 'max_score': 340.307, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Pn1g1wjxl_0/pics/Pn1g1wjxl_0340307.jpg'}], 'start': 129.139, 'title': 'Loading and playing sound in javascript', 'summary': 'Explains the process of loading and playing sound in javascript using p5.js, emphasizing the use of the preload event and global variables for sound playback control.', 'chapters': [{'end': 381.318, 'start': 129.139, 'title': 'Loading and playing sound in javascript', 'summary': 'Explains the process of loading and playing sound in javascript using p5.js, highlighting the importance of using the preload event to ensure the sound file is loaded before playing it, and demonstrating the use of global variables to control sound playback.', 'duration': 252.179, 'highlights': ["The chapter emphasizes the significance of using the preload event in p5.js to ensure that the sound file is fully loaded before attempting to play it, as JavaScript operates on asynchronous callbacks, potentially causing issues if the file is not ready for playback. This is exemplified through the demonstration of using load sound within the preload event, enabling the successful playback of the sound file 'rainbow.mp3' after ensuring its complete loading, thereby providing a comprehensive understanding of handling sound playback in JavaScript.", "The explanation of utilizing global variables for controlling sound playback, exemplified by using the 'song' variable to stop and play the loaded sound file 'rainbow.mp3', offers a valuable insight into effectively managing sound elements within a JavaScript environment, showcasing practical implementation and enhancing the understanding of sound manipulation in programming."]}], 'duration': 252.179, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Pn1g1wjxl_0/pics/Pn1g1wjxl_0129139.jpg', 'highlights': ['The chapter emphasizes the significance of using the preload event in p5.js to ensure that the sound file is fully loaded before attempting to play it, as JavaScript operates on asynchronous callbacks, potentially causing issues if the file is not ready for playback.', "The explanation of utilizing global variables for controlling sound playback, exemplified by using the 'song' variable to stop and play the loaded sound file 'rainbow.mp3', offers a valuable insight into effectively managing sound elements within a JavaScript environment."]}, {'end': 1032.066, 'segs': [{'end': 417.994, 'src': 'embed', 'start': 394.831, 'weight': 0, 'content': [{'end': 402.381, 'text': 'I write more like a unicorn, a unicorna, a unicornar with a little horn and some purple hair perhaps would be nicer for me.', 'start': 394.831, 'duration': 7.55}, {'end': 403.342, 'text': 'That would be more appropriate.', 'start': 402.401, 'duration': 0.941}, {'end': 405.604, 'text': 'Really gone off the deep end here.', 'start': 404.484, 'duration': 1.12}, {'end': 407.866, 'text': "so what I want to do actually, you know we're here.", 'start': 405.604, 'duration': 2.262}, {'end': 411.069, 'text': 'I have an excuse now to also show you that I can say other.', 'start': 407.866, 'duration': 3.203}, {'end': 417.994, 'text': 'I can call all sorts of other functions on the particular song variable, like set volume, and I could say 0.5.', 'start': 411.069, 'duration': 6.925}], 'summary': 'Describing writing style as a unicorn, demonstrating calling functions on a song variable.', 'duration': 23.163, 'max_score': 394.831, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Pn1g1wjxl_0/pics/Pn1g1wjxl_0394831.jpg'}, {'end': 508.964, 'src': 'heatmap', 'start': 473.369, 'weight': 1, 'content': [{'end': 480.375, 'text': 'And then I could always say in draw now, song.setvolume, slider.value.', 'start': 473.369, 'duration': 7.006}, {'end': 486.32, 'text': 'So this would allow me to now, if I refresh this, I should get a slider here.', 'start': 480.855, 'duration': 5.465}, {'end': 488.802, 'text': 'And I can turn the volume off.', 'start': 486.84, 'duration': 1.962}, {'end': 495.553, 'text': 'I can make it louder.', 'start': 490.169, 'duration': 5.384}, {'end': 499.617, 'text': 'So this is good for me because now I can let this page run, and I can keep that slider there.', 'start': 495.573, 'duration': 4.044}, {'end': 507.623, 'text': "So there's a lot of possibilities in terms of making sound very quickly and easily interactive in the browser with a slider, a button, set volume.", 'start': 499.857, 'duration': 7.766}, {'end': 508.964, 'text': 'This is the basic idea.', 'start': 507.983, 'duration': 0.981}], 'summary': 'Using song.setvolume and slider.value, sound can be easily controlled and made interactive in the browser with a lot of possibilities.', 'duration': 28.109, 'max_score': 473.369, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Pn1g1wjxl_0/pics/Pn1g1wjxl_0473369.jpg'}, {'end': 585.858, 'src': 'embed', 'start': 557.197, 'weight': 2, 'content': [{'end': 559.118, 'text': 'first of all, you might have like 50 sound files.', 'start': 557.197, 'duration': 1.921}, {'end': 563.119, 'text': "You don't want the user to sit there and watch it loading for several minutes.", 'start': 559.118, 'duration': 4.001}, {'end': 565.26, 'text': 'You also might just want to have an animation start.', 'start': 563.119, 'duration': 2.141}, {'end': 565.72, 'text': "It's fine.", 'start': 565.32, 'duration': 0.4}, {'end': 568.2, 'text': "if it takes a bit to load, It'll play once it's loaded.", 'start': 565.72, 'duration': 2.48}, {'end': 573.542, 'text': 'so this is the idea of a callback.', 'start': 568.2, 'duration': 5.342}, {'end': 583.736, 'text': "So, instead of using preload, there's a way for you to have your sketch and animation begin immediately and allow yourself to then trigger an event,", 'start': 574.608, 'duration': 9.128}, {'end': 585.858, 'text': 'a callback, when the sound has finished loading.', 'start': 583.736, 'duration': 2.122}], 'summary': 'Use callbacks to trigger an event when sound finishes loading, avoiding long wait times for 50 sound files.', 'duration': 28.661, 'max_score': 557.197, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Pn1g1wjxl_0/pics/Pn1g1wjxl_0557197.jpg'}], 'start': 381.718, 'title': 'Fantasy creature identity crisis', 'summary': 'Delves into internet theories comparing the speaker to a centaur or unicorn, while addressing the idea of showing other abilities. it also covers interactive sound manipulation in p5.js, including functions like set volume, creating sliders, and using callbacks for sound loading.', 'chapters': [{'end': 411.069, 'start': 381.718, 'title': 'Fantasy creature identity crisis', 'summary': 'Discusses the internet theory comparing the speaker to a centaur or unicorn, with a preference for the latter, while addressing the idea of showing other abilities.', 'duration': 29.351, 'highlights': ['The speaker addresses the internet theory of being a centaur or unicorn, expressing a preference for the latter, with a mention of wearing shorts due to the hot weather.', 'The speaker humorously entertains the idea of being a unicorn with purple hair and a horn, adding a whimsical touch to the discussion.', 'The chapter concludes with the speaker expressing a desire to showcase additional abilities, indicating a broader purpose for the discussion.']}, {'end': 1032.066, 'start': 411.069, 'title': 'Interactive sound manipulation in p5.js', 'summary': 'Discusses interactive sound manipulation in p5.js, covering functions like set volume, creating sliders, using callbacks for sound loading, and manipulating sound with rate and pan sliders.', 'duration': 620.997, 'highlights': ['Using callbacks for sound loading The chapter explains using callbacks for sound loading, allowing the animation to begin immediately and triggering an event when the sound has finished loading.', 'Manipulating sound with rate and pan sliders The tutorial demonstrates manipulating sound with rate and pan sliders, explaining the range of values for rate and pan, and their impact on the playback speed and stereo positioning of the sound.', 'Creating sliders for interactive sound control The tutorial showcases the creation of sliders for interactive control of sound parameters like volume, rate, and pan, enabling the user to adjust these parameters in real-time.']}], 'duration': 650.348, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Pn1g1wjxl_0/pics/Pn1g1wjxl_0381718.jpg', 'highlights': ['The speaker humorously entertains the idea of being a unicorn with purple hair and a horn, adding a whimsical touch to the discussion.', 'The tutorial showcases the creation of sliders for interactive control of sound parameters like volume, rate, and pan, enabling the user to adjust these parameters in real-time.', 'Using callbacks for sound loading The chapter explains using callbacks for sound loading, allowing the animation to begin immediately and triggering an event when the sound has finished loading.']}], 'highlights': ["The function 'load sound' in P5JS requires a file name as an argument, which can be an array of different file formats to ensure compatibility across browsers", 'The chapter introduces a playlist series covering various aspects of working with sound in P5JS, such as music playback, sound effects, synthesis, melodies, beat detection, and cueing', "The explanation of utilizing global variables for controlling sound playback, exemplified by using the 'song' variable to stop and play the loaded sound file 'rainbow.mp3', offers a valuable insight into effectively managing sound elements within a JavaScript environment.", 'The tutorial showcases the creation of sliders for interactive control of sound parameters like volume, rate, and pan, enabling the user to adjust these parameters in real-time.', 'Using callbacks for sound loading The chapter explains using callbacks for sound loading, allowing the animation to begin immediately and triggering an event when the sound has finished loading.', 'The chapter emphasizes the significance of using the preload event in p5.js to ensure that the sound file is fully loaded before attempting to play it, as JavaScript operates on asynchronous callbacks, potentially causing issues if the file is not ready for playback.']}