Simple HTML5 Music Widget Tutorial.

[pretendyfuntiems]

Simple HTML5 Music Widget Tutorial.

(This is my source. It's really streamlined and easy.)

1) Grab yourself an account on a free mp3 hosting site, such as Jukehost, and upload your mp3 tune. You'll need a hosting site which gives you the direct link to your stored mp3s. (Trom.tf: is also a free hosting site)

2) Copy and paste the HTML below into a word document, or directly into your top level editor box (set to HTML, not rich text.)

<font style="color:DarkSlateGray;">TITLE HERE</font> <audio controls preload="metadata" style=" width:300px;"><source src="DIRECT LINK HERE" type="audio/mpeg"> Your browser does not support the audio element. </audio><br />

3) Type your title where it says TITLE HERE

4) Copy the direct link from your mp3 hosting site, and paste it in your HTML where it says DIRECT LINK HERE

5) If you’re working in a word document, copy and paste your altered block of HTML into your top-level post.

Here's my widget below, using the following HTML - as an example only. (The music widget will work, but I don't want people hotlinking to my private Jukehost account, so I typed 'example' into the link html:)

<font style="color:DarkSlateGray;">Good Omens Theme</font> <audio controls preload="metadata" style=" width:300px;"><source src="https://audio.jukehost.co.uk/JZrWxEPWDQexample" type="audio/mpeg"> Your browser does not support the audio element. </audio><br />

Good Omens Theme




Font colours.
To change the font colour of your title, here’s link for all the available colours by name. Or you can use the hex or rgb code for even more variations. (All of these will give you the Dark Slate Gray)

<font style="color:DarkSlateGray;">TITLE HERE</font>

<font style="color:#2F4F4F;">TITLE HERE</font>

<font style="color:rgb(47, 79, 79);">TITLE HERE</font>

For more HTML preset font colours Follow this link:

*