Please don't click on these links yet.

Under construction: ? * # 0-9 |A |B |C |D |E |F |G |H |I |J |K |L |M |N |O |P |Q |R |S |T |U |V |W |X |Y |Z

Your opinion is needed with a new "FAQ" I'm thinking of writing up. Click on this "FAQ link" now and leave a comment if you can spare the time.
Tutorials : How I made it toolbars paginations buttons widgets tweeks mega tweeks everything else inspiration ideas FAQ problems Fixing problems

Cross browser customizable playlist MP3 Player for your blog

Sunday, December 2, 2012  at 3:53 AM

Have you ever wanted to add your own mp3 files to an MP3 player that also has a playlist? Well, now you can. Are you tired of having to join a website just to get an mp3 player's code? That is no longer necessary anymore. It's all free and you just read my instructions; copy and paste; and type a bit of text. That's all there is to it and this tutorial. I stumbled across the code for this multiplayer mp3 player with a playlist by chance but it wouldn't display at first. Now it does because I got it to work properly on one of my blogs. So now you can add it to your blog and can add your own mp3 files to it. The tutorial below is easy to follow and even easier to achieve the final result. The best thing about this player is you can add as many mp3 files to it as you want - but remember to follow the instructions in this tutorial below. Once the height of 100 pixels has been reached the player will automatically create a scrollbar so you can scroll through all the mp3 files you've added, in order to play them.

The thing is, the hardest part of this tutorial is figuring out what you want to use the mp3 player for on your blog. In my case I record bird sounds on my digital camera in video format. I then upload those videos to Youtube and then convert the uploaded Youtube videos to MP3 files. I then add those MP3 files that I've saved to my computer to my Mediafire account. Finally, I'm creating a playlist of all the different sounds that each bird species makes that I've recorded. The first playlist I've made so far is of Eastern Rosella sounds that they've made throughout the course of one year. I'll be making a lot more playlists like the one above but need to convert a lot of my videos into mp3 files before I can do that.

This tutorial is entirely about adding audio mp3 file urls from your Mediafire account to the player above. The same principle should work for other mp3 files as long as they are hosted somewhere, and there is a download link available for those files. Without a download link to click on the mp3 file urls you try to add to this player (from another website other than Mediafire) may not work.

Anyway, in a 3 hour or more attempt at finding an MP3 Player for my Birds of Tenterfield blog, to help lighten the blog loading time, I mucked around with various mp3 player codes trying to add a playlist to them. Finally I got one to work, and after figuring out how to add the playlist, my attempts finally payed off. The MP3 player above is the final result.

Below is the actual code for the above MP3 player and it's playlist. It works on Internet Explorer, Google Chrome, and Firefox. Other browsers I'm uncertain about. Here's the code:

<center><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_multi.swf" width="500" height="100"> <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_multi.swf" /> <param name="bgcolor" value="#ffffff" /> <param name="FlashVars" value="mp3=http://205.196.120.147/2ngc03f9h2qg/d7j0b0b877dvsa8/Eastern+Rosella+14+September+2012+sounds.mp3|http://199.91.152.95/8xu9saewls3g/6cw7x739870v6wr/Eastern+Rosella+calling+for+it%5C%27s+friends.mp3|http://205.196.123.167/6ie7h4ald9cg/axkfyvgnasqe9pt/Eastern+Rosella+mimics+Bell+Miner+calls.3gp.mp3&amp;title=2012, 14 September - A lone Eastern Rosella singing a variety of calls|2012, 05 August - A lone bird calling for it's friends|2012, 01 April - Bell Miner mimicry&amp;bgcolor1=189ca8&amp;bgcolor2=085c68&amp;width=500" /> </object></center>
Customizing the player

Adding your own MP3 files from Mediafire to the player and playlist:

Let's say you have already added your own mp3 files to Mediafire to speed this tutorial up. The first thing you need to do is to find an mp3 you want to add to the player. Simply click on the title of the mp3 file in your account. A download page will appear with the file above it. Right click on the green "Download" button and select the "Copy shortcut" option. In the above code there are urls for three mp3 files. Each mp3 url is separated by a | symbol, and each url must be separated by a | symbol for it to work. Highlight the first url and paste it straight over the top of mine.

The first mp3 url is:

http://205.196.120.147/2ngc03f9h2qg/d7j0b0b877dvsa8/Eastern+Rosella+14+September+2012+sounds.mp3

After you have pasted in your first mp3 url go down to the part where I have written a description of each mp3 file. Each one starts with the number "2012" - which is in reference for the year we are currently in. Type in your own description for your first mp3 file in place of my text (which is:  2012, 14 September - A lone Eastern Rosella singing a variety of calls). At the end of that text there will be a | symbol. The | symbol is needed to separate each mp3 title in the playlist, so make sure it is always there. Repeat these steps (the last 2 paragraphs) for each new mp3 file you want to add to the mp3 player. Carefully go through the urls and text you added to make sure you did not make any mistakes.

Remember, do not add a | symbol at the end of the very last mp3 url nor at the end of the text description for it.

Adjusting the width and height of the mp3 player: To adjust the width of the player change "500" to whatever width you want. There are two instances of "width" in the code, at the top and at the bottom. Change both of them to your player's new width. At the top of the code change the height from "100" to whatever height you want. The width and height are measured in pixels!

PLEASE NOTE: On changing the width - if you add a really long title for the description of the mp3 file you added, all the text may not show up in the playlist. You will need to rewrite the description and make it shorter in length.

That's it. Once you've done all of that save your post/page and you are done. Start creating your own mp3 player's playlist today and add it to your blog. Enjoy the fun!

Some suggestions for using this mp3 player:
  • Birds sounds
  • Your favourite music
  • Music by your favourite artist
  • Podcasts in mp3 format
  • Audio ebooks in mp3 format
  • Make your own recordings/tutorials and turn them into mp3 files

0 comments:

Your Answer Thanks for contributing an answer to Blogger Tutorials for everyone! Please make sure your answer is NOT a SPAM comment, as such comments will be deleted. Provide details and share your research. Avoid statements based solely on opinion; only make statements you can back up with an appropriate reference, or personal experiences. Comment Options to add to the form below:
Of course, you can add various combinations of the above to your comment as long as you place the ending tags in the right locations.


Features:

To change your text to bold simply type in a left facing arrow then a UPPERCASE letter b then a right facing arrow. Then add your text, followed by typing in a left facing arrow, then type in /B and then a right facing arrow.

To change your text to italics simply type in a left facing arrow then a lowercase letter i then a right facing arrow. Then add your text, followed by typing in a left facing arrow, then type in /i and then a right facing arrow.

To change the colour of your text type in [co="red"]Add your text here[/co] You can change the colour of the text by either typing in the colour's word or by adding a hex colour code that includes the hash symbol.

Your text goes here. To add a marquee text type in [ma]Add your text here[/ma]

To add an image or gif type in [im]Add your image or gif URL here[/im]

Of course, you can add various combinations of the above to your comment as long as you place the ending tags in the right locations.

To add a Youtube video as a comment use either one of the two codes below and replace the video url with the one you want to add as a comment.
[video=ADD-ENTIRE-VIDEO-URL-THAT-YOU-VIEW-ON-THE-WATCH-PAGE-ON-YOUTUBE-HERE]
[video=ADD-ENTIRE-VIDEO-URL-THAT-YOU-VIEW-ON-THE-watch?feature=player_detailpage-HERE]

Scrollbox codes

<a target='_blank' title='DON'T TOUCH MY PHONE' href='ADDYOURURLHERE'><img src='https://lh4.googleusercontent.com/-qSyLJ0X94nk/T-_ekHbo_mI/AAAAAAAAHmY/qk0v-X5s32s/s320/58298-dont-touch-my-phone.png' border='0'/></a>

This free script provided by
JavaScript Kit

FAQ

YOUR OPINION COUNTS! A list of topics that I am thinking of writing about but need feedback from visitors before I go ahead with it.

Click to view more Pages
 

This site consists of tutorials that you would not normally see elsewhere. I am adding tutorials that I have either tweeked or created myself, using existing code already found on the Internet.

Back To Top Image by Cool Text: Logo and Button Generator - Create Your Own Logo

Scroll to Bottom Back to Top