title
Analyser Bars Animation HTML5 Audio API JavaScript Tutorial

description
Code: https://www.adamkhoury.com/JavaScript/video/Analyser-Bars-Animation-HTML-Audio-API-Tutorial Learn to create custom animated HTML5 Audio Analyser bar graphics that move to the frequency of the sound that is playing by using aspects of the new JavaScript HTML5 Audio API. You can customize the tiny script any way you like once you grasp the concept.

detail
{'title': 'Analyser Bars Animation HTML5 Audio API JavaScript Tutorial', 'heatmap': [{'end': 1032.442, 'start': 1015.624, 'weight': 1}], 'summary': 'This tutorial demonstrates creating custom html5 audio analyzer bar graphics using javascript html5 audio api, including initializing the mp3 player, utilizing the html5 audio api to programmatically add audio elements and create an audio context object, and implementing a frame looper function for graphic animation to achieve a dancing animated effect with 100 sound analyzer bars rendered at different heights.', 'chapters': [{'end': 351.12, 'segs': [{'end': 32.045, 'src': 'embed', 'start': 0.922, 'weight': 0, 'content': [{'end': 2.163, 'text': 'In this programming lesson,', 'start': 0.922, 'duration': 1.241}, {'end': 16.291, 'text': 'you can learn to create custom HTML5 audio analyzer bar graphics that move to the frequency of the sound that is playing by using aspects of the new JavaScript HTML5 audio API.', 'start': 2.163, 'duration': 14.128}, {'end': 21.674, 'text': "You can customize this tiny script that I'm going to offer any way you like once you grasp the concept.", 'start': 16.711, 'duration': 4.963}, {'end': 24.458, 'text': 'Before we begin the lesson,', 'start': 23.237, 'duration': 1.221}, {'end': 32.045, 'text': "let's take a look at our finished product so that you can evaluate whether or not you want to stick around for the whole video and get deeper insight about the script.", 'start': 24.458, 'duration': 7.587}], 'summary': 'Learn to create custom html5 audio analyzer bar graphics using javascript html5 audio api.', 'duration': 31.123, 'max_score': 0.922, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IBHpSkGZtNM/pics/IBHpSkGZtNM922.jpg'}, {'end': 240.994, 'src': 'embed', 'start': 210.334, 'weight': 1, 'content': [{'end': 211.835, 'text': "You'll see there's no audio element.", 'start': 210.334, 'duration': 1.501}, {'end': 214.237, 'text': "That's all going to be applied through our JavaScript here.", 'start': 211.936, 'duration': 2.301}, {'end': 223.363, 'text': "So the first thing in JavaScript is we're going to place a comment in that says create a new instance of an audio object and adjust some of its properties.", 'start': 214.938, 'duration': 8.425}, {'end': 232.108, 'text': "So here we're going to show a programmatic approach to creating an HTML5 audio element which is creating a new audio object.", 'start': 223.623, 'duration': 8.485}, {'end': 240.994, 'text': 'So we say var audio is equal to new audio object so this audio variable is a new instance of an audio object.', 'start': 232.209, 'duration': 8.785}], 'summary': 'Using javascript to create a new instance of an audio object.', 'duration': 30.66, 'max_score': 210.334, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IBHpSkGZtNM/pics/IBHpSkGZtNM210334.jpg'}, {'end': 300.31, 'src': 'embed', 'start': 279.238, 'weight': 2, 'content': [{'end': 291.145, 'text': "So if we have properties like this and we render this in our Chrome browser and you guys will want to test this in Chrome because a lot of the JavaScript that we're going to be writing is going to be Chrome specific for now,", 'start': 279.238, 'duration': 11.907}, {'end': 300.31, 'text': 'because a lot of HTML5 and new JavaScript APIs, and a lot of CSS3 for that matter, is not yet standardized until 2014..', 'start': 291.145, 'duration': 9.165}], 'summary': 'Chrome-specific javascript for testing properties and apis until 2014', 'duration': 21.072, 'max_score': 279.238, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IBHpSkGZtNM/pics/IBHpSkGZtNM279238.jpg'}], 'start': 0.922, 'title': 'Creating html5 audio analyzer', 'summary': 'Explains how to create custom html5 audio analyzer bar graphics using javascript html5 audio api, including creating the web document, adding css and javascript, and programming an html5 audio element with specific properties and adjusting variables for the analyzer.', 'chapters': [{'end': 351.12, 'start': 0.922, 'title': 'Creating html5 audio analyzer', 'summary': 'Explains how to create custom html5 audio analyzer bar graphics using javascript html5 audio api, beginning with the creation of the web document, adding css and javascript, and then programming an html5 audio element with specific properties and adjusting variables for the analyzer.', 'duration': 350.198, 'highlights': ['By using the new JavaScript HTML5 audio API, you can learn to create custom HTML5 audio analyzer bar graphics that move to the frequency of the sound playing, allowing for personalized script customization. (Relevance: 5)', 'The chapter describes the process of creating a new instance of an audio object and adjusting its properties in JavaScript, including setting the audio source, controls, loop, and autoplay, providing insights into practical implementation. (Relevance: 4)', 'The chapter emphasizes the importance of testing the JavaScript in Google Chrome due to its specific support for HTML5 and new JavaScript APIs, with a recommendation to adjust the code once HTML5 is standardized in all browsers, offering practical advice for testing and future-proofing the code. (Relevance: 3)']}], 'duration': 350.198, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IBHpSkGZtNM/pics/IBHpSkGZtNM922.jpg', 'highlights': ['By using the new JavaScript HTML5 audio API, you can learn to create custom HTML5 audio analyzer bar graphics that move to the frequency of the sound playing, allowing for personalized script customization. (Relevance: 5)', 'The chapter describes the process of creating a new instance of an audio object and adjusting its properties in JavaScript, including setting the audio source, controls, loop, and autoplay, providing insights into practical implementation. (Relevance: 4)', 'The chapter emphasizes the importance of testing the JavaScript in Google Chrome due to its specific support for HTML5 and new JavaScript APIs, with a recommendation to adjust the code once HTML5 is standardized in all browsers, offering practical advice for testing and future-proofing the code. (Relevance: 3)']}, {'end': 632.182, 'segs': [{'end': 377.316, 'src': 'embed', 'start': 351.4, 'weight': 3, 'content': [{'end': 358.324, 'text': 'that says initialize the mp3 player after the page loads all of its HTML into the window.', 'start': 351.4, 'duration': 6.924}, {'end': 362.707, 'text': 'so to do that, we simply type in window.addEventListener.', 'start': 358.324, 'duration': 4.383}, {'end': 365.188, 'text': "the load event is what we're listening for.", 'start': 362.707, 'duration': 2.481}, {'end': 374.394, 'text': "so when the windows fully loaded with all this HTML, We're going to run the function called initmp3player, which is short for initialize mp3 player.", 'start': 365.188, 'duration': 9.206}, {'end': 377.316, 'text': 'And then we use false as the capture state.', 'start': 374.814, 'duration': 2.502}], 'summary': 'Initialize the mp3 player after the window loads html, using window.addeventlistener and the load event, then run the initmp3player function.', 'duration': 25.916, 'max_score': 351.4, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IBHpSkGZtNM/pics/IBHpSkGZtNM351400.jpg'}, {'end': 452.735, 'src': 'embed', 'start': 398.41, 'weight': 0, 'content': [{'end': 407.555, 'text': "we're going to add the audio element that we programmatically created here to the audio box div sitting on the page.", 'start': 398.41, 'duration': 9.145}, {'end': 414.298, 'text': "So we're saying document dot get element by ID, audio box dot append child, the audio element.", 'start': 407.955, 'duration': 6.343}, {'end': 421.403, 'text': 'So basically an HTML5 audio element is programmatically going to be placed in this audio box div.', 'start': 414.518, 'duration': 6.885}, {'end': 430.271, 'text': "Then the next line we're assigning our context variable and we just make context equal to a new audio context object instance.", 'start': 421.683, 'duration': 8.588}, {'end': 434.015, 'text': "So we're creating a new audio context object instance.", 'start': 430.471, 'duration': 3.544}, {'end': 440.591, 'text': "And that's part of the new JavaScript HTML5 audio API.", 'start': 435.35, 'duration': 5.241}, {'end': 452.735, 'text': 'So if you want to really research the new JavaScript audio API, you could probably Google the term JavaScript audio API or HTML5 audio API.', 'start': 440.971, 'duration': 11.764}], 'summary': 'Programmatically adding html5 audio element to audio box div', 'duration': 54.325, 'max_score': 398.41, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IBHpSkGZtNM/pics/IBHpSkGZtNM398410.jpg'}, {'end': 530.001, 'src': 'embed', 'start': 502.334, 'weight': 2, 'content': [{'end': 506.296, 'text': 'That way our script knows where to render all of these cool animated bars.', 'start': 502.334, 'duration': 3.962}, {'end': 516.08, 'text': 'Then we assign the CTX variable to represent the canvas get context method and we pass an argument of 2D,', 'start': 506.876, 'duration': 9.204}, {'end': 521.422, 'text': 'or the parameter that we pass is 2D through the get context method for the canvas.', 'start': 516.08, 'duration': 5.342}, {'end': 530.001, 'text': "Now the last thing we do when we're initializing the MP3 player In order for it to have these cool animated analyzer bars.", 'start': 521.922, 'duration': 8.079}], 'summary': 'Script initializes mp3 player with cool animated analyzer bars.', 'duration': 27.667, 'max_score': 502.334, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IBHpSkGZtNM/pics/IBHpSkGZtNM502334.jpg'}, {'end': 582.367, 'src': 'embed', 'start': 553.89, 'weight': 4, 'content': [{'end': 558.398, 'text': 'So your audio object gets passed through the createMediaElementSource method.', 'start': 553.89, 'duration': 4.508}, {'end': 568.454, 'text': 'And, like I said, if any of these methods are boggling your mind, you guys can simply go and research the HTML5 audio API,', 'start': 560.046, 'duration': 8.408}, {'end': 571.137, 'text': 'which is all still experimental technology, until 2014..', 'start': 568.454, 'duration': 2.683}, {'end': 575.281, 'text': "You can see I'm using WebKit references here.", 'start': 571.137, 'duration': 4.144}, {'end': 577.763, 'text': 'That means you should be testing this in Chrome.', 'start': 575.721, 'duration': 2.042}, {'end': 582.367, 'text': "This won't work for you in Firefox or Internet Explorer until 2014.", 'start': 578.464, 'duration': 3.903}], 'summary': 'Use createmediaelementsource method for audio object in chrome for html5 audio api, experimental technology until 2014.', 'duration': 28.477, 'max_score': 553.89, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IBHpSkGZtNM/pics/IBHpSkGZtNM553890.jpg'}], 'start': 351.4, 'title': 'Mp3 player initialization and html5 audio api', 'summary': 'Covers initializing the mp3 player using window.addeventlistener, and provides an overview of the html5 audio api, including programmatically adding audio elements, creating an audio context object, and using createanalyzer method, highlighting its experimental nature until 2014.', 'chapters': [{'end': 396.209, 'start': 351.4, 'title': 'Initializing mp3 player', 'summary': 'Explains how to initialize the mp3 player after the page loads, using window.addeventlistener to run the function initmp3player when the window is fully loaded with all html.', 'duration': 44.809, 'highlights': ['The chapter explains how to initialize the MP3 player after the page loads, using window.addEventListener to run the function initmp3player when the window is fully loaded with all HTML.', 'The function called initmp3player is run when the window is finished loading all of its HTML.']}, {'end': 632.182, 'start': 398.41, 'title': 'Html5 audio api overview', 'summary': 'Explains the process of programmatically adding an html5 audio element to a div, creating an audio context object instance, and using the createanalyzer method to generate an analyzer node for rendering animated bars on a canvas, emphasizing the experimental nature of the html5 audio api until 2014.', 'duration': 233.772, 'highlights': ['The chapter explains the process of programmatically adding an HTML5 audio element to a div The script describes the addition of an HTML5 audio element to a div using document.getElementById and the appendChild method.', 'creating an audio context object instance The chapter details the creation of a new audio context object instance, a part of the new JavaScript HTML5 audio API.', 'using the createAnalyzer method to generate an analyzer node for rendering animated bars on a canvas The script explains the use of the createAnalyzer method to create an analyzer node, which renders animated bars on a canvas.', 'emphasizing the experimental nature of the HTML5 audio API until 2014 The chapter highlights the experimental nature of the HTML5 audio API until 2014, mentioning the need for WebKit references and the non-standardized nature of HTML5, CSS3, and new JavaScript in all browsers until 2014.']}], 'duration': 280.782, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IBHpSkGZtNM/pics/IBHpSkGZtNM351400.jpg', 'highlights': ['The chapter explains the process of programmatically adding an HTML5 audio element to a div using document.getElementById and the appendChild method.', 'The chapter details the creation of a new audio context object instance, a part of the new JavaScript HTML5 audio API.', 'The script explains the use of the createAnalyzer method to create an analyzer node, which renders animated bars on a canvas.', 'The chapter explains how to initialize the MP3 player after the page loads, using window.addEventListener to run the function initmp3player when the window is fully loaded with all HTML.', 'The chapter highlights the experimental nature of the HTML5 audio API until 2014, mentioning the need for WebKit references and the non-standardized nature of HTML5, CSS3, and new JavaScript in all browsers until 2014.']}, {'end': 1102.75, 'segs': [{'end': 661.549, 'src': 'embed', 'start': 632.643, 'weight': 2, 'content': [{'end': 636.886, 'text': "You'll just use the standardized syntax which is audio context.", 'start': 632.643, 'duration': 4.243}, {'end': 640.929, 'text': "Okay, so let's finish explaining what the source variable is getting applied to it.", 'start': 637.186, 'duration': 3.743}, {'end': 647.154, 'text': 'So after the source variable is assigned, the context.createMediaElementSource method,', 'start': 641.17, 'duration': 5.984}, {'end': 656.145, 'text': "then we run the connect method on the source And actually let's change this element's ID so we don't get confused.", 'start': 647.154, 'duration': 8.991}, {'end': 661.549, 'text': "Let's call it analyzer render in the canvas.", 'start': 656.566, 'duration': 4.983}], 'summary': 'Using standardized syntax, the source variable is assigned and connected to the context.createmediaelementsource method.', 'duration': 28.906, 'max_score': 632.643, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IBHpSkGZtNM/pics/IBHpSkGZtNM632643.jpg'}, {'end': 766.97, 'src': 'embed', 'start': 736.147, 'weight': 0, 'content': [{'end': 741.45, 'text': 'Now, this frame looper function is going to be looping at the default frame rate that the browser provides,', 'start': 736.147, 'duration': 5.303}, {'end': 746.053, 'text': 'which will be approximately 60 frames per second or 60 times per second.', 'start': 741.45, 'duration': 4.603}, {'end': 750.456, 'text': "Now let's go ahead and pop in our frame looper function and I'll explain every line within it.", 'start': 746.413, 'duration': 4.043}, {'end': 757.861, 'text': 'Now remember that every line within this frame looper function is going to be running many, many, many, many, many times per second.', 'start': 750.936, 'duration': 6.925}, {'end': 759.562, 'text': 'Very, very fast.', 'start': 758.481, 'duration': 1.081}, {'end': 766.97, 'text': "And the reason why it does that is because we're running the request animation frame method on the window object.", 'start': 760.242, 'duration': 6.728}], 'summary': "The frame looper function loops at the browser's default rate of approximately 60 frames per second.", 'duration': 30.823, 'max_score': 736.147, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IBHpSkGZtNM/pics/IBHpSkGZtNM736147.jpg'}, {'end': 907.419, 'src': 'embed', 'start': 880.269, 'weight': 1, 'content': [{'end': 886.394, 'text': 'So, every time frame looper function runs, which is many, many, many, many, many times per second,', 'start': 880.269, 'duration': 6.125}, {'end': 891.278, 'text': 'is going to be 100 bars rendered at different heights, many, many, many, many times per second.', 'start': 886.394, 'duration': 4.884}, {'end': 894.602, 'text': 'So basically this for loop is going to run 100 times.', 'start': 891.698, 'duration': 2.904}, {'end': 897.866, 'text': "And that happens so many times per second that it's mind-boggling.", 'start': 894.842, 'duration': 3.024}, {'end': 900.49, 'text': "That's how you get the nice dancing animated effect.", 'start': 897.926, 'duration': 2.564}, {'end': 907.419, 'text': "So for each bar that's being rendered in this loop, you want to give each one a different X position.", 'start': 901.151, 'duration': 6.268}], 'summary': 'The looper function runs many times per second, rendering 100 bars at different heights, resulting in a nice dancing animated effect.', 'duration': 27.15, 'max_score': 880.269, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IBHpSkGZtNM/pics/IBHpSkGZtNM880269.jpg'}, {'end': 1049.365, 'src': 'heatmap', 'start': 1015.624, 'weight': 1, 'content': [{'end': 1017.385, 'text': "So let's render this in Google Chrome.", 'start': 1015.624, 'duration': 1.761}, {'end': 1032.442, 'text': 'we get nice results and yours would run a lot smoother in your browser environment.', 'start': 1021.88, 'duration': 10.562}, {'end': 1038.503, 'text': 'mine, my animation might look a little choppy just in my video tutorial because of the frame rate.', 'start': 1032.442, 'duration': 6.061}, {'end': 1049.365, 'text': "so when you basically you run all this in your browser, you're gonna see how smooth it is Okay.", 'start': 1038.503, 'duration': 10.862}], 'summary': 'Rendering in google chrome results in smoother animation with higher frame rate.', 'duration': 33.741, 'max_score': 1015.624, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IBHpSkGZtNM/pics/IBHpSkGZtNM1015624.jpg'}], 'start': 632.643, 'title': 'Using audio context and sound analyzer bars', 'summary': 'Covers connecting audio source and analyzer using audio context, implementing a frame looper function for graphic animation, and creating sound analyzer bars with 100 bars rendered at different heights, achieving a dancing animated effect, and providing insights into audio-related software creation.', 'chapters': [{'end': 816.669, 'start': 632.643, 'title': 'Audio context and frame looper function', 'summary': 'Explains the process of using the audio context to connect the source and analyzer, and the implementation of a frame looper function for animating graphics to the audio frequency, running at approximately 60 frames per second.', 'duration': 184.026, 'highlights': ['The context.createMediaElementSource method is used to connect the source variable, followed by the connect method with the analyzer variable and then context.destination, enabling the audio processing chain. The context.createMediaElementSource method connects the source variable and the analyzer variable with the connect method, facilitating the audio processing chain.', 'The frame looper function is designed to animate graphics according to the audio frequency, running at the default frame rate of approximately 60 frames per second. The frame looper function is implemented to animate graphics based on the audio frequency, operating at the default frame rate of around 60 frames per second.', 'The request animation frame method is utilized to create a looping function for the frame looper, providing a fast and efficient animation mechanism compared to traditional setTimeout and setInterval methods. The request animation frame method is employed to establish a looping function for the frame looper, offering a more efficient animation mechanism than conventional setTimeout and setInterval methods.']}, {'end': 1102.75, 'start': 816.669, 'title': 'Creating sound analyzer bars', 'summary': 'Explains how to create sound analyzer bars using html5 and javascript, rendering 100 bars at different heights many times per second, achieving a dancing animated effect, and providing insights into creating various audio-related software.', 'duration': 286.081, 'highlights': ['The chapter provides insights into creating various audio-related software, such as DJ software, drum machines, and tracking software, using HTML5 and JavaScript and running them online.', 'The function loops to render 100 bars at different heights many times per second, achieving a dancing animated effect.', 'The process involves creating an array representing sound frequency data and using the getByteFreqData method to pass the array for rendering the bars in a canvas.', 'The tutorial emphasizes using HTML5 and JavaScript to create cool little analyzer bar graphics with the ability to change bar colors and sizes for different effects.']}], 'duration': 470.107, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IBHpSkGZtNM/pics/IBHpSkGZtNM632643.jpg', 'highlights': ['The frame looper function is designed to animate graphics according to the audio frequency, running at the default frame rate of approximately 60 frames per second.', 'The function loops to render 100 bars at different heights many times per second, achieving a dancing animated effect.', 'The context.createMediaElementSource method is used to connect the source variable, followed by the connect method with the analyzer variable and then context.destination, enabling the audio processing chain.']}], 'highlights': ['By using the new JavaScript HTML5 audio API, you can learn to create custom HTML5 audio analyzer bar graphics that move to the frequency of the sound playing, allowing for personalized script customization. 5', 'The chapter describes the process of creating a new instance of an audio object and adjusting its properties in JavaScript, including setting the audio source, controls, loop, and autoplay, providing insights into practical implementation. 4', 'The frame looper function is designed to animate graphics according to the audio frequency, running at the default frame rate of approximately 60 frames per second. 3', 'The chapter explains the process of programmatically adding an HTML5 audio element to a div using document.getElementById and the appendChild method. 2', 'The chapter details the creation of a new audio context object instance, a part of the new JavaScript HTML5 audio API. 2', 'The script explains the use of the createAnalyzer method to create an analyzer node, which renders animated bars on a canvas. 2', 'The chapter emphasizes the importance of testing the JavaScript in Google Chrome due to its specific support for HTML5 and new JavaScript APIs, with a recommendation to adjust the code once HTML5 is standardized in all browsers, offering practical advice for testing and future-proofing the code. 1', 'The chapter explains how to initialize the MP3 player after the page loads, using window.addEventListener to run the function initmp3player when the window is fully loaded with all HTML. 1', 'The function loops to render 100 bars at different heights many times per second, achieving a dancing animated effect. 1', 'The context.createMediaElementSource method is used to connect the source variable, followed by the connect method with the analyzer variable and then context.destination, enabling the audio processing chain. 1', 'The chapter highlights the experimental nature of the HTML5 audio API until 2014, mentioning the need for WebKit references and the non-standardized nature of HTML5, CSS3, and new JavaScript in all browsers until 2014. 1']}