By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,400 Members | 1,160 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 449,400 IT Pros & Developers. It's quick & easy.

Embedding several songs on one page with JS player

P: n/a
I've been trying for a long time to figure this out, to have a page
with several MP3 clips, and each one having a custom start and stop
button next to them to play the track. I finally found a bit of code
that does this, but it's made for only one mp3 file. I don't know
enough about javascript to customize the code myself. I know there
probably needs to be an "array" of some sort, but I need some help
figuring out where and how that works.

Here's the code I found

<script language="JavaScript">
var state;

//URL of song - Direct path
function playerinit()
{
player.url="YOURSONG";
player.settings.autoStart = true ;
}

//Play Function
function play()
{
if (player.controls.isavailable('play'))
{
player.controls.play();
state=setInterval("updatetime()",1000);
}
}

//Stop Function
function stop()
{
if (player.controls.isavailable('stop'))
{
player.controls.stop();
clearInterval(state);
}
}
</script>
</head>

<body onload="playerinit();">

<!-- START PLAYER -->
<!-- Default Player Settings -->
<object id="player"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
type="application/x-oleobject" width="0" height="0">
<param name="autoStart" value="0">
<param name="balance" value="0">
<param name="currentPosition" value="0">
<param name="currentMarker" value="0">
<param name="enableContextMenu" value="0">
<param name="enableErrorDialogs" value="0">
<param name="enabled" value="-1">
<param name="fullScreen" value="0">
<param name="invokeURLs" value="0">
<param name="playCount" value="1">
<param name="rate" value="1">
<param name="uiMode" value="invisible">
<param name="volume" value="100">
<param name="URL" value>
<param name="defaultFrame" value>
<param name="baseURL" value>
<param name="stretchToFit" value="0">
<param name="windowlessVideo" value="0">
<param name="SAMIStyle" value>
<param name="SAMILang" value>
<param name="SAMIFilename" value>
<param name="captioningID" value>
<embed id="player" type="application/x-mplayer2" src="" height="0"
width="0">
</object>
<!-- END Default Player Settings -->

<br />

<!-- Player Controls -->
<input TYPE="image" src="PLAYBUTTONHERE.gif" value="Play "name="play"
onclick="play();">
<input TYPE="image" src="STOPBUTTONHERE.gif" value="Stop" name="stop"
onclick="stop();">
<!-- END Player Controls -->

Dec 30 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a

al***@fearofdolls.com wrote:
I've been trying for a long time to figure this out, to have a page
with several MP3 clips, and each one having a custom start and stop
button next to them to play the track. I finally found a bit of code
that does this, but it's made for only one mp3 file. I don't know
enough about javascript to customize the code myself. I know there
probably needs to be an "array" of some sort, but I need some help
figuring out where and how that works.

Here's the code I found

<script language="JavaScript">
var state;

//URL of song - Direct path
function playerinit()
{
player.url="YOURSONG";
player.settings.autoStart = true ;
}

//Play Function
function play()
{
if (player.controls.isavailable('play'))
{
player.controls.play();
state=setInterval("updatetime()",1000);
}
}

//Stop Function
function stop()
{
if (player.controls.isavailable('stop'))
{
player.controls.stop();
clearInterval(state);
}
}
</script>
</head>

<body onload="playerinit();">

<!-- START PLAYER -->
<!-- Default Player Settings -->
<object id="player"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
type="application/x-oleobject" width="0" height="0">
<param name="autoStart" value="0">
<param name="balance" value="0">
<param name="currentPosition" value="0">
<param name="currentMarker" value="0">
<param name="enableContextMenu" value="0">
<param name="enableErrorDialogs" value="0">
<param name="enabled" value="-1">
<param name="fullScreen" value="0">
<param name="invokeURLs" value="0">
<param name="playCount" value="1">
<param name="rate" value="1">
<param name="uiMode" value="invisible">
<param name="volume" value="100">
<param name="URL" value>
<param name="defaultFrame" value>
<param name="baseURL" value>
<param name="stretchToFit" value="0">
<param name="windowlessVideo" value="0">
<param name="SAMIStyle" value>
<param name="SAMILang" value>
<param name="SAMIFilename" value>
<param name="captioningID" value>
<embed id="player" type="application/x-mplayer2" src="" height="0"
width="0">
</object>
<!-- END Default Player Settings -->

<br />

<!-- Player Controls -->
<input TYPE="image" src="PLAYBUTTONHERE.gif" value="Play "name="play"
onclick="play();">
<input TYPE="image" src="STOPBUTTONHERE.gif" value="Stop" name="stop"
onclick="stop();">
<!-- END Player Controls -->
That script looks as if it is very old. It likely is designed for the
WMP and uses a type of code that gives a lot of validation errors, so I
will not use this approach. In any event, it would require major
surgery to modify it to play several sound files with controls for on
and off.

I have done what you seem to wish, except I am using wma and ra files
rather than mp3. However, that is no problem, since both the WMP and
Real players will play mp3s. Also note that I reference a Microsoft
..wax playlist file for a song that points to the url of the actual .wma
file and a Real .rpm playlist file that points to the url of the actual
..ra file. There are good technical reasons for doing this for my
application, and the playlist files are very short - mainly the url
wanted at just a bit of other code in the case of .wax.

Also, most of the heavy script work is done on the server using php.
Although the pages could be written only using javascript if served as
html, the php is required if served as true xhtml with the correct
mime type.

See http://www.cwdjr.net/souearly/songs2Root.php for the version for
the WMP.

See http://www.cwdjr.net/souearly/songs2Root.txt for some of the php
used which can not be seen by just viewing the page source. You will
see some arrays, and other php script things that look much like
javascript.

Finally see http://www.cwdjr.net/souearly/songs2RootReal.php if you
have a recent Real player.

The controls with start and stop are actually mini embedded WMP and
Real players that are generated by the player objects.

The page could of course be done without all of the elaborate display
that mostly is done in a very large external script.

The two player pages work on IE6 and the most recent versions of Opera,
Firefox, Mozilla, Netscape, and SeaMonkey if you have the required
players and do not have script turned off.

Of course this may be much more complicated than you want, and not all
hosts allow you to use php on the server. It would take quite a bit of
work to write a stripped down version that uses only javascript and no
php, strips the displays, and design the page for html only and not
xhtml. I do not have time to do this at present, since I have several
other projects going.

Dec 31 '06 #2

P: n/a

cwdjrxyz wrote:
al***@fearofdolls.com wrote:
I've been trying for a long time to figure this out, to have a page
with several MP3 clips, and each one having a custom start and stop
button next to them to play the track. I finally found a bit of code
that does this, but it's made for only one mp3 file. I don't know
enough about javascript to customize the code myself. I know there
probably needs to be an "array" of some sort, but I need some help
figuring out where and how that works.

Here's the code I found

<script language="JavaScript">
var state;

//URL of song - Direct path
function playerinit()
{
player.url="YOURSONG";
player.settings.autoStart = true ;
}

//Play Function
function play()
{
if (player.controls.isavailable('play'))
{
player.controls.play();
state=setInterval("updatetime()",1000);
}
}

//Stop Function
function stop()
{
if (player.controls.isavailable('stop'))
{
player.controls.stop();
clearInterval(state);
}
}
</script>
</head>

<body onload="playerinit();">

<!-- START PLAYER -->
<!-- Default Player Settings -->
<object id="player"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
type="application/x-oleobject" width="0" height="0">
<param name="autoStart" value="0">
<param name="balance" value="0">
<param name="currentPosition" value="0">
<param name="currentMarker" value="0">
<param name="enableContextMenu" value="0">
<param name="enableErrorDialogs" value="0">
<param name="enabled" value="-1">
<param name="fullScreen" value="0">
<param name="invokeURLs" value="0">
<param name="playCount" value="1">
<param name="rate" value="1">
<param name="uiMode" value="invisible">
<param name="volume" value="100">
<param name="URL" value>
<param name="defaultFrame" value>
<param name="baseURL" value>
<param name="stretchToFit" value="0">
<param name="windowlessVideo" value="0">
<param name="SAMIStyle" value>
<param name="SAMILang" value>
<param name="SAMIFilename" value>
<param name="captioningID" value>
<embed id="player" type="application/x-mplayer2" src="" height="0"
width="0">
</object>
<!-- END Default Player Settings -->

<br />

<!-- Player Controls -->
<input TYPE="image" src="PLAYBUTTONHERE.gif" value="Play "name="play"
onclick="play();">
<input TYPE="image" src="STOPBUTTONHERE.gif" value="Stop" name="stop"
onclick="stop();">
<!-- END Player Controls -->

That script looks as if it is very old. It likely is designed for the
WMP and uses a type of code that gives a lot of validation errors, so I
will not use this approach. In any event, it would require major
surgery to modify it to play several sound files with controls for on
and off.

I have done what you seem to wish, except I am using wma and ra files
rather than mp3. However, that is no problem, since both the WMP and
Real players will play mp3s. Also note that I reference a Microsoft
.wax playlist file for a song that points to the url of the actual .wma
file and a Real .rpm playlist file that points to the url of the actual
.ra file. There are good technical reasons for doing this for my
application, and the playlist files are very short - mainly the url
wanted at just a bit of other code in the case of .wax.

Also, most of the heavy script work is done on the server using php.
Although the pages could be written only using javascript if served as
html, the php is required if served as true xhtml with the correct
mime type.

See http://www.cwdjr.net/souearly/songs2Root.php for the version for
the WMP.

See http://www.cwdjr.net/souearly/songs2Root.txt for some of the php
used which can not be seen by just viewing the page source. You will
see some arrays, and other php script things that look much like
javascript.

Finally see http://www.cwdjr.net/souearly/songs2RootReal.php if you
have a recent Real player.

The controls with start and stop are actually mini embedded WMP and
Real players that are generated by the player objects.

The page could of course be done without all of the elaborate display
that mostly is done in a very large external script.

The two player pages work on IE6 and the most recent versions of Opera,
Firefox, Mozilla, Netscape, and SeaMonkey if you have the required
players and do not have script turned off.

Of course this may be much more complicated than you want, and not all
hosts allow you to use php on the server. It would take quite a bit of
work to write a stripped down version that uses only javascript and no
php, strips the displays, and design the page for html only and not
xhtml. I do not have time to do this at present, since I have several
other projects going.
Thanks. What I really want though is on this page
www.fearofdolls.com/music.html, instead of just having (listen) links
next to each song, I want a button to start and stop it, and I want the
track to just play while you're on the page, and not open up a new page
or window or player, and not have a huge player embeded in the page,
just little start and stop buttons.
I'll take a look at your pages more in depth and see if that might be
what I need. I'm just beginning to learn js, php, and am swtiching from
html to xhtml.

Dec 31 '06 #3

P: n/a

al***@fearofdolls.com wrote:

Thanks. What I really want though is on this page
www.fearofdolls.com/music.html, instead of just having (listen) links
next to each song, I want a button to start and stop it, and I want the
track to just play while you're on the page, and not open up a new page
or window or player, and not have a huge player embeded in the page,
just little start and stop buttons.
I'll take a look at your pages more in depth and see if that might be
what I need. I'm just beginning to learn js, php, and am swtiching from
html to xhtml.
On my page you just get tiny embedded players just to the left of each
song title. They are reduced to about the same size as the text and are
mainly just a start-stop control. You are not directed to another page,
and you do not bring up a large player. The point is that a player can
be reduced to tiny size and be mainly just a start stop button. The
advantage is that all of the controls are built into the player object,
so you do not have to try to script the player itself, which is very
difficult to get to work on most modern browsers. If you are interested
in IE browsers with the WMP only, there is less of a problem. You have
as many mini players as there are songs. I do not care what code you
use. However, I wanted to set the record straight. Your link did not
work for me.

Jan 1 '07 #4

This discussion thread is closed

Replies have been disabled for this discussion.