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:(https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Ftheteenzone.net%2Fmp3screen1.gif&hash=6e428e93d752c49e55450a561d87a9f35e2d9aca)
Screen 2:(https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Ftheteenzone.net%2Fmp3screen2.gif&hash=2c714213c9b27b1464ab7affd24de31b502554d1)
So 1st.
Open up your html editor and copy this code into it
<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
<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
<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
<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.
Nice but do they play? And can you play things other than mp3s?
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.
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
<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
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 )
can you play Midi's with this little block thing mates?
QuoteForbidden
You do not have permission to access this document.
Web Server at
This is what i get from your videoplayer and MJ+Chocolate
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. :)
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?
aded to block snippets index
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
<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)
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
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
You'll have to use htaccess or something. A quick google will show you how you can do this.