# Javascript Music Player



## littlemisslaura (Jun 6, 2008)

Okay, so I'm not great with Javascript, my knowledge is very basic. I'm using a Vista laptop with Internet Explorer...

I'm creating a website, and I want music to play on load. I want the "player" to be hidden but to have three custom images as play, pause and stop.

This is what I have so far:

Head:

```
<script language="JavaScript" src="musicplay.js"></script>
<script language="JavaScript">
function playerinit(){
player.url="scotlandthebrave.mp3"; // music path
}
</script>
```
Body:

```
<body onload="playerinit();">
<div align="right">
      
<object id="player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject" width="0" height="0">
<param name="autoStart" value="1">
<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></noscript>

<input type="image" src="images/play.gif" value="Play" name="Play" title="Play" onClick="play();" />
<input type="image" src="images/pouse.gif" value="Pause" name="Pause" title="Pause" onClick="pause();" />
<input type="image" src="images/stop.gif" value="Stop" name="Stop" title="Stop" onClick="stop();" />
</div></body>
```
musicplayer.js

```
var state;
function play(){
if(player.controls.isavailable('play')){
player.controls.play();
state=setInterval("updatetime()",1000);
}
}
function pause(){
if(player.controls.isavailable('pause')){
player.controls.pause();
clearInterval(state);
}
}
function stop(){
if(player.controls.isavailable('stop')){
player.controls.stop();
clearInterval(state);
}
}
```
It works...it plays, pauses stops and blah blah, only thing is, there's an error in the script somewhere! I know it's not important considering it's working and all, but it looks unprofessional!

you can look here if ya like...

www.lauralane.co.uk/sdpbhd

Any help is greatly appreciated! xxx


----------



## Shadow2531 (Apr 30, 2001)

Keep in mind that the scripting you're trying to use is for the WMP 7+ API. That's available for IE, but only available for FF, Opera and Safari Win32 if you install the new FF WMP plugin. If you don't, you'll be working with the old 6.4 API in FF, Opera and Safari and you might need Java installed, turned on and load a special applet to turn on all the 6.4 api features.

Also, keep in mind that the scripting is only going to work on windows unless you can find unix and mac browser plugins that can play mp3s and implement the WMP API.

Also note that you can't have two elements with the same id attribute and note that in your markup, FF, Opera and Safari will be getting the embed element while IE will be getting the object element.

Here's an example you can look at to see the kind of things involved.


```
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            object#player, p#object_holder {
                padding: 0;
                margin: 0;
                width: 0;
                height: 0;
            }
        </style>
        <script>
            window.onload = function() {
                var player = document.getElementById("player");
                var url = "http://www.lauralane.co.uk/sdpbhd/scotlandthebrave.mp3";
                var playButton = document.createElement("button");
                playButton.appendChild(document.createTextNode("Play"));
                var stopButton = document.createElement("button");
                stopButton.appendChild(document.createTextNode("Stop"));
                var pauseButton = document.createElement("button");
                pauseButton.appendChild(document.createTextNode("Pause"));
                // For IE, and browsers using np-mswmp.dll from 
                // http://port25.technet.com/pages/windows-media-player-firefox-plugin-download.aspx
                if (player && player.settings) {
                    player.settings.autoStart = false;
                    player.URL = url;
                    playButton.onclick = function() {
                        player.controls.play();
                    };
                    document.body.appendChild(playButton);
                    stopButton.onclick = function() {
                        player.controls.stop();
                    };
                    document.body.appendChild(stopButton);
                    pauseButton.onclick = function() {
                        player.controls.pause();
                    };
                    document.body.appendChild(pauseButton);
                }
                // For browsers besides IE that are using the Netscape 6.4 WMP plugin from
                // http://www.microsoft.com/downloads/details.aspx?FamilyID=99655624-ca38-49b7-a701-93f5f0e501dd&displaylang=en
                else if (player && player.SetAutoStart) {
                    setTimeout(function() {
                        player.SetAutoStart(false);
                        player.SetFileName(url);
                        playButton.onclick = function() {
                            player.Play();
                        };
                        stopButton.onclick = function() {
                            player.Stop();
                        };
                        pauseButton.onclick = function() {
                            player.Pause();
                        };
                    }, 1000);
                }
                if (player && (player.SetAutoStart || player.settings)) {
                    document.body.appendChild(playButton);
                    document.body.appendChild(stopButton);
                    document.body.appendChild(pauseButton);
                }
            };
        </script>
    </head>
    <body>
        <p id="object_holder">
            <!--[if !IE]>-->
            <object id="player" type="application/x-mplayer2"></object>
            <!--<![endif]-->
            <!--[if IE]>
            <object id="player" classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6"></object>
            <![endif]-->
        </p>
    </body>
</html>
```
You're probably better off using flash to play the mp3.

For example, see this simple one and the source for it.

Someone will probably post some real flash player suggestions for you.


----------



## Eriksrocks (Aug 7, 2005)

I'd recommend just using this flash player. It supports MP3s, and I think it's fairly easy to use.


----------

