iWeb FAQ - Music and audio

iWebFAQ.org

 

How can I embed music (or any other audio file) to my iWeb created site? How can I have people listening to it not only on one page but have the music to continue no matter which page they are looking at? What about Popup windows?

La stessa pagina in italiano                             Die gleiche Seite auf Deutsch
 



That’s what you could do:                                         or       




See how I embedded it on this page (where it says: click here first if you want to play music during the slideshow)



Note that you're not allowed to publish any music to your website of which you don't own the copyright or don't have the permission of the copyright owner to do so or you pay a royalty to the copyright holder. If you do publish music to your website without the right to do so you don't HAVE to but you COULD get sued! Putting music on a website means that you're providing the music to others who could easily download it even if you don't want them to do so. Downloading it is not illegal, providing it is illegal (have a look at the Note at the bottom of the page about DRM Free music you buy on iTunes)


Unless the music was created and published under Creative Commons License (What's that?) wich means that you’re free to share it.


To find some creative common licensed music go to:

Jamendo.com or have a look at the following blog post at largeheartedboy.com



Note that people usually already listen to music with iTunes, radio, ... while browsing the web. Hence having the music playing automatically on your website and not letting the visitor choose whether he wants to listen to music or not should be avoided. Give the user control of it.




Chapter 1: How to get the music or any other audio online

Chapter 2: HTML5

2.1 HTML5 Audio Player with Playlist (Best!)

2.2 Using simple HTML5

2.3 JPlayer HTML5

2.4 Converting .mp3 to .m4a and .ogg

Chapter 3: Flashplayers

3.1 Using myflashfetish.com

3.2 Using a simple flash player

3.3 Using flashskins.co.uk

3.4 The best Flash players

3.5 Note about compilations

3.6 Embedding the Flashplayer into your page

Chapter 4: How to keep the music playing even when people change page or how create a popup window for the music

Chapter 5: Using quicktime player instead of a flash player (which I wouldn't recommend)

Chapter 6: Note about iTunes music




Chapter 1: How to get the music or any other audio online


In some of the tutorials here you will find slightly different instructions but in general...


1) Collect the music files you want to upload

2) Give each file easy names like Track_01.mp3, Track_02.mp3, ... especially avoiding spaces (replace them with _ underscores), avoid special characters like è ü (replace with e u) also avoid ! ? Remember to add the extension .mp3 at the end of the files if it’s not yet there. Maybe it's already there but hidden (ctrl+click, Get info, Name & Extension, uncheck Hide extension).

3) If you have different Playlists you may want to make different folders like playlist1, playlist2 and so on

4) Put these folders in a folder named music

5) Upload the music folder to the root location on your server using an FTP application (If you don't know what the root is or how this is done read it here)

6) The URL of a song will be:

http://yourdomain.com/music/playlist1/filename.mp3

entering it into your browser should bring up the file.




Chapter 2: HTML5


Whenever you can I would recommend you to use HTML5 to embed your music and audio contents so they can be played on the iPad, the iPhone and the iPod Touch too.


2.1 HTML5 Audio Player with Playlist (Best!)


Here’s an example of what I think is the best HTML5 audio player so far...

Click on an album cover to switch playlist.


























All the music in this player is available at Jamendo.com for free (donationware)



The player is called HTML5 Audio Player with Playlist and is sold here for 5$


(Beware: Not all you buy from that site is as easy to use as this player!)


1) In the folder you download from CodeCanyon you find a folder named _deploy. Rename the folder to HTML5AudioPlaylist

2) Inside that folder you find a folder named css. Open the file named html5audio.css you find in it. Delete the following lines you find towards the top of the document and save:


a{

text-decoration: none;

}


body {

background:#333;

}





/* wrapper for player and playlist*/

#componentWrapper{

position:relative;

width:310px;

height:350px;

top:50px;

left:50%;

margin-top:50px;

margin-left:-155px;

}


3) Go to media, audio and you will find different folders. Each playlist has its own folder. Drop the music files you want to have in the first playlist in the folder named 1. The files you want to have in the second playlist into the folder named 2. You can add more if you want.


Give them easy names like Track_01.mp3, Track_02.mp3, ... especially avoiding spaces (replace them with _ underscores), avoid special characters like è ü (replace with e u) also avoid ! ? Remember to add the extension .mp3 at the end of the files if it’s not yet there. Maybe it's already there but hidden (ctrl+click, Get info, Name & Extension, uncheck Hide extension).


You will need both: .mp3 and .ogg files. Use the same filenames but different extensions.


4) Upload the HTML5AudioPlaylist folder to the root of your server (If you don't know what the root is or how this is done read it here)

5) Download this file HTML5AudioPlaylist_Install.txt which contains the code used to embed the player into your website and edit it in TextWrangler (download for free here) as described further on...


Where it says


<!-- List of playlists -->

        <div id="playlist_list">

                    

             <!-- local playlist -->

             <ul id='playlist1'>

                             <li class="playlistItem" data-type='local' data-mp3Path="/HTML5AudioPlaylist/media/audio/1/Track_01.mp3" data-oggPath="/HTML5AudioPlaylist/media/audio/1/Track_01.ogg"><a class="playlistNonSelected" nohref>Artist Name - Title of Track 01</a></li>

                             <li class="playlistItem" data-type='local' data-mp3Path="/HTML5AudioPlaylist/media/audio/1/Track_02.mp3" data-oggPath="/HTML5AudioPlaylist/media/audio/1/Track_02.ogg"><a class="playlistNonSelected" nohref>Artist Name - Title of Track 02</a></li>


you specify the filenames (here: Track_01 and Track02). Note that each song appears twice: once with .mp3 extension and once with .ogg extension. Also enter the Artist Name and the Title of the track. If they are all of the same artist I would recommend you to type only the Title of the song. You also define in which folder the player should look for the music files (here /1/) and of course you can increase or decrease the number of tracks as you please.


6) Copy the code and add it to your page pasting it in an HTML Snippet.


Pasting it in an HTML Snippet and hitting Apply the Snippet Box increases in size. You can resize the box as you would do with a normal TextBox until it reaches the size of width:325px and height:250px.


Towards the top of the code you find different settings like Autoplay (I've set it to false since I don't like autoplaying music), Random, etc.


Multiple playlists on the same page with only one player and a menu to choose which album to play


You can have multiple playlists with only one player and a menu where people can choose which playlist they want to listen to. To do that...


1) At the bottom of the code to embed the player into your website look for the following line:


<li><a nohref onClick="jQuery.html5audio.inputPlaylist('playlist1'); return false;">Load playlist 1</a></li>


After this line add


<li><a nohref onClick="jQuery.html5audio.inputPlaylist('playlist2'); return false;">Load playlist 1</a></li>


<li><a nohref onClick="jQuery.html5audio.inputPlaylist('playlist1'); return false;">Load playlist 3</a></li>


as many playlists as you want to have...

2) Where you added the data about filenames, titles, ... add more playlists like


<ul id='playlist2'>

<li class="playlistItem" data-type='local' data-mp3Path="/HTML5AudioPlaylist/media/audio/2/Track_01.mp3" data-oggPath="/HTML5AudioPlaylist/media/audio/2/Track_01.ogg"><a class="playlistNonSelected" nohref>Artist Name - Title of Track 01</a></li>

<li class="playlistItem" data-type='local' data-mp3Path="/HTML5AudioPlaylist/media/audio/2/Track_02.mp3" data-oggPath="/HTML5AudioPlaylist/media/audio/2/Track_02.ogg"><a class="playlistNonSelected" nohref>Artist Name - Title of Track 02</a></li>

</ul>


<ul id='playlist3'>

<li class="playlistItem" data-type='local' data-mp3Path="/HTML5AudioPlaylist/media/audio/3/Track_01.mp3" data-oggPath="/HTML5AudioPlaylist/media/audio/3/Track_01.ogg"><a class="playlistNonSelected" nohref>Artist Name - Title of Track 01</a></li>

<li class="playlistItem" data-type='local' data-mp3Path="/HTML5AudioPlaylist/media/audio/3/Track_02.mp3" data-oggPath="/HTML5AudioPlaylist/media/audio/3/Track_02.ogg"><a class="playlistNonSelected" nohref>Artist Name - Title of Track 02</a></li>

</ul>


etc. of course you can add more tracks.

3) Now we need to add the menu for people to choose what they want to listen. This is done by adding simple links like


<a nohref onClick="player1.loadPlaylist('#playlist1'); return false;">Playlist 1</a>

<a nohref onClick="player1.loadPlaylist('#playlist2'); return false;">Playlist 2</a>

<a nohref onClick="player1.loadPlaylist('#playlist3'); return false;">Playlist 3</a>


Of course you can change the text and you could also turn them into image-links (perhaps Album-Covers). For more informations on how to do that have a look at the Basic HTML Codes knowledge page.


2.2 Using simple HTML5


Sample:




The basic HTML5 code for audio is:


<audio controls="controls">

<source src="filename.mp3" type="audio/mpeg">

<source src="filename.ogg" type="audio/ogg">

Your browser does not support the audio element.

</audio>


However it doesn't work for me in Firefox.


As you see you need an mp3 and an ogg file and that's it.


2.3 JPlayer HTML5


JPlayer.org offers a great player made out of only one button. An example of it is found on their website.


I love it. However to me it's way too big so what I did is reduce its size by 50% editing all the codes and the images its made of and I also eliminated the background surrounding the round button. So here is what I ended up with:







1) Click here to download the source

2) Upload the JPlayer50t folder to the root of your server (If you don't know what the root is or how this is done read it here)

3) Take the following code and edit it as described further on...


<link rel="stylesheet" href="/JPlayer50t/skin/circle.skin/circle.player.css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

<script type="text/javascript" src="/JPlayer50t/js/jquery.jplayer.min.js"></script>

<script type="text/javascript" src="/JPlayer50t/js/jquery.transform.js"></script>

<script type="text/javascript" src="/JPlayer50t/js/jquery.grab.js"></script>

<script type="text/javascript" src="/JPlayer50t/js/mod.csstransforms.min.js"></script>

<script type="text/javascript" src="/JPlayer50t/js/circle.player.js"></script>

<script type="text/javascript">

$(document).ready(function(){

var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",

{

m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",

oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"

}, {

cssSelectorAncestor: "#cp_container_1",

swfPath: "js",

wmode: "window"

});

});

</script>

<div style="width:100px; height:100px;">

<div id="jquery_jplayer_1" class="cp-jplayer"></div>

<div id="cp_container_1" class="cp-container">

<div class="cp-buffer-holder">

<div class="cp-buffer-1"></div>

<div class="cp-buffer-2"></div>

</div>

<div class="cp-progress-holder">

<div class="cp-progress-1"></div>

<div class="cp-progress-2"></div>

</div>

<div class="cp-circle-control"></div>

<ul class="cp-controls">

<li><a href="#" class="cp-play" tabindex="1">play</a></li>

<li><a href="#" class="cp-pause" style="display:none;" tabindex="1">pause</a></li>

</ul>

</div>

</div>


Replace http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a and http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg with your own files.

4) Paste the code in an HTML Snippet


2.4 Converting .mp3 to .m4a and .ogg


To convert .mp3 to .4a and .ogg use X Lossless Decoder (free). Just open the application. Choose Output format, drag&drop your .mp3 on the application's icon and it will start converting the file. You will then find the converted file in the same location as the original file and the original file will still be there too.




Chapter 3: Flashplayers


3.1 Using myflashfetish (used for the example on this website)


1. Sign up to http://www.myflashfetish.com/ (that's the one I used to create my players) or any other platform where you can build a Flashplayer with your music


2. Make a playlist

- Choose a skin you want to use (appearance of the player, I use the iPod nano because I love it)

- There will be fields saying MP3 Title (don't use special characters like è ä and ' & and so on) and MP3 URL (http://yoururl/Music/Playlist1/filename.mp3 or yoururl/Music/filename.mp3 or whatever)


3. At the end save the playlist and get the code


3.2 Using a simple flash player




1. Click here to download the source files of the player

2. Upload the “SFPSource” folder to the main location (root) of your server (If you don't know what the root is or how this is done read it here)

3. Copy the following code and modify it as explained


<script language="JavaScript" src="http://yourdomain.com/SFPSource/audio-player.js"></script>

<object type="application/x-shockwave-flash" data="http://yourdomain.com/SFPSource/player.swf" id="audioplayer1" height="24" width="290">

<param name="movie" value="http://yourdomain.com/SFPSource/player.swf">

<param name="FlashVars" value="playerID=1&autostart=no&soundFile=http://yourdomain.com/Music/FileName.mp3">

<param name="quality" value="high">

<param name="menu" value="false">

<param name="wmode" value="transparent">

</object>


Substitute yourdomain.com with your domain

Change the parameters height and width (in pixel) to fit your case

autostart=no or autostart=yes whether you want the song top play automatically or not

Substitute http://yourdomain.com/Music/FileName.mp3 with the URL to the mp3 music file you want to play

audioplayer1 and playerID=1: if you have multiple players on the same page change the number to 2 in the code of the second player, 3 in the code of the third player, 4 in the code of the fourth player and so on...


4. Paste the code into your page.


3.3 Using flashskins.co.uk


1. Go to flashskins.co.uk and download or buy the player you want

2. Upload the folder with the files you get to your server

3. Read the instructions.html file you find in the folder to know how to set it up

4. Paste the code into your page.


3.4 The best Flash players


For what I think are the best Flash based music players have a look at this page.


3.5 Note about compilations


Alternative 1 doesn’t support playlists so if you want to have multiple songs playing without having people to select them manually you could make a compilation out of multiple songs resulting in a single track.


To do that use Audacity, iMovie ’06, GarageBand or any other application which can be used for that.


3.6 Embedding the Flashplayer into your page


Insert the code you got in Chapter 3 in an HTML Snippet on the page you would like to add the player to. If you want to have a popup window go on reading Chapter 4.








Chapter 4: How to keep the music playing even when people change page or how create a popup window for the music


I think the best way to have the music playing when people change page is to have it playing in a popup window which people will keep behind the main window


1. In iWeb create a page as of my Pop-up windows and pages FAQ


2. Once you create the page add an HTML Snippet to the page and paste your player-code into it. Write some text like "Keep this window in background while visiting our website" for people to keep it going while visiting the site.


3. Add the code to open the popup window to your site as described on the page and you’re done.




Chapter 5: Using QuickTime player


First let me say that you can't have a playlist using quicktime


Second let me say that there are a lot of PC users who don't have Quicktime plugin installed on their machines so they will not be able to play the music. That’s why I wouldn’t recommend to use it.


The only thing that changes if you want to use Quicktime Player is that you have to drag&drop your mp3 file to the page instead of inserting the html snippet Flash Player html code and make it Autoplay in the Quicktime section of the Inspector.


Nevertheless you may want to think about adding your music in a Flash Player just to protect a bit better your files from downloading if you don't want people to download them. It's very easy to download music even from a Flash Player too but less than from a quicktime player because you have to know the 'how to' (which I'm not gonna tell you here!).




Chapter 6: About iTunes music


Buying music on iTunes doesn’t give you the right to share it. If you buy a DRM free song on iTunes your e-mail address (thus your account information) gets registered in the file. If you share with your friends whom share it with other whom share it with others again your account information could be found all over the world and the music labels might notice that there are a lot of copies of the song with your account information and you could get a phone call by a lawyer which (obviously) wouldn’t be nice. For more information read the following article.




This FAQ is also discussed in my iWebFAQ.org E-Book (sample)


iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.

It’s an EBookStoreToday.com company. It’s presented by Cédric Giger and hosted by HostGator.


Thank you for visiting and supporting my website,

- Cédric -


 

 

Share/Bookmark

Share/Bookmark