Creating an MP3 Player with HTML5
4.2 (169 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
14,549 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Creating an MP3 Player with HTML5 to your Wishlist.

Add to Wishlist

Creating an MP3 Player with HTML5

Use HTML5, CSS Javascript and XML to create a fully functional MP3 Player
4.2 (169 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
14,549 students enrolled
Last updated 10/2016
English [Auto-generated]
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 1.5 hours on-demand video
  • 1 Article
  • 2 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Understand HTML Basic Document Structure
  • Use the New HTML5 Audio Tag
  • Understand the Audio Tags Attributes
  • Use the Current Javascript Event Framework
  • Use the Javascript Audio API
  • Control Volume
  • Control Play Head Location
  • Output Song Time
  • Output Total Song Duration
  • Understand XML
  • Parse XML with Javascript
  • Create a muti-source Audio Player
View Curriculum
  • Some Exposure to HTML, CSS and Javascript
  • Mac, PC or Linux Computer
  • Speakers or Headphones

Looking for a fun project to sharpen your HTML5 and Javascript skills?  Are up for pushing your HTML5 and Javascript skills further?  

This course will take you through all of the steps necessary to create a fully functional MP3 player using HTML5, Javascript and a little CSS.  The course provides a great way to learn more about HTML5 and CSS, while completing a programming project that is both rewarding and fun.  

You'll code along with master instructor Mark Lassoff as you learn to create a fully featured MP3 player that includes time elapsed output, a song position scrubber and click-to-load interface allowing you to change songs at the click of a mouse.  Along the way you'll be learning valuable HTML5 and Javascript techniques that you can apply to almost any development project.

Who is the target audience?
  • IT Pros Who Want to Learn HTML5 by Completing a fun project
  • Students who want to understand HTML5 and Javascript
  • Traditional Developers wanting to work with HTML5 in Web and Mobile Space
  • Creatives Who Want to do more with HTMl5
  • Parents Who Want to complete an Interesting Programming Project with Their Kids
Students Who Viewed This Course Also Viewed
Curriculum For This Course
14 Lectures
Course Introduction
1 Lecture 00:36
Mark Lassoff, your instructor welcomes you to the course.
Preview 00:36
Playing Media with HTML5
6 Lectures 44:40
Mark introduces the chapter.
Preview 00:33

Ws start out creating an HTML5 basic document structure. We then use the new HTML5 audio tag to play some audio content.  The attributes used with the audio tag are reviewed.
Preview 08:20

Mark will work with you as you crack open the Javascript audio API and add buttons and code that allows you to Play, Pause, and Stop the media.
Preview 09:47

Volume can be controlled via Javascript as well.  In this segment Mark will show you the necessary code to control the volume using buttons.
Controlling Volume with Javascript

In this module we'll do some more complex programming as we output the time elapsed in the song.  We'll do this in standard minutes and seconds formats and visualize the result with a scrubber.  Finally, we'll code the scrubber so that it interacts with the user to control song position.
Outputting and Controlling Song Position

After you have completed the video lectures in this chapter, and have written the code as the instructor has, complete these lab exercises.  This will help you remember and retain the information from the lectures.
Lab Exercise
1 page
Creating an XML Play List
5 Lectures 33:42
Mark introduces the chapter.
Chapter 2 Introduction

Every application needs a system for storing data.  In this chapter, Mark will show you how to use XML to store the necessary data about your music selections.
Creating the XML File

Mark will demonstrated one of the most important skills a Javascript developer can have in their arsenal:  The ability to parse Javascript.  In this segment we'll parse the XML created in the previous lecture and store it in the browser DOM.
Parsing the XML with Javascript

Finally, we'll give our user the ability to switch from one song to another with a song panel that we'll output and style with CSS.
Creating the Song Panel with HTML and CSS

Complete this lab exercise when finished with the lectures in this section.
Lab Exercise
1 page
Wrapping Up
1 Lecture 00:37
Thanks for taking this free course from LearnToProgram! For more information, or more courses go to .
Goodbye from Mark
Bonus Lecture
1 Lecture 00:31

Here's some bonus material to help you continue learning.

About the Instructor
LearnToProgram, Inc.
4.3 Average rating
4,564 Reviews
143,662 Students
46 Courses
Learn Web, Mobile and Game Development

LearnToProgram Media is a leading publisher of web, mobile, and game development courses that are used by over 500,000 people in 65 countries. LearnToProgram's valuable network of technical resources includes content on YouTube, iTunes, and Roku, as well as books, free tutorials, and online courses.

With a mission of “teaching the world to code" LearnToProgram instructors are teachers first and technical experts second. Their primary skill is relating complex technical information to nontechnical people learning web, mobile and game development. The entirely online, self-paced sales model allows students to learn at their own pace.

With over 40 courses on the market, LearnToProgram offers students flexible programs in web development, mobile application development and game development. Currently the company's most popular online courses include Become a Certified Web Developer and 10 Apps in 10 Weeks.

The company is based outside of Hartford, Connecticut.