- Mar 3, 2011
- 559
I thought I'd write a small tutorial on how to script a basic HTML5 music player, I'll be writing a guide on how to script a video player soon, but for now I'm having some issues with that, so hopefully this will suffice. HTML5 will be the new standard for HTML (which came in 1999), XHTML and HTML DOM. Although a basic knowledge of HTML will definitely help, HTML5 is much easier to work with and can be learned by even complete newbie's, if you want to learn the whole language (not just what I'm about to show you), visit W3Schools or another tutorial site for help.
Let's get started, first thing you need to know is which browsers HTML5 is compatible with, currently, all known browsers (Firefox, Chrome, Opera, Safari) are compatible with their latest versions, IE 9 although compatible, IE 8 isn't. Now for the specifics, here's a list of the formats browser will support:
For this tutorial I'm going to be using ogg since it's compatible with almost all browsers, you can follow this tutorial using any format from the ones above, if you want to convert an audio file or even video file to ogg, you can use this tool. Let's use Nyan Cat audio file for this one
Open up a text editor such as Notepad, Wordpad or any other capable editor, I'm using gedit (ubuntu) for this, but it works the same, I recommend Notepad++ also. Now to start with the code, type in the standard HTML tags
and also between those, type in the
tags, so it should look like this...
Okay, now to fill in the info, to add the audio player, type in
between
Replace song.ogg with the name of the audio file, make sure to include the .format, for me it'll look like this....
Okay, now just save it as name.html and place it in the same directory (folder) as the audio file you want to use, now open it with your web browser (one that's compatible) and your done! But lets say you want to add some things, like a background color and a tiltle, for this add
and
between
It should look like this...
And now type in body { background blue; color #FF0000 } between
Also add
between the head tags....
And we're done! Now you'll have the background and title, but for extra functionality, here are some options, paste any of these after controls="controls"
And that's it! Here's an example on my own site, it took me time to write this, so say thanks if it helped you
Let's get started, first thing you need to know is which browsers HTML5 is compatible with, currently, all known browsers (Firefox, Chrome, Opera, Safari) are compatible with their latest versions, IE 9 although compatible, IE 8 isn't. Now for the specifics, here's a list of the formats browser will support:
For this tutorial I'm going to be using ogg since it's compatible with almost all browsers, you can follow this tutorial using any format from the ones above, if you want to convert an audio file or even video file to ogg, you can use this tool. Let's use Nyan Cat audio file for this one
Open up a text editor such as Notepad, Wordpad or any other capable editor, I'm using gedit (ubuntu) for this, but it works the same, I recommend Notepad++ also. Now to start with the code, type in the standard HTML tags
PHP:
<html> and </html>
PHP:
<body> </body>
PHP:
<html>
<body>
</body>
</html>Okay, now to fill in the info, to add the audio player, type in
PHP:
<audio src="song.ogg" controls="controls"> </audio>
PHP:
<body> and </body>
PHP:
<html>
<body>
<audio src="song.ogg" controls="controls">
</audio>
</body>
</html>Replace song.ogg with the name of the audio file, make sure to include the .format, for me it'll look like this....
PHP:
<html>
<body>
<audio src="Nyan.ogg" controls="controls">
</audio>
</body>
</html>Okay, now just save it as name.html and place it in the same directory (folder) as the audio file you want to use, now open it with your web browser (one that's compatible) and your done! But lets say you want to add some things, like a background color and a tiltle, for this add
PHP:
<style> </style>
PHP:
<head> </head>
PHP:
<html> </html>
PHP:
<html>
<head>
</head>
<style>
</style>
<body>
<audio src="Nyan.ogg" controls="controls">
</audio>
</body>
</html>And now type in body { background blue; color #FF0000 } between
PHP:
<style> </style>
PHP:
<title>My amazing song</title>
PHP:
<html>
<head>
<title>My amazing song</title>
</head>
<style>
body {
background: blue;
color: #FF0000
}
</style>
<body>
<audio src="Nyan.ogg" controls="controls">
</audio>
</body>
</html>And we're done! Now you'll have the background and title, but for extra functionality, here are some options, paste any of these after controls="controls"
And that's it! Here's an example on my own site, it took me time to write this, so say thanks if it helped you
