Embed MP3 Player and upload music files

From Imaginet FAQ
Jump to navigation Jump to search

Please note: This software is neither provided nor supported by Imaginet. This article is for informational purposes only, and Imaginet will not be held responsible for any errors or damage resulting from the use of the methods or software mentioned in this article.

This tutorial will explain how you can embed a MP3 player on your website to play music. In this tutorial we use a free MP3 player which can be downloaded from the following URL - http://www.flashmp3player.org/download.html

Please note that we do not offer any support

  • Step 1

Download the flashmp3player from the following URL - http://www.flashmp3player.org/download.html

Kb embed mp3 player1.png
  • Step 2

Extract the flashmp3player.zip on your pc and it will create a new directory called flashmp3player as seen below.

Kb embed mp3 player2.png

  • Step 3

Once you have extracted the files, you will then need to connect to the server using an FTP client. If you have not used one before please refer to the following tutorials below.

  • Step 4

Assuming that you are now connected to the server using an FTP client, create a directory on the server and for the purpose of this tutorial I will create a folder called mp3 as seen in the example below.

Kb embed mp3 player3.png
  • Step 5

The next step is to upload the files located in the flashmp3player directory to the server by means of selecting all the files on the left (CTRL +a) and then dragging them to the right. After the files have uploaded, it should look similar to the example below.

Kb embed mp3 player4.png

  • Step 6

Navigate back to directory on your pc where you downloaded the files to and locate the readme.html file and double click on it. It should then open the instructions in your browser. You will need to follow the instructions they provided carefully on order to get the mp3 player to work.

Kb embed mp3 player5.png
  • Step 7

Open the site creator editor and click on the page that you want to embed the mp3 player on. Make sure that you have dragged the text & image module onto the desired page and click on the html option as seen below.

Kb embed mp3 player6.png
  • Step 8

You will then need to copy and paste the code provided in the readme.html file as per their instructions. Please take note of sections that I created a red square around, as you will be require that you change the paths. If you have kept the directory structure the same as the example, simply look at the example below.

Kb embed mp3 player7.png
  • Step 9

If you have followed the instructions carefully, you should see an mp3 play appear on the page after you have clicked on the site creator publish button.

Kb embed mp3 player8.png
  • Step 10

The final step is to upload your mp3 music files. You should still have your ftp client open, navigate to the mp3 directory and within the directory you will see another mp3 folder which contains the demo music files. Simply upload the desired music files to that folder and your music files should now appear on the playlist.