This gives detailed explanations on each of the options. If you are confused on what something does or want more specifics this is the place to look.

The load option has been revamped slightly in version 1.1.0 to allow for built-in default presets. Users can still make and load custom presets as they could before. Presets from older versions should work with newer versions. The save option saves most of the options into a text file. The text file can be loaded and the values for each of the options will be set to what was saved. Images and music files that are selected however are not saved in the preset. You will have to manually choose them again. This is useful if you plan on making many videos with the same visualizer. You can have all the positioning, sizing, and other options saved for future videos. You could also use it to share presets with others by giving them the text file.

This lets you zoom the visualizer in or out. This is helpful if you want to make a video at a high resolution. It allows you to see everything without scrolling. This has no effect on the video recording. The video will always be the original size.

This is the width and height (in pixels) of the video output and the preview that you see on the right hand side (which you currently can't see because you are reading the documentation). I have been able to record at 1920x1080 at about 60 FPS using Chromium. This will vary depending on your computer and the browser you are using. You might be able to go higher if your computer can handle it. Keep in mind there are video size limitations that are explained on the limitations page in the documentation.

This is the max frames per second the video will record at. According to Mozilla, "If not set, a new frame will be captured each time the canvas changes; if set to 0, a single frame will be captured." That means leaving it blank will result in the FPS being as high as possible, but it can still fluctuate and doesn't mean a steady FPS. Setting a max FPS also does not guarantee the FPS will stay at the maximum set. Another consideration is that the audio visualizer animation is being drawn using requestAnimationFrame which will stay around the refresh rate of your monitor/computer. Most displays/computers are 60hz meaning it refreshes 60 times per second. So setting a max FPS above this will not lead to any higher FPS. Same goes for not setting a value. It wouldn't go above the refresh rate of the monitor.

This is a solid color chosen to be the background color of the video. The default is black.

This is the image that is chosen that will be behind the audio visualizer. It is drawn on top of the background color so if the image isn't large enough to fill the video width or height you will see the background color behind it. Also if the image is larger than the video width or height the overflow is clipped off. I would recommend using an image that is the same size or less than the video width and height. Forcing it to use a huge image that overflows most likely results in an unnecessary performance loss.

This image is drawn on top of the visualizer, the background, and background color. It is useful if you want something, such as a logo, to be in front of the visualizer. When you select a foreground image you will also be able to control the positioning of the image. By default the image is perfectly centered.

This is the music that the visualizer will use to making the visualization. The supported formats will depend on the browser. If a browser is open source it may not have the ability to play proprietary formats such as MP3. You can always convert to OGG or some other supported format if need.

This is the type of visualizer that will be used. There are a few different choices. When you select a visualizer type the options below it will change to hide or show only options that can be used for each visualizer. To learn more about each visualizer you can check out the visualizer types page.

This option is only available for some of the visualizer types. What it means is the bars are "aligned" by either the bottom, middle, or top of the bars. If you align by the bottom it means when the bars increase in height they would move upwards giving it the appearance that the bars are aligned by the bottom. Middle means the bars appear to be centered no matter what height. Top would mean they are aligned by the top and would move downward.

This option is only available for some of the visualizer types. It sets the cap style for the bar/line. The default option is square. The rounded option adds a half circle to the top and bottom of the bar/line making it look rounded. Keep in mind that the rounded cap is a perfect half circle. When you increase the width of the bar/line the circle has to become bigger and makes the bar/line appear much taller than when the line cap is set to square.

This option is only available for some of the visualizer types. It specifies how the canvas should be drawing new objects on the screen based on the pixels that exist below it. People familiar with photo editing probably already have used this at some point where you choose how the layer above blends in with the layer below. So keep in mind that your background image is going to play a big role in how a composite mode will look. Using the darken option will look good on light backgrounds, the lighter option will look good on darker backgrounds, etc. Here are great examples provided by Mozilla on what each option looks like: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

This option is only available for some of the visualizer types. It will take the visualizer and form it into the specified shape. Currently there is only one option, the circle shape.

This is the width of the shape in pixels. For the circle option (the only option currently) the shape size is the radius of the circle. It is not the diameter. If you want a circle that has a total width of 100 pixels then you would type in 50 since the diameter is twice the size of the radius.

This is where the majority of the options are for manipulating the chosen visualizer type. Many of the options are vaguely named to allow all the visualizer types to share the same options. Also keep in mind that means some of the options may look ok for one visualizer, but don't look right for another. An example would be setting the width to 10 (pixels). This would look ok for vertical bars visualizer but is very small for the time domain line or time domain bars visualizers. Another example is the min height option with the stretchy circle visualizer.

This is how many bars/parts/things the visualizer will have which will change to represent the frequency values in the music. For example setting the value to 10 would result in 10 bars with the vertical bars visualizer. Two of the visualizers, time domain line and time domain squares, do not use this due to them using all the frequencies making the option irrelevent.

This is the max height that the visualizer can change in pixels. For example, a max height of 100 with the vertical bars visualizer would mean that the height of any bar would not change more than 100 pixels.

Just like the max height sets the max height for each of the bars/parts/things that move, this sets the minumum height. I guess you could just call it height instead of min height. The way it is used is slightly different depending on the visualizer type. Min height does not affect the max height. If you have a max height of 100 and a min height of 100 the max height would be in addition to the min height allowing for a total height of 200 or less.

Once again it's a little vague that way it can be applied and used for each visualizer type. It will generally mean the width of each of the bars/parts/things that are representing the frequencies or the entire width of the visualizer.

This is used only for the 3D bars visualizer. It is the depth of the bars.

This used to be called "slope" but was changed in version 1.1.0 to be used for other visualizers and not just the 3D bars visualizer. In the 3D bars visualizer it is the angle/tilt of the bars which give the 3d looking effect and works best with a number between 1 and 10. The spinning triangles also uses this. This is the rotation amount for each triangle.

This is the minimum rotation speed for the visualizer. Each visualizer may use the number differently. The number doesn't necessarily mean the amount of pixels it is moving.

This is the maximum rotation speed for the visualizer. Each visualizer may use this differently. Some may associate the speed with the height of something or the combined movement of each bar/part/thing that is moving. In some cases where a visualizer only needs a constant rotation, the max rotation speed will not be available. Only the min rotation speed would be available.

This is the amount of space in pixels between each of the bars/parts/things.

Some visualizers need two spacing parameters. This is the same as spacing except it handles the spacing of something else. Currently the block bars visualizer is the only one to use it. It uses it to specify the vertical spacing between the blocks.

These are the values in pixels on where to move the center point of the visualizer type. By default most of the visualizer types will be automatically aligned to the exact center of the video. Changing the value of position top to a positive number will move the visualizer down that many pixels. Changing the value of position top to a negative number will move it up that many pixels. Changing the value of position left to a positive number will move the visualizer to the right that many pixels. Changing the value of position left to a negative number will move it left that many pixels. This may seem opposite at first but isn't. Think of them as the position from the top and the position from the left. The very top left corner coordinates is 0,0. Moving to the right or down is a positive movement. Moving up or to the left is a negative movement.

This is the rotation of the visualizer in degrees. The rotation is only applied to the visualizer, not the background image or anything else. A value of 360 would result in a full circle and look exactly the same. A value of 180 would result in a half circle rotation. It can accept positive and negative values.

The offset is the change in vertical positioning of the next bar/part/thing from the previous bar/part/thing. For example, setting it to a value of 2 when using the vertical bars visualizer type will make each bar go down 2 pixels lower from what the previous one was. It's only purpose is to help add more customization to your visualizer. Values can be both positive and negative and are in pixels.

This is a bit hard to explain. Basically it "cuts off" any frequency value that is equal to or less than the cutoff value. For example, if you have a max height of 100 the most that a frequency could change would be 100. If you set a cut off of 50, nothing would change until the frequency was above 50. So with a max height of 100, cutoff of 50, and a frequency change of 60 would result in the bar/part/thing moving only 10 pixels due to only being 10 above the cutoff. This is also pairs up nicely with the next option called multiplier.

As explained in the cutoff description, this option pairs up nicely with the cutoff. The multiplier is a number that the frequency value is multiplied by after the cutoff is applied. So with a max height of 100, a cutoff of 50, and if the frequency was 60 you would get 10. It would then get multiplied by whatever number the multipier is set to. If the multiplier was set to 2 it would result in 10 times 2 = 20. This is useful when used with the cutoff because you can make it so small changes are cut off and anything larger will be multiplied resulting in the visualizer reacting more towards large changes rather than slower small changes. Try experimenting to see what I mean.

The music that is playing goes through a FFT (fast Fourier transform) of 512. FFT is what transforms sound into frequency domain data. Something about how the FFT works means half of the 512 is mirrored leaving 256 different frequencies. Of those 256 most songs won't have frequencies on the high end appear. This means the min frequency and max frequency are a range between 0 - 256. The default max frequency is 160 because most songs I tested didn't go beyond it. If you want to set it higher you can. Don't be fooled by the simplicity of the min and max frequency. They are very useful for getting your visualizer to react to the parts of your music the way you want it to. Keep in mind I'm not very knowledgable on how the FFT works so don't quote me on anything.

The fill type is the main color of the visualizer. It has the choices of a solid color, a vertical gradient, horizontal gradient, and a user specified image. You can create neat effects using an image as a fill type. For example you could use the vertical bars visualizer type and make an image that has rainbow stripes so each bar would line up on a different color. You could also put your logo as a fill type so when the bars go up you would see a part of the logo. If the majority of the bars go up you would see most of it making it an interesting effect.

It's the opacity/transparency of the fill type.

Same thing as the fill type except it is an outline. It has the choices of a solid color, a vertical gradient, horizontal gradient, and a user specified image.

This is the thickness of the outline in pixels.

It's the opacity/transparency of the outline type.

This page lists each of the visualizer types and how the options work with each of them.

This a very common visualizer type that I'm sure many are already aware of. The visualizer is a bunch of vertical bars that change height according to different frequencies. Despite the name implying the bars are only vertical, you can use the rotation option to specify in degrees the angle of rotation for the bars. You can of course use that option on any visualizer, but I wanted to point it out. The bars can also be aligned into a circle shape and you can choose how the bars will vertically align. They can vertically align by the bottom, middle, or top.

It's very similar to vertical bars except that the bar is divided into blocks. A block will only appear when the frequency value is equal to or higher in value. Keep in mind the vertical spacing between each block is included in the height of the blocks. I'll give an example. If the max height is 100, the min height of each block is 10, the vertical spacing between each block is 10, and the frequency value is 36, then the bar would have two blocks drawn because the first block counts as 10 + the spacing above it is 10 + the next block above the spacing is 10 for a total of 30. The extra 6 left in the 36 is not rounded up and doesn't do anything.

Despite the name, these aren't actually 3D. It's pseudo 3D. Each bar is made by drawing 3 shapes that when put together look like a 3D bar. Bars are drawn starting with the first bar on the left and the last bar on the right. That means bars that are on the left of another bar will always appear to go behind that bar that is to the right of it. If you mess with the options to make it appear that a bar on the left should be going in front of the bar that is to the right it will look wrong because it will instead be going behind it. I would also recommend using the outline option to make each bar easier to see. In the future I might make it so each side of the bar is automatically "shaded" lighter, darker, etc. Currently when you pick a color it's only a flat color which doesn't look very 3D. Using an outline helps distinguish each side.

The stretchy circle is made of quadratic curves. The curves stretch up and down according to the frequency value. The amount of quadratic curves depends on the "how many" option. The min height changes the height/curvature of each quadratic curve. If you want it to look like an actual circle when it isn't being stretched you will want to change the min height until it looks round. The value for the min height will depend on how many curves and what the width of the circle.

Unlike the other visualizers, the time domain line uses time domain data instead of frequency values hence the name time domain line. It is made of several points that represent a real time wave form of the music. This particular visualizer draws a line between the points. The default value when nothing is playing is 0 which is vertically centered. Values can move downward or upwards. The min height is used for specifying the thickness or height of the line. The width is used for the length of the line.

It's very similar to the time domain line visualizer. It is made of several points that represent a real time wave form of the music. This particular visualizer draws small squares on each the points. The default value when nothing is playing is 0 which is vertically centered. Values can move downward or upwards. The min height is used for specifying the thickness or height of the line. The width is used for the length of the line.

This visualizer was originally made by Willian Justen (http://willianjusten.com.br/). Permission was given to me to modify his code and include it in this project. The visualizer is a bunch of triangles that grow in size similar to how vertical bars move up and down. The triangles are centered and overlap each other. The triangles also spin according to the min rotation speed and the max rotation speed. The min rotation speed is the speed that the triangles will spin when all the triangles have a frequency value of 0 (meaning the triangles are all at their min height. The max rotation speed is the speed that the triangles will spin when all the triangles have their frequency value at the max (meaning the triangles are all at their max height). This visualizer can also take advantage of the composite mode option due to the triangles overlapping. You can read more about the composite mode option on the option descriptions page.

I thought of this visualizer when looking at what other people have made. I started to realize that I overlooked some potential in audio visualizers that react to size and not just motion. This visualizer is actually very simple. It's a bunch of circles that are overlapping and move outwards in a circular shape. The gimmick is that the circles also increase in size the further they move away from the center. I recommend playing around with the how many option and the min frequency and max frequency. These three options have a large impact on how it will look.

You are probably wondering why the visualizer is named what it is. That's easy. It was made by a user called InternetGB (AKA Internet Good Boy - https://www.youtube.com/user/Jordan657945). Permission was given to me to modify his code and include it in this project. It's hard to put a name on his visualizer because it's simple yet unique. The best I can describe it is a circle that has bars all around it. The circle changes size depending on the values of the bars and it also slightly moves it's position according to the bar heights. When a bunch of bars on one side move it pushes the circle the opposite direction. If all the bars are relatively the same height the circle stays in the middle. The other interesting concept is when the circle has a large enough change in size a shock wave ring expands out from the circle. In essence it tries to act as a bass/kick detector and make a shock wave when the bass/kick makes a large change. A shock wave disappears once it goes off screen. Only one shock wave can exist on the screen at a time. If a shock wave would be made while another already exists it will be ignored.

Because this uses only HTML, CSS, and JavaScript, there are a few caveats that you need to know about before using this program/software.

• Edit: Some changes were made in version 1.1.0 that have improved the recording quality in Firefox. However, certain options such as many layers of transparency have compression artifacts while Chrome/Chromium does not. I'm hoping that Firefox will eventually improve their recording quality. Original: The recorded video quality in Chrome/Chromium at this point in time seems to be much better than Firefox. Firefox has a lot of compression artifacts. I have not experienced this with Chrome/Chromium.
• The browser you use must support the canvas, MediaRecorder, and captureStream for recording the canvas. I recommend Chrome/Chromium version 53 and higher or Firefox version 48 or higher. In Chrome versions 50 and 51 can record only video (no audio) with chrome://flags/#enable-experimental-web-platform-features enabled. That same flag can be set in Chrome version 52 to enable audio recording in addition to video. It also appears the latest versions of Opera might have support? Mobile versions of browsers will have different support than PC versions. The only mobile browser I am aware of that might have support is the latest Chrome version on Android (version 59 I think?).
• When recording, the browser stores the video as a blob file in memory (RAM). That means you need to have enough free RAM on your computer to hold the video while recording. (I could be wrong on this. From what I tested you needed to have RAM to hold it while others have said it should start writing to a paging file if you don't have enough. This most likely varies depending on the browser. I would just recommend having enough free RAM or experiment at your own risk.)
• Browsers limit the the max size of blob files. Clearly you don't want websites to be able to take up all your RAM. Chrome/Chromium seems to have a limit of 500MB. Firefox supposedly has a limit of 700MB although some have said they had blob files larger than that. The point is your video will have to stay in these ranges. I suggest you record a short amount of your video and see how large the file is. That will give you an idea how long of a video you would be able to safely record. The size of the video will greatly depend on the video width and height and how much motion or movement is in the video. Keep in mind there is no warning if the size goes over the limit.
• Browsers have a mind of their own regarding removing blob files after they have been downloaded. You may have to close out of the page or the browser you are using for it to remove the blob file from RAM. If you plan on recording multiple videos I would suggest closing out of the page/browser or looking at your computers RAM usage to make sure you have enough free to store the next video.
• Recording the video is done in real time. This means it will take you 2 minutes to record a video for a song that is 2 minutes long. This actually is way faster than my previous recording methods so I don't think it's that bad of a limitation. It was more like an improvement.
• Because the video is recorded in real time, you need to keep the page open. You can't go to a different tab or minimize the browser. Browsers are smart in that they don't update as many things on a page when it isn't active. This will mess up the recording.
• Another caveat with the real time recording is that your computer has to be able to keep up with the animation and recording it. If your computer hits a lag spike you will notice it in the video. I recommend closing out of all other programs to help prevent lag spikes and bottlenecks when recording.
• Choosing the option to include the audio in the recording has a noticable impact on performance and video quality. I highly recommend recording without the audio and simply merging the video and audio file in either video editing software or something else capable of merging and audio file with a video file.

These aren't questions that have been asked but rather common questions I expect people to have.

There are a few steps that can be taken to help increase what your computer is capable of recording. First thing is to make sure other programs and tabs are closed. Recording is done in real time and if another program is hogging your computer resources then the video quality will reflect that. Second thing is to try leaving the max FPS option blank. I have noticed setting a max FPS value made recording slightly more choppy. Thirdly is to record the video without including the audio. Including the audio in the recording requires the browser to do more work because it has to capture the audio that is playing in real time and record it along with the video. It has a noticable effect on FPS and video quality. You can always merge the video and the audio file with another program such as a video editor of some sort after recording. Lastly is to try switching from Firefox to Chrome/Chromium or from Chrome/Chromium to Firefox. Currently Chrome/Chromium seems to have the best performance and video quality. That could change with future updates.

Please make sure that you can reproduce the bug or at the very least have a good idea on what conditions are needed to cause the bug and send me a message on YouTube (www.youtube.com/user/isaiah658). If it is a coding error you can message me to let me know as well. I do try my best to stay up to date on coding practices, but do keep in mind this is only a hobby project. People make mistakes.

It's the same reason you can't set a minimum FPS with any recording software. If your computer can't keep up with rendering frames then it simply can't keep up.

Please read the limitations page before using this program/software. If you are following everything and still having issues then you can send me a message on YouTube (www.youtube.com/user/isaiah658).

At this point in time I simply want to fix any bugs and make the features that I have added work. I'm not opposed to adding more visualizer types later in the future.

I'm open to ideas. Don't feel offended if I don't add it though. I'm very busy and any time I have will go towards correcting bugs before I add more features.

I have personally made a few songs and upload them to YouTube. Everyone had these audio visualizers in their videos and I didn't have anything. I looked and there are very few free options. Most were using expensive video rendering software. I wanted a simple way to just make audio visualizer videos. I also love using HTML, CSS, and JavaScript (website coding languages)! I then started to wonder if you could make such a thing with those. As you can see this was the end result. :)

Too long. Seriously though I've easily spent over 200 hours researching, testing, fixing, and finding things. I originally was going to use whammy.js to record the video but it had way to many limitations to be useful. I then found another project based on the ideas of whammy.js but it also suffered from being slow and having bad quality due to needing to use webp pictures and making it into a webm video. After more days of searching I stumbled upon this glorious thing called MediaRecorder which is built right in to Firefox and Chrome/Chromium. I also think it became part of the web standards or something so more browsers will most likely implement it at some point. I'm very grateful for Firefox and Chrome/Chromium for adding it so early. The performance and video quality is WAY better than anything I was using. This is also the first project that I've worked with the canvas. At first I hated it. After awhile it because easier.

Version 1.1.1

This project was made by isaiah658. It was made as an experiment to see if it was possible to use only HTML, CSS, and JavaScript to make an audio visualizer video maker. This project would not have been possible without the help of many blog posts and other examples that got me started with how to get frequency data and how to use it. Both apprentice.craic.com and patrick-wied.at were a huge help! Also huge thanks to Kaiido on stackoverflow for a workaround to make audio recording work in Firefox.

An additional thank you goes out to Willian Justen and InternetGB for allowing me to use and adapt their visualizers into this project. Willian Justen made the original spinning triangles visualizer and InternetGB made the InternetGB visualizer (it's unique and hard to name so I named it after the creator).

This project also uses the font called Nunito made by Vernon Adams. It is licensed under the SIL OPEN FONT LICENSE Version 1.1. The license is included in the font folder or you can easily find and read it online.

This project uses FileSaver.js to save the recorded video file and the preset file. It is licensed under the MIT license. The license is included in the js folder or you can easily find and read it online. You can view the project on https://github.com/eligrey/FileSaver.js.

Now for the project licensing. The license I have chosen for this project is the MIT license. The license is included below and also is in the license.txt file. This obviously does NOT include FileSaver.js and the font that are both listed above. Those are under their own license (FileSaver.js just so happens to use the MIT license as well).

Copyright 2017 isaiah658

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.