Simple "Mp3" Player

alan s · August 23, 2006, 08:44:28 PM

I was a bit bored so i started playing around with some html and i came up with a "simple" mp3 player in a html/javascript block. Remember i said simple so dont go expecting anything fantastic.Basic idea was you upload you songs to a directory , create a music.htm/php page and use it in a iframe.

Screen 1:

Screen 2:

So 1st.

Open up your html editor and copy this code into it

Code Select

<html>
<title>TheTeenZone Mp3 Player</title>
<body bgcolor="#99CCFF">
<script language="JavaScript">
<!--
// This will resize the window when it is opened or
// refresh/reload is clicked to a width and height of 500 x 500
// with is placed first, height is placed second
window.resizeTo(250,300)
-->
</script>
<form name="menu1">
<select name="externallinks"OnChange="location.href=menu1.externallinks.options[selectedIndex].value">
<option value="#">Playlist</option>
<option value="http://www.theteenzone.net/music/gmc.mp3">Gmc - First Thing</option>
<option value="http://theteenzone.net/music/higher.mp3">The Game-Higher</option>
<option value="http://theteenzone.net/music/holdyourheadup.mp3">Bob M- Head Up</option>
<option value="http://www.theteenzone.net/music/ringofffire.mp3">J.C - Ring Of Fire</option>
</select>
</form>

<a href="http://theteenzone.net/music.html" target="_blank"><font size="2pt" color="white">Open In New Window</font></a>
<br></br>
<font size="1pt" colour="black"> Ãƒâ€šÃ,Â© TheTeenZone.Net</font>
</body>
</html>

Change the links/title/copyright to suit your needs. then name the file as music.htm and upload to your server

note * The Link Here

Code Select

<a href="http://theteenzone.net/music.html" target="_blank"><font size="2pt" color="white">Open In New Window</font></a>

Should point to the place where the file music.htm is stored.

Next , upload any songs you want to your preferred directory and then edit the code with your links/names

Code Select

<form name="menu1">
<select name="externallinks"OnChange="location.href=menu1.externallinks.options[selectedIndex].value">
<option value="#">Playlist</option>
<option value="http://www.theteenzone.net/music/gmc.mp3">Gmc - First Thing</option>
<option value="http://theteenzone.net/music/higher.mp3">The Game-Higher</option>
<option value="http://theteenzone.net/music/holdyourheadup.mp3">Bob M- Head Up</option>
<option value="http://www.theteenzone.net/music/ringofffire.mp3">J.C - Ring Of Fire</option>
</select>
</form>

Finally in a block enter the code in a html block

Code Select

<iframe width="150" height="110" src="http://yoursite.com/music.htm"></iframe>

Demo : http://theteenzone.net/forum

Handy if you dont want to use a php mp3 player or if you only want to have 1 or 2 songs available to play.

Jpg · August 24, 2006, 01:17:31 AM

Nice but do they play? And can you play things other than mp3s?

rbh · August 24, 2006, 02:40:47 PM

on your demo i chose a song then the player loaded in the block and played the song, but then when it finished the list doesnt come back, it just remains on the player controls unless i hit refresh.

alan s · August 24, 2006, 02:54:31 PM

Quote from: rbh on August 24, 2006, 02:40:47 PM
on your demo i chose a song then the player loaded in the block and played the song, but then when it finished the list doesnt come back, it just remains on the player controls unless i hit refresh.

Came up with a solution for it, just add a bti of javascript that takes you back one page.

In a html/javascript box put in

Code Select

<iframe width="150" height="110" src="http://yoursite.com/music.html"></iframe>
<center><a href="javascript: history.go(-1)">Back To MP3 Player</a></center>

Thats instead of the previous code i mentioned to go in a block i mentioned.

Quote from: Jpg on August 24, 2006, 01:17:31 AM
Nice but do they play? And can you play things other than mp3s?

Do you mean other types of music like .wma and .wav or videos?

Demo on http://theteenzone.net/forum

alan s · August 24, 2006, 04:06:49 PM

Right i've tested it out with videos and if you want to play .wmv videos or anyother type your going to have to create a page and embed it into it then link to that page.but you can play videos from www.youtube.com or any flash files by linking directly to them in the drop down form. exact same code just change the links/copyright and text to your liking

Demo Of Video Player : http://theteenzone.net/forum ( right hand side )

Joshsux · August 25, 2006, 05:48:46 AM

can you play Midi's with this little block thing mates?

G6Cad · August 25, 2006, 07:35:48 AM

QuoteForbidden
You do not have permission to access this document.

Web Server at

This is what i get from your videoplayer and MJ+Chocolate

Jpg · August 27, 2006, 02:00:40 AM

I get the same thing, and is the mp3 player supposed to make me save it first? Because shouldn't it stream? Well I like the video player.

alan s · August 27, 2006, 09:28:39 PM

Quote from: Joshsux on August 25, 2006, 05:48:46 AM
can you play Midi's with this little block thing mates?

At a guess i'd say you can since its the quicktime player thats streaming the music and i think the quicktime player supports midis

Quote from: Mrs G6 on August 25, 2006, 07:35:48 AM
QuoteForbidden
You do not have permission to access this document.

Web Server at

This is what i get from your videoplayer and MJ+Chocolate

Hm well thats from the site hahahumor.com so i guess they stoped hotlinking but the "ring of fire" one works perfectly aswell.

Quote from: Jpg on August 27, 2006, 02:00:40 AM
I get the same thing, and is the mp3 player supposed to make me save it first? Because shouldn't it stream? Well I like the video player.

er? do you mean its asking you to download the file when you click on the track?

akulion · August 29, 2006, 12:23:24 PM

aded to block snippets index

bbTURK · August 07, 2007, 04:24:17 PM

Quote from: Alan S on August 24, 2006, 02:54:31 PM
Quote from: rbh on August 24, 2006, 02:40:47 PM
on your demo i chose a song then the player loaded in the block and played the song, but then when it finished the list doesnt come back, it just remains on the player controls unless i hit refresh.
Came up with a solution for it, just add a bti of javascript that takes you back one page.

In a html/javascript box put in

Code Select Expand
<iframe width="150" height="110" src="http://yoursite.com/music.html"></iframe> <center><a href="javascript: history.go(-1)">Back To MP3 Player</a></center>

Thats instead of the previous code i mentioned to go in a block i mentioned.

Quote from: Jpg on August 24, 2006, 01:17:31 AM
Nice but do they play? And can you play things other than mp3s?

Do you mean other types of music like .wma and .wav or videos?

Demo on http://theteenzone.net/forum

if the users doesn''t click any song but click this link, they go to previous page. how is this link change when clicked opened music html in the iframe? (sorry about my english)

CaptnSolo · August 08, 2007, 07:36:27 AM

and if you want something a little bit more with music check it on my site www.jjfriends.com and i also have it on the forums in the blocks to. it opens up in a new window. if you would like it the sign on to my forums and ill be glad to give it to you

confuzed · March 29, 2009, 04:39:00 PM

hello,

two questions

1. I have this working so long as the music folder is inside the forum eg /forum/music - thanks - but I wondered if there was something I can do to restrict access as I only want certain forum member groups to have access, and this group access I have set up in the block which works, but there is nothing to stop someone from accessing the music.htm page directly if they get the address for the player?

I really don't want people giving out the address to people outside the groups. Is this possible to restrict in some way?

2. If I create a music folder in the root, and then change the info to reflect this path, I just get an internal server error. I'm fine to keep it inside the forum directory so long as I can restrict access but I wondered why this isn't working when I link to the folder in the root.
thanks

IchBin · March 29, 2009, 05:42:39 PM

You'll have to use htaccess or something. A quick google will show you how you can do this.

Recent

User

Stats

Members

Stats

Users Online

Simple "Mp3" Player

alan s

Jpg

rbh

alan s

alan s

Joshsux

G6Cad

Jpg

alan s

akulion

bbTURK

CaptnSolo

confuzed

IchBin