DM 20  Assignment 7, Part 1   HTML5 Audio Player

Due Thursday, April 26


(to Part 2 | to Part 3 )


In Part 1 of this assignment, you'll use HTML5 to insert an audio player in a web page.

See an example.

Before HTML5, audio files could only be played in a web page with a browser plug-in like Flash or Quicktime. This became somewhat problematic for some, as many devices/smart phones etc. don't do the Flash player and not everyone has Quicktime either, and...let's just say it got complicated.

HTML5 code basically tells the browsers to use their own native media players to play audio in a web page.
HTML5 code can also give browsers a choice of audio file formats - mp3 and ogg are the two most common - and the browser's player picks the file format it can best display.

Almost all current browsers on computers, tablets, phones etc have no problems with mp3 files - but some older browsers do. Firefox, for example - until quite recently Firefox couldn't play html5 mp3 files - but it did play ogg files.

So to cover your bases, you can have two versions of your audio files uploaded, and the different browsers will choose which one they can play. 

Converting an mp3 to ogg format is pretty easy - most sound editing software will do it, or there's conversion software you can download and install for yourself, many for free.

We're going to use the VLC player - it's a free download if you want to get it for your own use.
But first some file management, and you'll also choose an .mp3 audio file you want to use for this assignment.

To begin, create a new folder inside your root folder, name it A7-1.
Put an mp3 file of your choice in your A7-1 folder.
Use your own or the J drive has several .mp3 files you can use: J drive>AUDIO>mp3s.
Make sure your mp3 file name has no spaces.

Then open the VLC player at the computer where you're sitting. In the DM lab it's accessible from the Start Menu:



From the VLC player's top menu go to Media>Convert / Save:

 

As pictured below, click the Add button, navigate to your A7-1 folder and choose your mp3 file.
Or, open your A7-1 folder in a File Explorer window and drag your mp3 file into the VLC player's window.

Then click Convert / Save in the lower right and choose Convert:

 

As pictured below, choose 'Audio - Vorbis (OGG)' as the Profile.
For Destination - click Browse and navigate to your A7-1 folder, then type in the file name for your new ogg file - keep it the same as the mp3's file name - with No Spaces in the name - and click Save.

Then click 'Start' at the bottom, and VLC will convert your mp3 to an ogg, saving it into your A7-1 folder alongside the mp3.

 

Next, launch Dreamweaver, go to Site > Manage Sites and select your site or import your dm20 .ste file.

File>New to make a new html document, name it audio1.html and save it into your root folder's A7-1 folder alongside your mp3 and ogg files.

Replace "Untitled Document" with an appropriate title.

Choose your background color, font, font color and links colors.

Insert a centered table, 600 pixels wide, 1 row and 1 column, with 0 border, 10-pixel cell padding and 10-pixel cell spacing (refer to the table tips/info in A2  if necessary).
Also look at the example to get the general idea how your page and table can be set up. 

Yours can differ - but make sure the table is centered in your page, and that the table cell is also set to Horizontal Center and Vertical Top alignments:

Next, click in your table to set your cursor there. Then go to DW's top menu, Insert > HTML > HTML5 Audio

Dreamweaver displays a speaker icon to denote that you've got audio there -

Click once on that speaker icon to select it and look in the Properties panel.

For Source, use Point to File to insert your mp3 file there, and Dreamweaver fills in the ogg version as the Alt Source 1, as pictured below:

Also, checkmark the "Controls" and "Autoplay" boxes as pictured above.

File>Save and Preview in Browsers to see/hear your html5 audio player in action.

Check it in all browsers you have available - you'll see that each one has a different-looking player, but they all should play your audio - even Internet Explorer - although per usual, for local (unpublished) content you may have to click IE's "Allow Blocked Content".

Next, click just to the right of the speaker icon in your page and press Enter to move down a paragraph.

Put some text just below your audio player, perhaps a description and info about the audio.

And lastly, include a link back to your Projects Menu page, beneath your table.

File > Save, and Preview in Browser(s).  When you're satisfied with the results, do Site>Put to upload your audio1.html page and your mp3 and ogg files to the server - make sure to say Yes to the 'Include dependent files?' alert or your mp3 and ogg files won't upload.
Or, you can click on your A7-1 folder to select it in your Files panel and click the Put arrow to publish all the contents of the folder that way.

Then add a link, HTML5 Audio 1, in your Projects Menu page and link it to your audio1.html page.

Preview in Browsers to check out your links.  When satisfied, File>Save, and then Site>Put to upload your revised menu.html page to the server.

Go to our class homepage, click your name and check your work online.

continue with Part 2