So that visitors to my web site can listen to my songs, I have links like this:

Listen to <a href="SONGNAME.mp3">SONGNAME</a>

...but when the link is clicked, the browser window remains the same and the audio player (on my computer, Quicktime) shows itself in the window.

Is there an HTML tag to cause the audio device to open in a new window?

And can I define the size of that window?

Or, best of all, can the audio file be heard without any visible change to the web page?

~ beau

Use the same method as is used in my How to stream video from your website in a separate window article that I previously showed you, beau. Just resize the window accordingly for the audio file, same as you would do for the video file.

That article shows how to open the player controls in a separate sized window (as you are asking for now). If you'd rather have the player controls 'embedded' within a web page then refer to this article instead... How to stream music or audio from your website

One example of a a music file opening in a separate sized window can be found here... http://nunzioweb.com/gwam/

Just click on the music icon toward the top of that page, accompanied by the words 'Listen to Music', which looks like this...

You will see a separate window open containing the music controls for the MP3 file, along with an option to End Song/CLOSE WINDOW.

beau...

I was just thinking. You never replied to that other thread to indicate whether or not you were successful in implementing the video code. If for any reason you are having difficulties doing so, either with video there or audio here, then let me know. I'll take the time to write the specific code you will need for your web page(s). But I will also need to actually examine the source code to whatever page or pages where you will be needing the coding. I've noticed that you do not indicate any link to your website here at the forums, either in your profile or in your sig. If you do not want to reveal the site location publicly, then you can email me personally with the location to the page(s) in question. Indicate in your email the exact URL's (locations) of any audio and/or video files, the location of the page(s) where the video and audio is needed, and where on each of the pages you require links for them, and I'll get it all set up for you.

Take care,
Tom

hi tom ~
my apologies for being so slow to reply
i'm in the midst of major personal & professional obligations and i'll get back to you when i get a fraction of a second, who knows when
i strongly suspect that your articles will cover everything i need...i just need the time to pay full attention to them
~ beau

No probs, beau.
But if you do run into any problems, reply back here and I'll help.

Take care,
Tom

Tom ~

Sorry to bother you again with all this, but I've tried using the code you suggest in your http://nunzioweb.com/streaming_audio-example.htm
(and below I've included a copy of the text as I put it in my index.htm, and my music.m3u file), and I've done it over and over, probably a dozen times, trying to make sure that I'm entering it correctly, but it just doesn't work. Clicking the button on the tape transport image doesn't work, no matter how many times it is clicked. And there's nothing about the tape transport image to suggest there are more than one song to be heard.

In the end, I'd just as soon just have the name of the song as a link, so I can use
<a href="songname.mp3">Songname</a> for my site's visitors to click.
Is there a way this simple link can be used so that the user's default media player appears in a new window?
That would really be the ideal solution for me.

Thanks again...sorry to be such a pain about this

~ beau

Here's the source code from my (non-functioning page):
<OBJECT ID="MediaPlayer1" CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"

CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab# Version=5,1,52,701" STANDBY="Loading Microsoft Windows®

Media Player components..." TYPE="application/x-oleobject" width="280" height="46">
<param name="fileName" value="http://www.beaujohnson.com/music.m3u">
<param name="animationatStart" value="true">
<param name="transparentatStart" value="true">
<param name="autoStart" value="false">
<param name="showControls" value="true">
<param name="Volume" value="-300">
<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"

src="http://www.beaujohnson.com/music.m3u" name="MediaPlayer1" width=280 height=46 autostart=0 showcontrols=1 volume=-300>
</OBJECT>

and the .m3u file is:
http://www.beaujohnson.com/Secrets.mp3
http://www.beaujohnson.com/Gypsy.mp3

I've checked it in both IE and Firefox browsers, and it works perfectly fine, beau. Using each of those browsers, and having the 2 songs that are referenced in your M3U playlist file play in both browsers identically, tells me that both the EMBED (for IE) and the OBJECT code (for non-IE browsers) is working just fine. Also, at last check, when viewing the source code for your index.htm page (which contains the object-n-embed code), the code is fine. No errors/mistakes, and aside from a bit of buffering at the very start (probably due to slow server response), the 2 songs play flawlessly.

Nor will there be, other than the availability of the "Next" and "Previous" buttons. There are limitations in an M3U playlist file within WMP object-n-embed coding on a web page, and that is one of them. If you prefer the site visitor to have a listed 'choice' of songs, then perhaps try something similar to what I do within my Multiple Track Stream Example.

Not possible within an embed in a web page. The users default media player application will be the "window" itself. An application can not be embedded into a web page, but certain applications, such as Windows Media Player, have object and embed controls (via a plugins page), and the WMP object and embed controls are the controls in use in my article, throughout my personal site, and currently what you are using on your index.htm page at your server. WMP is best for cross-browser compatibility as well.

Take care,

Tom

Tom ~

Once again, thanks for your extraordinary patience!

The single-song control is now up on my site (www.beaujohnson.com) and working, although the play button has to be clicked two times to make it work the first time (after that a regular single click works the controls).

OK, now I'm ready to try the multiple track controls...I know how to create the .m3u playlist file containing several songs...

...but on your page (http://nunzioweb.com/streaming_audio-example.htm) there's the
Cross-browser Media Player object/embed code
but that seems to be only for a single audio file...I've also looked at your page
http://nunzioweb.com/stream_example.htm
but it's a real-time listening example with no sample code offered...
...what should I add to the sample 'How To Stream Music or Audio code' so that it will work for multiple mp3's?

(I've set up my signature now with my web site's URL, at your suggestion)

beau...

Okay. Rather than posting any sample code here, or creating a new 'article' on how to achieve what I do at this page, I've instead recreated your index.htm page, utilizing something similar to what I did there.

Take a look...

http://nunzioweb.com/beau/

If you are satisfied with what I've done, let me know.
If it requires any changes, let me know.
In either case, once you've informed me that all is as you like it, I'll post back with what is needed (files, code, etc.), so that you can upload the changes to your site and replace what is already there with my modifications. I'll also let you know how to 'maintain' the page(s), in case you want to add more songs to the list.

Take care,
Tom

beau...

The revision to your index page that is located here does what you initially wanted...
to have the music/audio open in a new window. Opening in a new window will allow site visitors to browse through the rest of your site while the music continues to play.

Just in case you might like to see another way of doing it, where the music/player controls are embedded directly within the index page, I have created another example here...

http://nunzioweb.com/beau/index2.htm

But in the above case, the moment a site visitor leaves the index page, the music is gone/ stops.

Take care,
Tom

hi tom ~

wow! that's awesome! the way you set it up on http://nunzioweb.com/beau/ looks perfect to me. It's just so cool that a visitor can continue listening to the music while checking out the rest of the site, or going on to other sites!!

>> once you've informed me that all is as you like it, I'll post back with what is needed (files, code, etc.) <<
OK, i look forward to hearing from you.
i've got to rehearse for an evening show today, so i probably won't be able to get back to you till tomorrow.

~ beau

beau...

Right-click on this link --> http://nunzioweb.com/beau/beau.zip
Select "Save as..." or "Save target as..." or "Save link as..." (varies depending on what browser you are using)
You will download beau.zip (9kb) and save it.
Unzip/unarchive the files within, and upload all of them to the 'root' directory of your server.

These are the 10 files located within beau.zip:

index.htm (replaces your current index.htm page with my revision)
music_list.htm (the html document that will open as a new sized window where all music samples will stream from)
music-list.htm (the "Music Samples Playlist Menu" html document that displays within an IFrame where both multiple and individual tracks are selectable)
all_music.htm (the "All music samples will stream here" html document that displays within an IFrame when music is stopped --> when music is playing, the player controls appear within this IFrame instead)
all-tracks.htm (the html document that contains object-n-embed code to stream "music.m3u" when "Stream entire 2 track playlist" is selected)
music.m3u (playlist file that contains URL pointers to both Gypsy.mp3 and Secrets.mp3 located at the 'root' directory of your server)
Secrets.m3u (playlist file that contains a URL pointer to Secrets.mp3 located at the 'root' directory of your server)
Gypsy.m3u (playlist file that contains a URL pointer to Gypsy.mp3 located at the 'root' directory of your server)
Secrets.htm (the html document that contains object-n-embed code to stream "Secrets.m3u" when Secrets [Track 1] is selected)
Gypsy.htm (the html document that contains object-n-embed code to stream "Gypsy.m3u" when Gypsy [Track 2] is selected)

*Note: music-list.htm is the html document that you will personally edit if you decide to add more songs to the selection list, in addition to Gypsy and Secrets. Also note that if you decide to do this, you will also have to add additional URL pointers to music.m3u (the multiple-track playlist), to reflect the new additions, and upload those changes as well. You will also have to create new M3U playlist files containing one URL pointer to each new addition (for individual song streaming), as well as creating new html documents for each that contain the object-n-embed code for each song.

Take care,
Tom

P.S.
If you have difficulties in the future when editing both music-list.htm and music.m3u, and/or creating new html documents, you can post back here for assistance.

Addendum...

beau...

(a little additional help here for you):

When you view the source code of music-list.htm (by opening it locally using either Windows Notepad, Editpad, or other ASCII text editor), you will see a nested section like this...


Everything nested between the 2 COMMENTS (see the definition of HTML comments)...

1. beginning with this comment: <!-- BEAU WILL BEGIN ADDING MORE TRACKS HERE -->
2. and ending with this comment: <!-- BEAU WILL END ADDING MORE TRACKS HERE -->

...is the section of the code that you can change where you will add more songs/additions to what is already there if you need to. I've made it as simple as possible for editing purposes, with only basic links, preceded by Track #'s. Just make certain that as you add each additional link, to also include a <br> tag after each (see the definition of HTML <br> tags). This will allow for 'line breaks' between each Track link, or else the tracks will all be on one line (no good). Also, as you add more links, make absolutely certain that target="stream" is included, so that the player controls will appear in the proper IFrame.

Make your changes, save the file, and upload it to your server.

Take care,
Tom

hi tom ~
it's up and working!! hooray!!

apart from editing music-list.htm to add songs, i'll only make minor cosmetic changes.
i'd like to have a button for the link...do i understand correctly that...
<FORM>
<INPUT TYPE="BUTTON" VALUE="LISTEN" ONCLICK="window.location.href='http://www.beaujohnson.com/music_list.htm'">
</FORM>
...will do the trick?
my only question is what text in index.htm should i remove to put in this button?

you've been so generous with your advice, i want to give you a million thanks. as a very small token of my appreciation i'd like to send you my cd and a pre-release copy of the (completed) next one, but i do want to say that i'm not at all into pushing my music on folks who aren't particularly interested in it, so if it's not your taste in music i'll be in no way offended. send me your snail mail address if you'd like.

once again thanks

~ beau

beau...

Yay! I see it's up and working!

Okay...
A few changes are in order...

FIRST CHANGE:

The code you posted above for the button is no good. It will only open a 'standard' browser window, and that window will not be 'sized' properly, will not be positioned on the page properly, and will also contain a toolbar, a menubar, a location, scrollbars, and will be resizable -- NONE of which you want.

So.... you must use this code for a button link instead:


The above code specifies a window that is 540 pixels wide, 590 pixels high, is positioned at the very top of the browser, and is 60 pixels from the left side of the browser. There is no toolbar, no menubar, no location, no scrollbars, and it will not be resizable -- ALL of which is preferred. You can always change those values if need be though. Values for toolbar, menubar, location, scrollbars, and resizable can be changed from no to yes if you like. Values for top, left, width and height can all be changed to other numeric values (pixel values), if you like.

This value:
value="Listen to samples of beau's music"
... is what will appear as the actual words on the button itself. Change that if you like too.

Also... take note of the fact that I only reference music_list.htm in the above code, and not http://beaujohnson.com/music_list.htm

You do NOT need to use an absolute link and instead only need a relative link, since the file is already sitting on your server.

So...

Locate these lines of code in your index.htm page...



...and change those lines of code to this instead...



SECOND CHANGE:

In my previous post, I indicated that I've made it as simple as possible for editing purposes, with only basic links, preceded by Track #'s.

When I did that for you, I eliminated tables and the cells within, located in the source code of music-list.htm, and I also included the afore-mentioned COMMENTS for you as well.

So, I deleted the 'older' music-list.htm file from within beau.zip, and substituted the new one within the ZIP file. The problem is that I see that you are using the 'older' music-list.htm page, that was in the ZIP file before I made those changes. You must have downloaded the ZIP file before I re-uploaded it with the changes.

So... you will now need to re-download the ZIP file again...

Right-click on this link --> http://nunzioweb.com/beau/beau.zip
Select "Save as..." or "Save target as..." or "Save link as..." (varies depending on what browser you are using)
You will download beau.zip (9kb) and save it.
Unzip/unarchive only the music-list.htm file within the ZIP file this time (none of the other files were changed), and upload it to the 'root' directory of your server, replacing the 'older' copy.

Take care,
Tom

P.S.
My snail-mail address is:

Tom Cammarata
15 August Crescent
Commack, NY 11725

I'm looking forward to listening to your songs on that CD! Thanx!

oh boy! got plans for this eve but i'll do it all up first thing tomorrow

hi tom ~
all right! it's up and running!
...all my music friends are gonna be wildly jealous

i made some minor changes to music-list.htm and music_list.htm, and they worked fine except...
in music-list.htm, font color changes didn't take effect:
a:link { text-decoration: none; font-weight: normal; color: yellow; background-color: transparent }
...but i've just checked out the site using firefox, and the color change does take effect...hmmm

also, i couldn't figure out how to re-size the music_list.htm window, i'm just trying to make it a little more compact.

some interesting side notes about ie vs. firefox...
1) in ie, beaujohnson.com takes 3 seconds to open once the page appears...the little timer icon goes on 3 successive times; opens instantly with firefox;
2) in ie, to make the Listen button work, i have to Ctrl-click the button...but with firefox a standard click works;
3) in ie, to make any control on the 'tape transport' work the *first* time, it must be clicked twice; thereafter, a single click works...in firefox a standard single click works.
i'm guessing the reason is that when i recently installed maxthon browser it added its own pop-up blocker which didn't get uninstalled with the uninstallation of maxthon...
...on the other hand, my brother, a computer guy from way back (early 60's !)(he runs www.boost.org if you're into c++), tells me i should just chuck ie and go with firefox...whaddayathink?

~ beau

Okay, beau...

A 'rule of thumb' that everyone should always abide by when dealing with colors when coding HTML...

Never use name colors (eg: yellow).
Always use hexadecimal values to assign colors.

Keep this link handy and reference it whenever needed...
Web safe hexadecimal color values for use in HTML code within web pages

I created that color chart for inclusion here at the Suggest-A-Fix PC Support forums.

Now... at last check, this is the code you are currently using for links on your music-list.htm page:

Using/referencing the color chart, you may want to try this instead...

Or for a 'deeper' yellow, perhaps something like this...

It's up to you to decide what you want to use.
Take note of one thing I did in each case above...
a:link, a:visited, and a:active are all the same color, whereas a:hover is a different color.

The reason I did it that way is to ensure that when a site visitor only 'hovers' over any link, he/she will see a color change, but at no other time. In my opinion, that's what's best. That way, everybody (both new and returning site visitors) will all see exactly the same colors.

*Note: insofar as link style order is concerned, always place a:hover 2nd to last, since some browsers (eg: Mozilla Firefox) will ignore the hover selector if not done that way.

Actually, always use this sequence of link style order, and no other:
a:link
a:visited
a:hover
a:active

Okay... remember in my post above where I showed you this button link code? ...


...and where I indicated that the values for top, left, width and height can all be changed to other numeric values, if you like?

Well, to resize the music_list.htm window, just change the below numeric values to other values...
width=540
height=590

Changing those values will size the window that opens when clicking the button link on your index.htm page, to whatever width and height values you specify.

beau...
Out of curiosity, have you ever looked at the index page of my site? Especially the section toward the top of the page that reads like so? ...
______________________________________________________________________________


Blahh!!! Internet Explorer is slow, sluggish and buggy. View this and any other site at breakneck speed! Mozilla Firefox is a speedy, full-featured browser that makes browsing more efficient than ever before. More information about Firefox is available.

______________________________________________________________________________

So, I think you now know my feelings re: Internet Explorer vs. Firefox.
Your brother appears to be a very intelligent and insightful guy!

Take care,
Tom

hi again tom

okey-dokey...

>> Always use hexadecimal values to assign colors <<
okey...that's a great page you've got for colors

>> >> Take note of one thing I did in each case above...
a:link, a:visited, and a:active are all the same color, whereas a:hover is a different color.
The reason I did it that way is to ensure that when a site visitor only 'hovers' over any link, he/she will see a color change, but at no other time.
In my opinion, that's what's best. That way, everybody (both new and returning site visitors) will all see exactly the same colors <<
great idea, i totally agree...

>> >> Well, to resize the music_list.htm window, just change the below numeric values to other values...width=540 height=590 <<
ooof! i was looking in music_list.htm and music-list.htm, didn't realize it would be with the button code in index.htm

ok, i guess it's about time i got out of denial about ie!

...also, "What Nunzio hears when he Starts Windows", hey, that's my kind of music, especially the initial vocal part

~ beau

hi tom ~

haven't been able to get back to you sooner because suggestafix was somehow denying me access for a couple of days, but with help from their staff it's now back to normal

if it's ok with you, i'd like to add a line music_list.htm page something like this:

"Thanks to Tom Cammarata for this excellent music setup "

with your name as a link to nunzioweb.com

let me know if that's ok

Not at all necessary, beau, but if you'd like to, I have no objections.

Take care,
Tom

Hi beau,

Just posting here to let you know everything looks good and I see you've added more tracks. There are 5 songs now!
But one thing, in case you're interested...

On your music_list.htm page you have this wording...
...or to make the music stop, click the "Close Window" button...

But anything below that wording, which currently includes the 'Close Window' button, isn't showing because it's 'hidden' below the bottom edge of the sized window, and is inaccessible to your site visitors. They are forced to close the window by clicking the X in the little box on the top-right of the window.

There are 1 of 2 ways to correct that to have the 'Close Window' button show/be available again:

1. increase the height of the sized window by increasing the button code height value on your index.htm page (you'll lose some of the compactness you were looking to achieve though)
2. decrease the height value in this IFrame section of code located in your music_list.htm page...

<iframe src="music-list.htm" frameborder="0" height="160" scrolling="auto" width="280">[Your browser does not support frames or is currently configured not to display frames. Please use an up-to-date browser that is capable of displaying frames.]</iframe>>

...decrease the height="160" value of the iframe to a value less than 160 pixels to allow the 'Close Window' button to show, but if you do that, you may have to also change the font sizes of all the text within your music-list.htm page to make the text much smaller in size in order for a site visitor to see most of the text in the IFrame, without having to scroll too much to see all music selections.
_______________________________________________________________________

My suggestion would be to go with # 1 --> a lot easier and less hassle.

Okay!
Take care

[EDIT]

DOH!!

beau...

I had to come back and edit this post. I had the wrong IFrame coding referenced earlier.
It's corrected now.

[/EDIT]

hi tom ~

>> anything below that wording, which currently includes the 'Close Window' button, isn't showing because it's 'hidden' below the bottom edge of the sized window <<

it's a funny thing with my domain host, ipowerweb...sometimes i ftp up a changed file and it comes instantly into effect...other times i do the same and the newly changed file doesn't get recognized for several minutes, and sometimes longer...go figure!!

you must have checked the site not long after i made one of these delayed-effect changes...now it shows the "close window" button and the line below it, at least it does so when i look at it from my computer...let me know if you see something different still

hey, i've never figured out how to edit a suggestafix post...what' the trick?

hey again, i can't tell you how happy i am that you talked me into firefox ...what a difference! just discovered the cooliris plug-in too, lots 'o fun

I use iPowerWeb hosting myself (for 7 years now with virtually no down time). iPowerWeb is where many of my clients' sites are hosted as well. When FTP'ing changes, the changes should show immediately... UNLESS you are viewing an older cached copy of a page. Always refresh your browser and also empty your browser cache after making changes, to see the latest change and not a cached copy.


It looks fine now, beau.
Here is a screenshot where the 'Close Window' button is showing/accessible...



Okay...

1. First, make sure you are logged in
2. Then, simply click the button that looks like this...

After you click the button, you'll have a choice of 'Full Edit' or 'Quick Edit'
*Note: the EDIT button will not be available for you unless you are logged in


Well, Firefox ia da best IMHO
I haven't tried nor have I heard of Cooliris before, but I'll assume you are talking about this Firefox Add-on...
Cooliris Previews 2.1 for Firefox
Maybe I'll give it a whirl.

Take care,
Tom