Reply to thread

Message

<blockquote data-quote="Dejan" data-source="post: 7424" data-attributes="member: 69">I thought I&#039;d write a small tutorial on how to script a basic HTML5 music player, I&#039;ll be writing a guide on how to script a video player soon, but for now I&#039;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&#039;s, if you want to learn the whole language (not just what I&#039;m about to show you), visit W3Schools or another tutorial site for help.Let&#039;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&#039;t. Now for the specifics, here&#039;s a list of the formats browser will support:For this tutorial I&#039;m going to be using ogg since it&#039;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&#039;s use Nyan Cat audio file for this one <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite110" alt=";)" title="Wink&nbsp; &nbsp; ;)" loading="lazy" data-shortname=";)" /> Open up a text editor such as Notepad, Wordpad or any other capable editor, I&#039;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]&lt;html&gt; and &lt;/html&gt;[/php] and also between those, type in the [php]&lt;body&gt; &lt;/body&gt;[/php] tags, so it should look like this...[php]&lt;html&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;[/php]Okay, now to fill in the info, to add the audio player, type in [php]&lt;audio src=&quot;song.ogg&quot; controls=&quot;controls&quot;&gt; &lt;/audio&gt;[/php] between [php]&lt;body&gt; and &lt;/body&gt;[/php][php]&lt;html&gt;&lt;body&gt;&lt;audio src=&quot;song.ogg&quot; controls=&quot;controls&quot;&gt; &lt;/audio&gt;&lt;/body&gt;&lt;/html&gt;[/php]Replace song.ogg with the name of the audio file, make sure to include the .format, for me it&#039;ll look like this....[php]&lt;html&gt;&lt;body&gt;&lt;audio src=&quot;Nyan.ogg&quot; controls=&quot;controls&quot;&gt;&lt;/audio&gt;&lt;/body&gt;&lt;/html&gt;[/php]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&#039;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]&lt;style&gt; &lt;/style&gt;[/php] and [php]&lt;head&gt; &lt;/head&gt;[/php] between [php]&lt;html&gt; &lt;/html&gt;[/php] It should look like this...[php]&lt;html&gt;&lt;head&gt;&lt;/head&gt; &lt;style&gt;&lt;/style&gt;&lt;body&gt;&lt;audio src=&quot;Nyan.ogg&quot; controls=&quot;controls&quot;&gt;&lt;/audio&gt;&lt;/body&gt;&lt;/html&gt;[/php]And now type in body { background blue; color #FF0000 } between [php]&lt;style&gt; &lt;/style&gt;[/php] Also add [php]&lt;title&gt;My amazing song&lt;/title&gt;[/php] between the head tags....[php]&lt;html&gt;&lt;head&gt;&lt;title&gt;My amazing song&lt;/title&gt;&lt;/head&gt; &lt;style&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; body {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: blue;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #FF0000&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&lt;/style&gt;&lt;body&gt;&lt;audio src=&quot;Nyan.ogg&quot; controls=&quot;controls&quot;&gt;&lt;/audio&gt;&lt;/body&gt;&lt;/html&gt;[/php]And we&#039;re done! Now you&#039;ll have the background and title, but for extra functionality, here are some options, paste any of these after controls=&quot;controls&quot; And that&#039;s it! Here&#039;s an <a href="http://dejan.exofire.net/stuff/code.html" target="_blank">example</a> on my own site, it took me time to write this, so say thanks if it helped you <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite109" alt=":)" title="Smile&nbsp; &nbsp; :)" loading="lazy" data-shortname=":)" /></blockquote>

[QUOTE="Dejan, post: 7424, member: 69"] 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 [php]<html> and </html>[/php] and also between those, type in the [php]<body> </body>[/php] tags, so it should look like this... [php]<html> <body> </body> </html>[/php] Okay, now to fill in the info, to add the audio player, type in [php]<audio src="song.ogg" controls="controls"> </audio>[/php] between [php]<body> and </body>[/php] [php]<html> <body> <audio src="song.ogg" controls="controls"> </audio> </body> </html>[/php] 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>[/php] 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] and [php]<head> </head>[/php] between [php]<html> </html>[/php] It should look like this... [php]<html> <head> </head> <style> </style> <body> <audio src="Nyan.ogg" controls="controls"> </audio> </body> </html>[/php] And now type in body { background blue; color #FF0000 } between [php]<style> </style>[/php] Also add [php]<title>My amazing song</title>[/php] between the head tags.... [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>[/php] 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 [url=http://dejan.exofire.net/stuff/code.html]example[/url] on my own site, it took me time to write this, so say thanks if it helped you :) [/QUOTE]

Verification