Help for AnimateMusic.com Contents QuickStart Application Overview Sources for Images and Videos Animation Scripts       Animation Commands       Transitioning Between Effects       Animation Components Effects JSON Format Quick Start The quickest way to exemplify this website's features is to play the 11 Sample Animations, which you can select on the right section of the Home page. If you are a registered user, you can see all the AnimateMusic Scripts which created those Animations, by selecting the Sample Scripts from the top of the Admin page. The best way to learn the AnimateMusic Scripting Language is to make changes to the Sample Scripts, and see what happens when you click [Play Animation] (on the Admin page). For example, here are a few simple changes you can easily make to any of the 11 Sample Scripts: On the 2nd line, change the youtube_id to hear the audio from a different video. On any line that contains "style_type": "color", change the color name that is assigned to "style_value". On any line that contains "image_num": 1, "url", change the "url" to any other image URL (see the section below which describes Sources for Images and Videos). Application Overview This website lets you create animations that are in sync with the audio of any YouTube video. This is done by selecting the bpm (Beats-per-Minute) of the audio, and indicating the number of beats that should elapse before each animation command is performed. While the animation and audio are playing, you may create an .mp4 video file, by pressing the keys that are shown on the Admin page. In your animations, you may use any images or videos found anywhere on the internet, by simply including their URL's in your AnimateMusic Script. Sources for Images and Videos The following two websites contain thousands of images and videos that you can use in your animations: For images: animatedimages.org: Scroll to the very bottom of that website to see hundreds of image categories. For example, this page has images of cars: Car Images These instructions will allow you to find the URL for any image on this site: Move your mouse over an image that you like. If a magnifying glass icon appears, then click it. On the next page, scroll down (under "Link Image") until you see a heading for: "HTML: (for homepages/blogs/e-mails/etc..)". To the right of that heading, click the [Copy] button. This will copy some text to your clipboard. In a text editor, paste the text that you copied. Find a URL that begins with https:// and ends with .gif. That is the URL you can use for the image url (as described below). For videos: Pexels.com: This website has many videos that can be used with bg_video (background video) components. Enter a search term on their home page. Here is their page for Techno Videos. Right-click a video, and choose Inspect. On the Chrome Console screen that is shown, right-click the highlighted area of the source code (which begins with "video class"), and select Copy/Copy element. In a text editor, paste the text that you copied. Find a URL that begins with https:// and ends with .mp4. That is the URL you can use for the bg_video url (as described below). Here are a few other websites that have URL's for images and videos: giphy.com vsgif.com purepng.com freepngimg.com Pixabay.com Animation Scripts An Animation Script contains a list of commands that control the animation that is shown on the screen. Animation Commands Each command in an Animation Script contains these sections: beat_actual or beat_relative: The first parameter allows the script to remain in sync with the music. beat_actual indicates the specific beat when the command will be performed. beat_relative indicates the number of beats that will pass before the command is performed. When beat_relative is 0, the command is immediately performed. If bpm is 120 and beat_relative is 4, then 2 seconds (which is equal to 4 beats at 120 bpm) will pass before the command is performed. component: The 2nd parameter indicates the component: (described below) that will be affected by the next parameters in the command. style_type and style_value: These parameters determine the type of change that is made to the component (e.g. "top"), and the value for that type of change (e.g. "100px"). Transitioning Between Effects When the style_type is set to transition, the previous effect will gradually change to the current effect, in the number of beats indicated by the beat_length parameter. For example, the following five commands will cause Image #1 to gradually move from 0px,0px to 500px,500px; in 8 beats: { "beat_relative": 0, "image_num": 1, "style_type": "top", "style_value": "0" }, { "beat_relative": 0, "image_num": 1, "style_type": "left", "style_value": "0" }, { "beat_relative": 0, "image_num": 1, "style_type": "transition", "beat_length": "8,linear" }, { "beat_relative": 0, "image_num": 1, "style_type": "top", "style_value": "500px" }, { "beat_relative": 0, "image_num": 1, "style_type": "left", "style_value": "500px" }, The "8,linear" setting contains an optional "linear" instruction. If omitted, it defaults to "ease", which has a slow start, then fast, then slow. This site describes the Transition Timing Options. Animation Components The 2nd parameter in the command indicates the component that is used for the command. You may choose from the following: bpm: Beats-per-Minute will determine the number of seconds that each beat represents. The following website will help you to find the bpm for any song: BPM Tapper youtube_id: This determines the audio that is heard while your animation is being played. You may add an optional "starting seconds" parameter after the YouTubeID. For example, if youtube_id is set to "G0wOOlwXLgA,98", then the audio for the YouTube video at https://youtu.be/G0wOOlwXLgA?t=98 will be played; starting at 1 minute, 38 seconds. If youtube_id is set to "" (a blank string), then the current video's audio will stop playing. bg_div: This determines the background color for the entire screen. It should always be set to "1", and style_type should always be set to "color". Set style_value to a color name (e.g. "blue") or a gradient description (e.g. "linear-gradient(to right, green, yellow"). image_num: This should be set to a number from 1 to 5, to indicate 5 different images that can be active at any time. The first command for any image_num should indicate the url that will be used. For example, the following command will load the image of a Red Ball into Image #1: { "beat_relative": 0, "image_num": 1, "url": "https://AnimateMusic.com/RedBall.png" }, bg_video: A background video can be displayed on the entire screen. It will automatically loop continuously. The first command for any bg_video should indicate the url that will be used. For example, the following command will load a video that was found at videos.pexels.com, into the bg_video component: { "beat_relative": 0, "bg_video": 1, "url": "https://videos.pexels.com/video-files/2792370/2792370-hd_1920_1080_30fps.mp4" }, show_elapsed_seconds: This is a special component that is used just for Comments. In the Chrome Console, it will display the Comment that is assigned to the "show_elapsed_seconds" parameter, with the elapsed time of the automation. For example, add the following line anywhere in one of the Sample Scripts: { "beat_relative": 0, "show_elapsed_seconds": "Test Comment" }, After the animation is finished (which you can end early by clicking the screen while it is playing), press [F12] to display the Chrome Console, and click "1 User message" to see the elapsed time (in seconds) when the "show_elapsed_seconds" command was performed. Effects For image_num and bg_video components, you may add commands that set the style_type to the values shown below. This website describes how each style works: HTML DOM Style Object top: Normally, you will enter a number followed by "px". For example, "100px" would set the top of the image to 100 pixels from the top. The following two special settings have been added for the top style_type: "B": The bottom of the image is placed at the bottom of the screen. For example, if your screen is 1,080 pixels high and the image is 100 pixels tall, then this command will set the top of the image to 980px: { "beat_relative": 0, "image_num": 1, "style_type": "top", "style_value": "B" }, "C": The middle of the image is placed at the vertical center of the screen. For example, if your screen is 1,080 pixels high and the image is 100 pixels tall, then this command will set the top of the image to 490px: { "beat_relative": 0, "image_num": 1, "style_type": "top", "style_value": "C" }, left: Normally, you will enter a number followed by "px". For example, "100px" would set the left side of the image to 100 pixels from the left side of the screen. The following two special settings have been added for the left style_type: "R": The right side of the image is placed at the right side of the screen. For example, if your screen is 1,920 pixels wide and the image is 100 pixels wide, then this command will set the left side of the image to 1820px: { "beat_relative": 0, "image_num": 1, "style_type": "left", "style_value": "R" }, "C": The middle of the image is placed at the horizontal center of the screen. For example, if your screen is 1,920 pixels wide and the image is 100 pixels wide, then this command will set the left side of the image to 910px: { "beat_relative": 0, "image_num": 1, "style_type": "left", "style_value": "C" }, width height transition borderWidth borderColor borderRadius borderStyle clipPath transform: This style_type may use the following style_value settings: perspective rotate rotateX rotateY rotateZ rotate3d scale skew translate none filter: This style_type may use the following style_value settings: blur brightness contrast drop-shadow grayscale hue-rotate invert opacity saturate sepia JSON Format Animation Scripts are in a format called JSON, which must conform with the following rules: The first character in the entire script is the open bracket ("["), and the last character is the close bracket ("]"). Each row begins with an open curly brace ("{"), and ends with a close curly brace ("}"). Except for the last row (before the close bracket), each row ends with a comma (","). You may use any text editor (or the Admin page) to create an Animation Script. If you receive an Invalid Script error when you click Play Animation (on the Admin page), you can use the following website to see why the script is not in the correct JSON format: JSON Parser