Creating an MP3 Player with HTML5

Use HTML5, CSS Javascript and XML to create a fully functional MP3 Player
4.3 (163 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,551 students enrolled
25% off
Take This Course
  • Lectures 14
  • Length 1.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 1/2013 English

Course Description

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.

What are the requirements?

  • Some Exposure to HTML, CSS and Javascript
  • Mac, PC or Linux Computer
  • Speakers or Headphones

What am I going to get from this course?

  • 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

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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Course Introduction
Mark Lassoff, your instructor welcomes you to the course.
Section 2: Playing Media with HTML5
Mark introduces the chapter.
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.
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.
Volume can be controlled via Javascript as well.  In this segment Mark will show you the necessary code to control the volume using buttons.
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.
1 page
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.
Section 3: Creating an XML Play List
Mark introduces the chapter.
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.
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.
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.
1 page
Complete this lab exercise when finished with the lectures in this section.
Section 4: Wrapping Up
Thanks for taking this free course from LearnToProgram! For more information, or more courses go to .
Section 5: Bonus Lecture

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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

LearnToProgram, Inc., 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.

Ready to start learning?
Take This Course