Adding music to your website

Note: This article refers to the legacy version of the Website Builder. If you signed up to the HostPapa Website Builder after March 11 2020, you’re on the new version of the Website Builder. For help, go here.

There are several options that you can use to add music to your site:

HostPapa Website Builder MP3 Player:

  1. Drag and drop the MP3 Player Widget located in Widgets > Media.
  2. You can upload your audio file either directly from your computer or from your File Manager.
  3. Save and republish your site.

Google Gadgets:

  1. Click on Widgets > More > Misc.
  2. Drag and drop the Google Gadgets Widget onto your page.
  3. A dialog box will open. Click on the Google Gadgets link on the bottom-right of the screen and you will be taken to the widget gallery.
  4. Browse for the MP3 Player you want and click on Add to your webpage.
  5. Customize your settings and add your music URL.How to locate the music URL:
    To play a song that you’ve uploaded to your site using one of the above widgets, edit the settings so that the URL looks like: http://mysite.com/resources/song.mp3

    • Replace mysite.com with the name of your published site.
    • Replace song.mp3 with the name of the music file you’ve uploaded.
    • Remember to include any folder names in the file path if your file is stored in a folder in the File Manager. For example: resources/music/song.mp3
  6. Once completed, click on Get the code.
  7. Copy the HTML code given and paste this (using right-click>paste or CTRL-v) into the Google Gadgets dialog box in your website builder.
  8. Click on Save.

ODEO MP3 Player
To embed an ODEO player, add this snippet of code using the HTML Code Widget:

  1. Upload the file to your File Manager.
  2. Drag and drop the HTML Code Widget onto your page and paste the following code into the editor:
    <embed src= “http://www.odeo.com/flash/audio_player_standard_gray.swf” quality=”high” width=”300″ height=”52″ allowScriptAccess=”always” wmode=”transparent” type=”application/x-shockwave-flash” flashvars= “valid_sample_rate=true&external_url=MP3 FILE ADDRESS” pluginspage=”http://www.macromedia.com/go/getflashplayer” /> Please note: Replace MP3 FILE ADDRESS with the path to your uploaded file.
  3. Click Save.
  4. Click Publish to update your site.

Google Reader MP3 Player
To embed a Google Reader MP3 player, add this snippet of code using the HTML Code Widget. This will also work on non-Google sites.

  1. Upload the file to your File Manager.
  2. Drag and drop the HTML Code Widget onto your page and paste the following code into the editor:
    <embed src=”http://www.google.com/reader/ui/3523697345-audio-player.swf” flashvars=”audioUrl=MP3_FILE_URL” width=”400″ height=”27″ pluginspage=”http://www.macromedia.com/go/getflashplayer”>Please note: Replace MP3_FILE_URL with the name of your uploaded song.
  3. Click Save.
  4. Click Publish to update your site.

Simple Console Player
You can also add a small console player to your page with custom HTML:

  1. Upload the music file to your File Manager.
  2. Drag and drop an HTML Widget to your page and paste the following code into the editor that opens:
    <embed src=”resources/song.mp3” width=”140″ height=”40″ autostart=”false” loop=”FALSE”> Please note: Replace song.mp3 with the name of your uploaded song.
  3. Click Save.
  4. Click Publish to update your site.

Please ensure that you own the copyright to the music you will be playing.

Related Articles