Javascript Fun: Build a Music Player App!

Welcome to the Javascript fun series!

You can find all of the code and project stages here:

https://github.com/chrisdixon161/fun-javascript-projects.com

For web design or development, there are 3 must-know technologies, HTML, CSS, and Javascript.

The main aim of the Javascript fun series is to take your knowledge of these 3 (only a little is required!), and put them into practice by building a series of educational, yet fun projects that show you exactly how they work perfectly together. Working on projects and solving problems is a great way to learn.

The project we will build in this course will be a Javascript Music Player.

All the required tools are free to download, I will be using the following:

Visual Studio Code Text Editor: https://code.visualstudio.com

Chrome Web Browser: https://www.google.co.uk/chrome/browser

We begin by creating the user interface with HTML. Then we apply styling using CSS.

Then we add Javascript, this is where the real magic happens!

You will learn things such as:

• Creating HTML interfaces
• Styling with CSS
• Incorporating Javascript and linking external files
• Const and let
• ES6 Arrow Functions
• Event handlers
• For / of loops
• Manipulating the DOM
• Performing calculations and storing in variables
• Javascript arrays
• Looping through arrays
• Using Javascript to create HTML elements (createElement, createTextNode & appendChild)
• HTML5 Audio Player default and custom settings
• How to create custom elements to control the audio element
• Setting the audio source dynamically
• Checking the readyState of the audio player
• Getting the value of slider inputs
• Calculating the value of the HTML progress element
• And much more!

So if you are looking to move on and put your skills into practice using real projects, I will see you in the class!

• Welcome To The Class!
• Share Your Work On Skillshare!
• Where To Find Audio For Your App
• HTML Structure & Playing Audio
• Custom Audio Controls
• CSS Styling
• Listing Our Songs With Javascript
• Playing Songs Dynamically
• Set The Current Playing Song
• Play & Pause Controls
• The Volume Slider
• Updating The Progress Bar
• Finishing Touches
• Follow me on Skillshare!