Solved

Some questions about playing music from a web page.

Posted on 2012-04-04
30
398 Views
Last Modified: 2012-04-07
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
Comment
Question by:codefinger
  • 16
  • 10
  • 3
  • +1
30 Comments
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 500 total points
ID: 37809232
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
 

Author Comment

by:codefinger
ID: 37809305
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
 

Author Comment

by:codefinger
ID: 37809357
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
 
LVL 31

Expert Comment

by:Frosty555
ID: 37809382
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
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 500 total points
ID: 37809386
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
 

Author Comment

by:codefinger
ID: 37809408
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
 

Author Comment

by:codefinger
ID: 37809415
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
 

Author Comment

by:codefinger
ID: 37814816
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
 

Author Comment

by:codefinger
ID: 37814864
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
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 37814890
No you didn't.  http://www.justmelimited.com/linda/music/playlist.xspf is 404 Not Found.
0
 

Author Comment

by:codefinger
ID: 37816121
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
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 500 total points
ID: 37816447
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
 

Author Comment

by:codefinger
ID: 37816793
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
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 500 total points
ID: 37817352
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
 

Author Comment

by:codefinger
ID: 37817891
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 37817911
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
 

Author Comment

by:codefinger
ID: 37818211
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
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 500 total points
ID: 37818240
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
 

Author Comment

by:codefinger
ID: 37818297
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
 

Author Comment

by:codefinger
ID: 37818304
Hmmm....pictures look pretty OK in FireFox, but get way too big in IE....shall I post another question?
0
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 500 total points
ID: 37818439
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
 
LVL 82

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 37818440
<!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
 
LVL 38

Expert Comment

by:BillDL
ID: 37820295
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
 

Author Comment

by:codefinger
ID: 37820335
Thank you BillDL.
0
 

Author Closing Comment

by:codefinger
ID: 37820340
Dave, great job with the question, thanks!
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 37820460
You're welcome, glad to help.
0
 
LVL 38

Expert Comment

by:BillDL
ID: 37820469
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
 

Author Comment

by:codefinger
ID: 37820494
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
 
LVL 38

Expert Comment

by:BillDL
ID: 37820610
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
 

Author Comment

by:codefinger
ID: 37820662
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

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Read about why website design really matters in today's demanding market.
Viewers will learn the basics of making and using Impulse Kits in Ableton Live. Load new Impulse into an empty MIDI track: Fill the 8 empty sample slots with drum samples: Adjust parameters to tailor each sound as desired: Proceed to create be…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now