EverWeb Codebox

Website Audio

Audio Files

Audio files for music on websites use a compressed format. MP3 is the most popular although MP4 has far better quality with very little increase in file size. If in doubt, stick with MP3 since this will play in older browsers.

Like any other file used in creating a website, the file names should have no special characters or spaces in them. A file name like "john smith's song.mp3" should be - "john-smiths-song.mp3" to avoid problems loading in the browser.

Musicians demoing there songs on a website should never upload the whole song. Create a clip about 60 seconds long to avoid having the whole song ripped of and used by others.

Make sure your tracks have the appropriate meta data giving ownership info.

Copyright

Just like any other type of media file - such as movies and image - you must own the copyright for the music or have permission from the copyright holder in the form of a license agreement before using it on a website unless you want to be sued!

If you need background music, you can usually find something appropriate amongst the wealth of royalty free tracks available for download.

Music licensing is not something to be undertaken lightly and ignoring copyright law is foolhardy to say the least.

Audio Players

Website audio players come in a variety of types and styles. Some working examples are shown on the next page and the Widgets section has several to choose from if you want easy.

Nowadays it's possible to play audio using the HTML5 audio tag. This has the advantage of not requiring a plugin and doesn't use up processor power (and therefore battery power) which makes it preferable for use on mobile devices.

The downside is that it requires two different file formats to be uploaded and the control bar uses the browser default.

<audio controls>

    <source src="{!-ASSETSPATH-!}External%20Files/file-name.ogg" />

    <source src="{!-ASSETSPATH-!}External%20Files/file-name.mp3" />

</audio>

HTML5 Audio

To use the HTML5 audio tag in EverWeb you will need two versions of your audio file - an MP3 and an OGG.

Use Miro Video Converter to make the conversion from MP3 to OGG. Change the resulting file extension from .theora.ogv to .ogg

Drag both files into Assets and control click each one to get the relative file path.

Paste these paths (marked in red) into the code shown below and then copy the whole lot, paste it into an HTML Snippet and click "Apply".

Google Chrome

Firefox

Safari

Safari iOS

easy

Click the Easy button to go to the Widgetbox section and see the selection of Audio Widgets...