Jump to content

streaming a music .mp3 file using js

mazazino

By mazazino
in Javascript Help

 Share

Recommended Posts

mazazino Member

mazazino

Posted
Posted

I have this code that plays songs online (streaming)..but it doesn't play .mp3 files..so can anyone help me get a music player for streaming mp3 files?

 

 

<script type="text/javascript">

function PlayerOpen(soundfiledesc,soundfilepath) {

    PlayWin = window.open('','','width=550,height=150,top=25,left=250,resizable=0,scrollbars=0,titlebar=0,toolbar=0,menubar=0,status=0,directories=0,personalbar=0');

    PlayWin.focus();

 

    var winContent = "<HTML><HEAD><TITLE>" + soundfiledesc + "</TITLE><LINK rel='stylesheet' type='text/css' name='style1' href='/styles/media_player.css'></HEAD><BODY bgcolor='#ffffff'><center>";

    winContent += "<div style='font-size:11px; font-weight:bold; font-family:Verdana,sans-serif;line-height:1.5'>" + soundfiledesc + "</div>";

 

    winContent += "<OBJECT width='300' height='42'>";

    winContent += "<param name='SRC' value='" + soundfilepath + "'>";

    winContent += "<param name='AUTOPLAY' VALUE='true'>";

    winContent += "<param name='CONTROLLER' VALUE='true'>";

    winContent += "<param name='BGCOLOR' VALUE='#FF9900'>";

    winContent += "<EMBED TYPE='application/x-mplayer2' pluginspage='http://www.microsoft.com/isapi/redir.dll?prd=windows&sbp=mediaplayer&ar=Media&sba=Plugin&' SRC='" + soundfilepath + "' AUTOSTART='TRUE' LOOP='FALSE' WIDTH='375' HEIGHT='42' CONTROLLER='TRUE' BGCOLOR='#e0e0e0'></EMBED>";

    winContent += "</OBJECT>";

 

    winContent += "<p style='font-size:12px;font-family:Verdana,sans-serif;text-align:center'><a href='" + soundfilepath +"'>Right-Click to Download[/url]</p>";

    winContent += "<FORM><DIV align='center'><INPUT type='button' value='Close this window' onclick='javascript:window.close();'></DIV></FORM>";

    winContent += "</center></BODY></HTML>";

 

    PlayWin.document.write(winContent);

 

    }

</script>

Link to comment
Share on other sites
RichardRotterdam Member

RichardRotterdam

Posted
Posted

I suggest you use flash for streaming media there are plenty of free players to download for doing that sort of thing and its becomming easier every day to build a media player with flash. You will also notice that most major sites stop using windows media player for streaming media because MS mediaplayer only runs on windows and flash runs on almost everything

Link to comment
Share on other sites
mazazino Member

mazazino

Posted
  • Author
Posted

There's also XSPF Player... http://musicplayer.sourceforge.net/

 

ok i downloaded it but i have no idea how to use it..i mean it was simple with the MS media player i used earlier on .rm files bcoz it was just simple js code..but this talks about playlists and creating FLV files and stuff like that..if someone could help me configure this thing i'd be grateful..

Link to comment
Share on other sites
php_tom Newbie

php_tom

Posted
Posted

OK. First note that they offer three versions, 1) Extended Version (this has the playlist with album art display, etc. the whole nine yards). 2) Slim Version (this is just a bar that plays your playlist). and 3) the Button Version (just a play/pause button). So you need to pick a version that you like for your website and download it. It comes as a .zip file from sourceforge.

 

Unzip the file. It should contain 1) a license file 2) a .fla file (this is the flash source code) 3) a .swf file (this is the compiled Flash object) and 4) a .as file (this is the ActionScript source code). Feel free to delete 1,2, and 4 unless you plan to modify the Flash source.

 

Now make a file, call it "playlist.xspf". In the file, put your songs using xml format as follows:

<?xml version="1.0" encoding="UTF-8" ?>

<playlist version="1" xmlns="http://xspf.org/ns/0/">

  <title>Song Title</title>

  <annotation></annotation>

  <creator>Song Creator</creator>

  <info>http://www.InfoLinkGoesHere.com</info>

  <location>http://www.LocationOfThisFile.com/Folder/playlist.xspf</location>

  <license>http://www.LocationOfLicenseIfAny.com</license>

  <trackList>   

 

<track>

<location>http://www.LocationOfSongNumber1.com/Song1.mp3</location>

<image>http://www.LocationOfImage.com/images/track1.jpg</image>

<annotation>Song Name</annotation>

<info>http://www.InfoURL.com/songInfo.html</info>

</track>  

<track>

Other tracks go here like above format...

</track>  

 

  </trackList>

</playlist>

Note that your playlist doesnt have to be called playlist.xspf if you dont want, it could be stuff.playlist or whatever.

 

Now just upload the player.swf or whatever its called and your playlist file to your webserver, and embed it in a web page like so:

 

See http://musicplayer.sourceforge.net/ for options you can pass in the embedded url.

 

Hope that helps, post back if you have any problems.

Link to comment
Share on other sites
tomfmason Advanced Member

tomfmason

Posted
Posted

the new beta version(1.7.1 beta 3) of scriptaculous has a sound.js(use to be audio.js from Jules at webveteran) script for this. It is very easy to use. Here is a simple example.

 

Sound.play('your_file.mp3');

 

You can stop it at anytime and can have more then one sound playing at a time. I would avoid using flash if at all possible.

Link to comment
Share on other sites
mazazino Member

mazazino

Posted
  • Author
Posted

OK. First note that they offer three versions, 1) Extended Version (this has the playlist with album art display, etc. the whole nine yards). 2) Slim Version (this is just a bar that plays your playlist). and 3) the Button Version (just a play/pause button). So you need to pick a version that you like for your website and download it. It comes as a .zip file from sourceforge.

 

Unzip the file. It should contain 1) a license file 2) a .fla file (this is the flash source code) 3) a .swf file (this is the compiled Flash object) and 4) a .as file (this is the ActionScript source code). Feel free to delete 1,2, and 4 unless you plan to modify the Flash source.

 

Now make a file, call it "playlist.xspf". In the file, put your songs using xml format as follows:

<?xml version="1.0" encoding="UTF-8" ?>

<playlist version="1" xmlns="http://xspf.org/ns/0/">

  <title>Song Title</title>

  <annotation></annotation>

  <creator>Song Creator</creator>

  <info>http://www.InfoLinkGoesHere.com</info>

  <location>http://www.LocationOfThisFile.com/Folder/playlist.xspf</location>

  <license>http://www.LocationOfLicenseIfAny.com</license>

  <trackList>   

 

<track>

<location>http://www.LocationOfSongNumber1.com/Song1.mp3</location>

<image>http://www.LocationOfImage.com/images/track1.jpg</image>

<annotation>Song Name</annotation>

<info>http://www.InfoURL.com/songInfo.html</info>

</track>  

<track>

Other tracks go here like above format...

</track>  

 

  </trackList>

</playlist>

Note that your playlist doesnt have to be called playlist.xspf if you dont want, it could be stuff.playlist or whatever.

 

Now just upload the player.swf or whatever its called and your playlist file to your webserver, and embed it in a web page like so:

 

See http://musicplayer.sourceforge.net/ for options you can pass in the embedded url.

 

Hope that helps, post back if you have any problems.

 

 

 

what should the <info> tag include?

Link to comment
Share on other sites
mazazino Member

mazazino

Posted
  • Author
Posted

well i made an xml document and i saved it as .xspf file...when i embedded the it into the webpage, i clicked on the play button (button version) but it gave me the "save as" window..as and it downloaded it..i thought it should play the song without downloading it..is that what it should be doing?

Link to comment
Share on other sites
mazazino Member

mazazino

Posted
  • Author
Posted

heres the playlist.xspf file i created:

 

<?xml version="1.0" encoding="UTF-8" ?>

<playlist version="1" xmlns="http://xspf.org/ns/0/">

  <title>Song Title</title>

  <annotation></annotation>

  <creator>Song Creator</creator>

  <location>songs/1rahib/</location>

  <trackList>

 

<track>

<location>songs/1rahib/1.mp3</location>

<image>songs/1.jpg</image>

<annotation>dfjsdfkjdskfljdsjkl</annotation>

</track>   

 

  </trackList>

</playlist>

 

 

 

and heres the embedded part:

 

<object type="application/x-shockwave-flash" width="200" height="50"

data="xspf_player.swf?playlist_url=playlist.xspf">

<param name="movie" value="xspf_player.swf?playlist_url=playlist.xspf" />

</object>

 

 

when i click on the player, it starts downloading the file...whats the problem:S?

 

Link to comment
Share on other sites
php_tom Newbie

php_tom

Posted
Posted

when i click on the player, it starts downloading the file...whats the problem:S?

OK, here's the problem. Your embedding code should be 

<object type="application/x-shockwave-flash" width="200" height="50"
         data="musicplayer.swf?playlist_url=playlist.xspf">
         <param name="movie"   value="musicplayer.swf?playlist_url=playlist.xspf" />
         </object>

At least when I downloaded the button player version, the flash object (.swf) was called musicplayer.swf, not xspf_player.swf. Try it again, it worked for me on my laptop (with a different song in your playlist).

 

what should the <info> tag include?

<info> tag is a link to info about the playlist. So if you have a playlist that's Linkin Park's Reanimation CD, you might make this a link to the Linkin Park official website, or whatever.

 

Hope that helps.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.