• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 420
  • Last Modified:

Some questions about playing music from a web page.

At this site I am working on:

http://www.justmelimited.com/linda

music plays when the first page loads, if the browser security allows (run ActiveX control),  (but only for IE so far, not FireFox).  

However, when the user goes to another page on the site, the music stops.  

I would like for the music to continue while the user is still on the site unless he/she explicitly turns it off.   And I would like for it to play in both IE and FireFox.

How can I accomplish this?

Thanks in advance.
0
codefinger
Asked:
codefinger
  • 16
  • 10
  • 3
  • +1
7 Solutions
 
Dave BaldwinFixer of ProblemsCommented:
The most common method is to use frames and put a Flash MP3 in a small one that doesn't change and the normal code in the other frame.  There are quite a few.  This is one that I have used: http://musicplayer.sourceforge.net/
0
 
codefingerAuthor Commented:
I wish an example had been provided for this, because I don't quite understand what he is trying to say here (but this is exactly what I want to do):

The music player can also be used to play single mp3 files instead of playlists, the parameters are:
song_url : the url of the single mp3 you want to play
song_title : the text to replace the players default's


Does "song_url" replace the word "playlists"?   (Most of the help links cited on the web page are broken.)
0
 
codefingerAuthor Commented:
Please check out the source at this location and explain what I did wrong.  I am clueless...

http://www.justmelimited.com/linda/musicplayer.aspx

(I did upload the player files to the site, just below the root.)

Thanks!

(When this is working I will include it in an iFrame on every page.)
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
Frosty555Commented:
Google has a little-known flash player that I've used in the past with success. It only require flash, so no ActiveX / special plugins needed.

http://www.labnol.org/internet/design/html-embed-mp3-songs-podcasts-music-in-blogs-websites/2232/

As DaveBaldwin said, the easiest thing to do is to just put it into a small frame so it stays alive even though the user navigates through the other frame.
0
 
Dave BaldwinFixer of ProblemsCommented:
Object code:

<object type="application/x-shockwave-flash" width="400" height="170"
data="http://www.justmelimited.com.com/xspf_player_slim.swf?playlist_url=http://yourdomain.com/yourplaylistlist.xspf">
<param name="movie" 
value="http://www.justmelimited.com.com/xspf_player_slim.swf?playlist_url=http://yourdomain.com/yourplaylistlist.xspf" />
</object>

Open in new window


Playlist format:
<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
    <trackList>
        <track>
			<title>&quot;Hallelujah&quot; by Jeff Buckley</title>
			<location>Music/Hallelujah.mp3</location>
			</track>
     </trackList>
</playlist>

Open in new window


iFrames will not work because they get loaded/reloaded with every page load.  See here for frames: http://www.w3schools.com/html/html_frames.asp   Put your *.aspx page inside one frame and your music code inside another.
0
 
codefingerAuthor Commented:
Dave, I don't know how to make a flashplayer shockwave playlist. (xspf extension)  (in fact I know less than nothing about flash)...that is why I asked about playing a single mp3 file, did not seem quite as intimidating.  

I tried the test page with limited success....the embeded button version doesn't play anything, and the menu version ALMOST works, but after it autostarts when I click on the button to stop it, it stops, but clicking on the button again doesn't do anything except bring up an empty list with a prompt for the user to pick a song!

Can you show me how to play ONE mp3 file without using a playlist?  

Thanks!
0
 
codefingerAuthor Commented:
Oops....just realized you are showing me how to make a playlist above...OK, I will make another stab at it.   Wish me luck!
0
 
codefingerAuthor Commented:
Frosty, thought I would try your suggestion to see if it was simpler than Dave's, but no joy.

Can you check the source here and see if I did something wrong?


http://www.justmelimited.com/linda/music/musicplayer.aspx


Thanks!
0
 
codefingerAuthor Commented:
Okay Dave, now trying your solution and no joy there either...had no idea this was going to be so friggin' difficult...then again maybe I am just not too bright...anyway...



Playlist file looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
    <trackList>
        <track>
            <title>&quot;Hallelujah&quot; by Jeff Buckley</title>
            <location>Hallelujah.mp3</location>
        </track>
    </trackList>
</playlist>

...and is saved with an xspf extension.


Please check out this page and see what I might be doing wrong.  I copied the player and the playlist.xspf into the Music directory, everything takes place there.)

http://www.justmelimited.com/linda/music/musicplayer2.aspx



Thanks!
0
 
Dave BaldwinFixer of ProblemsCommented:
No you didn't.  http://www.justmelimited.com/linda/music/playlist.xspf is 404 Not Found.
0
 
codefingerAuthor Commented:
Okay Dave, I did upload it, but there were some problems with the MIME type and my hosting service.  I got that worked out so at least the file can be found now, but still no joy on the player page.

Can you work out what I am doing wrong?

Thanks!
0
 
Dave BaldwinFixer of ProblemsCommented:
Try this instead:

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

Open in new window

0
 
codefingerAuthor Commented:
Beautiful!

http://www.justmelimited.com/linda/music/musicplayer.aspx

Now how do I get it to start when it loads? I am trying to add autoplay="true" as a parameter, but I may have the syntax incorrect.

Please take another look at the page (which is now not MusicPlayer2 but MusicPlayer), and see where I may have made a mistake in the source code.

Thanks!
0
 
Dave BaldwinFixer of ProblemsCommented:
Try this:

<object type="application/x-shockwave-flash" width="400" height="170"
data="xspf_player_slim.swf?playlist_url=playlist.xspf&autoplay=true">
<param name="movie" 
value="xspf_player_slim.swf?playlist_url=playlist.xspf&autoplay=true" />
</object>

Open in new window

0
 
codefingerAuthor Commented:
So far I am getting a "frames is not a supported element" message, and the frameset tag is ignored....but that is when I am trying to put a single frame inside the index page.

To use frames, do I need to have to create a new page that uses a frameset with index and musicplayer as frames, or is there any way to just put a frame inside index that refers to MusicPlayer?

Thanks!
0
 
Dave BaldwinFixer of ProblemsCommented:
You need "to create a new page that uses a frameset with index and musicplayer as frames".  You can make the musicplayer part very small.  The other frame where 'index' gets loaded is where the rest of the content will be.
0
 
codefingerAuthor Commented:
Okay, trying this out, but for some reason the second frame does not display.

http://www.justmelimited.com/linda/mainframes.htm

Can you figure out what I did wrong?

Thanks!
0
 
Dave BaldwinFixer of ProblemsCommented:
Well, try this.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<frameset rows="70%,30%">
        <frame src="index.aspx" />
        <frame src="Music/MusicPlayer.htm" />
</frameset>
</html>

Open in new window

0
 
codefingerAuthor Commented:
Looking pretty good now!

Having to scroll in the top frame to get to the table below the picture with all the links is a little annoying, but tolerable.   This definitely solves the problems that prompted me to post!  I can jump around in the top frame and the music keeps playing from the bottom one.  And it works in both Firefox and Explorer.

Thanks Dave, you REALLY earned the points on this one!
0
 
codefingerAuthor Commented:
Hmmm....pictures look pretty OK in FireFox, but get way too big in IE....shall I post another question?
0
 
Dave BaldwinFixer of ProblemsCommented:
They both look the same here.  I would scale / resize the pictures to the size they are being shown at instead of making the browser do it.  It reduces the loading time for the larger pictures.  I would put only the music player in the top frame with a height of 28 to 50px.  Put your credits in the index page below.
0
 
Dave BaldwinFixer of ProblemsCommented:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<frameset rows="28px,*">
        <frame src="Music/MusicPlayer.htm" />
        <frame src="index.aspx" />
</frameset>
</html>
0
 
BillDLCommented:
codefinger, I was going to contribute some ideas when I visited the first link in your question, but having scrolled down and seen the developments I see you are in good hands and things are beginning to take shape.  My reason in posting is simply to offer my most sincere condolences.
0
 
codefingerAuthor Commented:
Thank you BillDL.
0
 
codefingerAuthor Commented:
Dave, great job with the question, thanks!
0
 
Dave BaldwinFixer of ProblemsCommented:
You're welcome, glad to help.
0
 
BillDLCommented:
codefinger

I've just been looking again at the picture of Linda.  It is slightly squashed vertically because of the pixel dimensions you have set in your:

.style1 {
    width: 468px;
    height: 426px;
}

The original image file you used (toasting.jpg) is 1049 wide x 1039 pixels.  If reduced to 468 pixels wide while maintaining the correct aspect ratio, the image would have a height of 464 pixels.  So the height specified in the style you used for the image is squashing it down vertically by 38 pixels, which is just enough to be noticeable.

May I suggest that you either use dimensions in that style that keep the aspect ratio of the original image, eg:

.style1 {
    width: 468px;
    height: 464px;
}

or first resize the image in an image editor and then use the finished pixel dimensions of that image in your style1.

The fact that the web page code is taking an image and reducing it to about 45% of its actual size for display in the page isn't ideal.  Generally it is best to load an image at its actual size.

Would you like me to resize the image for you and perhaps try and remove some of the yellowish colour cast from it?

You have the same squashing issues with the top right and bottom right thumbnail images on your pictures page.  Personally I would make your thumbnails smaller.  If you would like some ideas on how to present them in nice little frames with drop shadows or similar, and have them open maybe as "overlays" like on facebook, then just ask.

Note:  I posted this before seeing that Dave had already pointed out the issues with making the browser resize the image.

Bill
0
 
codefingerAuthor Commented:
Bill, good eye.  I did not see those issues with the main picture, but I tried to implement one of your suggestions.   Please take another look and see if I was successful...

http://www.justmelimited.com/linda/

I don't see the yellowish cast (but Linda always did say I have no eye for color!).  

Whatever is wrong with the first picture, I will greatly appreciate your help in fixing it.

--Al
0
 
BillDLCommented:
Hi Al.  Sorry, I fell asleep.  It's the very early hours of the morning here and I will need to go to bed.  I hope you don't think I was being critical.  There's nothing actually wrong with your main image that needs fixed apart from the way it was being squashed down a little.  It's a photo taken a couple of decades ago I would guess, and is a scan of that photo print.  It's very much like the ones I have from the same era.

Try using this resized one and change the "426px" dimension to "464px" in your style where shown below:

<style type="text/css">
        .style1
        {
            width: 468px;
            height: 464px;
        }
toasting2.jpg
0
 
codefingerAuthor Commented:
Nuts.  My computer just crashed hard (good thing I keep important files on an external hard drive!).
I will have to work on this later.  Thanks Bill, no, I do not think you were being critical.  I think you are being helpful, and I appreciate it.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

  • 16
  • 10
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now