TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome to TinyPortal. Please login or sign up.

April 18, 2024, 04:44:46 PM

Login with username, password and session length
Members
  • Total Members: 3,885
  • Latest: Growner
Stats
  • Total Posts: 195,164
  • Total Topics: 21,219
  • Online today: 196
  • Online ever: 3,540 (September 03, 2022, 01:38:54 AM)
Users Online
  • Users: 0
  • Guests: 196
  • Total: 196

Simple "Mp3" Player

Started by alan s, August 23, 2006, 08:44:28 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

alan s

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

<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.


Jpg

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

rbh

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

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

alan s

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

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

G6Cad

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

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

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

aded to block snippets index