Javascript Fun: Build a Music Player App!

Chris Dixon, Web Developer & Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
13 Videos (56m)
    • Introduction

      1:26
    • Finding songs to use in our app

      1:35
    • Creating the HTML structure

      6:56
    • Adding controls and icons

      6:08
    • Styling with CSS

      7:00
    • Listing our songs using Javascript

      8:42
    • Playing songs when clicked

      5:27
    • Display currently playing song

      3:32
    • Play and pause controls

      2:50
    • The volume slider

      3:48
    • Updating the progress bar

      7:01
    • Thank you!

      0:58
    • Follow me on Skillshare!

      0:23

About This Class

Welcome to the Javascript fun series!

For web design or development, there is 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 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. The 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
  • Variables
  • Const and let
  • ES6 Arrow Functions
  • Event handlers
  • 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
  • Basic debugging
  • Including Fontawesome icons
  • And much more!

So if you are looking to move on and put your skills into practice using with real projects, take this course now!

11 of 12 students recommendSee All

A fun project and an excellent way to see how javascript can be used to make something interactive instead of just a static website.
It's a very good video to practice and see java Script in action before you use query to do everything .My tip is to try doing some of the things in a different way and understanding why things are happening instead of just blindly following along

111

Students

1

Project

Chris Dixon

Web Developer & Online Teacher

Hello, My name is Chris and I am a web developer and online teacher. I am passionate about what I do and about teaching others. I have started various online and offline businesses.

Whatever your reason for learning to build websites you have made an excellent career choice.

My personal motivation was to become my own boss and have more freedom and flexibility in my life. I also enjoy the technical challenge it provides and the way it constantly evolves. I built my first website...

See full profile