Using HTML For Music Controls

General discussion on how to create or maintain a website. Different site creation tools and editors may also be discussed here.

Using HTML For Music Controls

Postby iissmart » Thu 2005 Jun 30 12:19

OK, here's the deal. I really have an extremely simple understanding of HTML and I need to do something a little more complex than what I can really do. I'll try to draw it out then explain what I'm talking about.

Image

So basically there is a menu at the top which will have an arrow on the right to bring down a list of items, and each item has a direct link to a song. There are three buttons on the bottom of that, which is Play, Pause, and Stop which do what they say.

At minimum, I would probably say I need just the menu, and have it autoplay the first song in the list and when a user selects a different song it will stop playing the current song and switch to the other song.

If someone could give me a few links to help me tackle this problem that would be great. Or if you have a few pointers to get me started that would help out tremendously also.

Thanks for all your help.
--iissmart--
User avatar
iissmart
Plus Achiever
Plus Achiever
 
Posts: 135
Joined: Wed 2005 Jan 19 10:14
Location: West Chester, Ohio

Postby Ben Last » Thu 2005 Jun 30 11:38

Hi, I'm sure it must be possible to do what you are wanting. But you could make it simpler by using media player. Basically you can embed the windows media player into a web page, so you get the stop, play controls automatically, which may save you time.

I haven't got the code on me but I'll dig it out for next time I visit, as I had to do something similar for a project a few weeks back.
No trees were harmed in the construction of this message, however many electrons were terribly inconvenienced.
User avatar
Ben Last
Consulting Ambassador
Consulting Ambassador
 
Posts: 475
Joined: Fri 2005 Jan 21 7:47
Location: Stowmarket

Postby iissmart » Thu 2005 Jun 30 11:47

When I was searching the internet for resources, I came across the code to embed WMP into the site like you are talking about. One thing I wasn't sure of was if it would only play one song, or if you would be able to switch songs if you like. That is the main goal of what I want - the ability to switch songs when you want.
--iissmart--
User avatar
iissmart
Plus Achiever
Plus Achiever
 
Posts: 135
Joined: Wed 2005 Jan 19 10:14
Location: West Chester, Ohio

Postby Ben Last » Fri 2005 Jul 01 6:31

Hi iissmart, hopefully I have sent you an email with an attached zip file, which you will need to unzip before you can use. When you unzip you should find a few files and folders containg two examples.

This file contains two different examples, one which uses a set playlist, and a second, which lets the user select which song they want.
It would also be possible to use a drop-down list as you show in your diagram, but I'll have to look that one up tomorrow for you.

You should also find a notepad file named note.txt in which I have gone into more detail about how to alter the files for your use.

Hope this helps.
No trees were harmed in the construction of this message, however many electrons were terribly inconvenienced.
User avatar
Ben Last
Consulting Ambassador
Consulting Ambassador
 
Posts: 475
Joined: Fri 2005 Jan 21 7:47
Location: Stowmarket

Postby iissmart » Sat 2005 Jul 02 6:34

Hi Ben Last, thanks for helping me out with this. After using the examples from the 'Individual' folder, I have only a few problems left:

1) When a user clicks on the link to play a song, it opens WMP separately instead of having the control panel displayed in the website. Instead, I would like to somehow have the embedded player start playing the song the user chose once he/she clicks it. Note that this has to be on one website and I can't really have it load another page.

2) If a scrolldown list is possible, that would be great seeing as there are 11 songs and the links for each one push the rest of the page down leaving a lot of white space.

If you want to see the site, it is a Xanga, here is the link: http://www.xanga.com/iissmarter
--iissmart--
User avatar
iissmart
Plus Achiever
Plus Achiever
 
Posts: 135
Joined: Wed 2005 Jan 19 10:14
Location: West Chester, Ohio

Postby Ben Last » Sat 2005 Jul 02 7:21

Hi iissmart, your site is looking good.
When you click the link for the music it will currently open in a seperate window, this is because you have created a link to the file itself.

As far as I know the only way you can embed the media into the page is have it link to a new page containing the player, like the 'individual' example. (you need a seperate page for each file). You could have a page with the player and copy the file list so you don't have to go back.

You should be able to add extra pages to your website, a website is a collection of web pages, you don't have to include all your content on one page.

Good luck.
No trees were harmed in the construction of this message, however many electrons were terribly inconvenienced.
User avatar
Ben Last
Consulting Ambassador
Consulting Ambassador
 
Posts: 475
Joined: Fri 2005 Jan 21 7:47
Location: Stowmarket

Postby Spock » Sat 2005 Jul 02 7:42

Can't say I appreciate you choice of background and text color. It makes it extremely hard to read the content.

Thought the content was funny. Didn't listen to the music, as I don't like MJ ... [:?]
User avatar
Spock
Forum Admin
Forum Admin
 
Posts: 2417
Joined: Tue 2005 Jan 18 10:47
Location: MD, USA

Postby iissmart » Sat 2005 Jul 02 7:55

Spock wrote:Thought the content was funny. Didn't listen to the music, as I don't like MJ ... [:?]
Always good to know that I can make someone laugh [cg] The music is from a band called Avenged Sevenfold, not from MJ.

[edit]
OK, I almost have it working except for some reason the embedded WMP won't play any of the songs. I made a playlist (.m3u) and embedded it. Here is the direct link to the playlist: iissmart.bearshare.org/music/playlist.m3u

For some reason, I get an error saying it can't play any of the songs in the playlist...hmm...

[edit]
Could it be that I actually have 11 playlists within one playlist that is causing the songs not to play? All the playlists are .asx, and I put the playlists in a playlist and saved the playlist as 'playlist.m3u' but that gives me an error. If I try different extensions, I just get a white page and WMP doesn't come up.
--iissmart--
User avatar
iissmart
Plus Achiever
Plus Achiever
 
Posts: 135
Joined: Wed 2005 Jan 19 10:14
Location: West Chester, Ohio

Postby Spock » Sun 2005 Jul 03 4:43

Might I ask the reason behind all this? Do you have the commercial rights to distribute the songs you are trying to make available on your site?

If not, then this sounds like you are trying to set up a file sharing system and I cannot allow the discussion to continue as there are too many possible legal problems involved with doing so. [:?]

If you have a good reason as well as permission from the owners to do what you are doing then, by all means, continue as you were. [:)]
User avatar
Spock
Forum Admin
Forum Admin
 
Posts: 2417
Joined: Tue 2005 Jan 18 10:47
Location: MD, USA

Postby iissmart » Sun 2005 Jul 03 4:54

I'm not actually 'distributing' the music, I just want to give the person who views my site to have a choice between what song they want to listen to. All the music is hosted online not by me, but by the band and the record label. All I am doing is linking back to their links.
--iissmart--
User avatar
iissmart
Plus Achiever
Plus Achiever
 
Posts: 135
Joined: Wed 2005 Jan 19 10:14
Location: West Chester, Ohio

Postby Spock » Sun 2005 Jul 03 6:54

iissmart wrote:... All I am doing is linking back to their links.


Ah, sounds like a reasonable thing to do then. I would assume that if a visitor doesn't select any song they won't hear any music either.
User avatar
Spock
Forum Admin
Forum Admin
 
Posts: 2417
Joined: Tue 2005 Jan 18 10:47
Location: MD, USA

Postby iissmart » Sun 2005 Jul 03 10:19

Spock wrote:..I would assume that if a visitor doesn't select any song they won't hear any music either.
Good idea. Now if I could only somehow find a way to get a scroll down menu and when the item is clicked, an embedded WMP starts playing the song they chose. Opening anything in a new window just isn't right for this website.
--iissmart--
User avatar
iissmart
Plus Achiever
Plus Achiever
 
Posts: 135
Joined: Wed 2005 Jan 19 10:14
Location: West Chester, Ohio

Postby iissmart » Thu 2005 Jul 07 12:49

OK, so I've managed to create a pull-down menu with all of the songs listed. Now, I'm not exactly sure how to make it do something when a user selects an option...does anyone know?
--iissmart--
User avatar
iissmart
Plus Achiever
Plus Achiever
 
Posts: 135
Joined: Wed 2005 Jan 19 10:14
Location: West Chester, Ohio

Postby Ben Last » Sat 2005 Jul 09 11:29

Yes, I had tried that as well. I got the drop down list, but whatever I tried I couldn't get it to act as a hyperlink. I'll keep thinking and see what I can find out.
No trees were harmed in the construction of this message, however many electrons were terribly inconvenienced.
User avatar
Ben Last
Consulting Ambassador
Consulting Ambassador
 
Posts: 475
Joined: Fri 2005 Jan 21 7:47
Location: Stowmarket

Postby Spock » Sat 2005 Jul 09 1:50

How about something like:

Code: Select all
<form method=post action="http://URL.of.program.to.run.exe" />


And then set up a "Submit" button:

Code: Select all
<input type="submit" value="Submit" /><TARGET="_BLANK">


or in your case, a "Play" button:

Code: Select all
<input type="submit" value="Play" /><TARGET="_BLANK">
User avatar
Spock
Forum Admin
Forum Admin
 
Posts: 2417
Joined: Tue 2005 Jan 18 10:47
Location: MD, USA

Postby iissmart » Sat 2005 Jul 09 9:49

Spock wrote:
Code: Select all
<form method=post action="http://URL.of.program.to.run.exe" />


And then set up a "Submit" button:

Code: Select all
<input type="submit" value="Submit" /><TARGET="_BLANK">
What program would I run in the first code field? I have some songs as .mp3's and some are .asx playlists with the song in them. Why is the target 'blank' for the submit button?

What I basically need is each menu option to have a URL associated with it. I looked at ways to submit info, and it was all CGI based, of which I have no access to at all...

[edit] What about <bgsound> tags?
--iissmart--
User avatar
iissmart
Plus Achiever
Plus Achiever
 
Posts: 135
Joined: Wed 2005 Jan 19 10:14
Location: West Chester, Ohio

Postby Spock » Sun 2005 Jul 10 12:42

Code: Select all
action="http://URL.of.program.to.run.exe"


Would be a web based mp3 player or it could be an mp3 player you have loaded on your site. I haven't done much with mp3's but you may be able to add the mp3 song name as an attribute at the end as in:

Code: Select all
action="http://URL.of.program.to.run.exe songname.mp3"


I'm sure it isn't what you want but here is a script that is embeded in the body of some demo code that plays music automatically whenever you enter the page:

Code: Select all
<SCRIPT LANGUAGE="JavaScript">
<!--
  if (navigator.appName == "Netscape") {
     document.write('<EMBED SRC="http://pctalk.info/ultra/sound_library/SL-songbird.mid" AUTOSTART=TRUE  WIDTH=145 HEIGHT=55 ALIGN="CENTER"></EMBED>') }
  else { if (navigator.appName == "Microsoft Internet Explorer")
     document.write('<BGSOUND SRC="http://pctalk.info/ultra/sound_library/SL-songbird.mid" >')
     }
//-->
</SCRIPT>
User avatar
Spock
Forum Admin
Forum Admin
 
Posts: 2417
Joined: Tue 2005 Jan 18 10:47
Location: MD, USA

Postby iissmart » Sun 2005 Jul 10 12:57

hmm...I'm just going to leave it how I have it for now (http://www.xanga.com/iissmarter) since all these methods are too troublesome...
--iissmart--
User avatar
iissmart
Plus Achiever
Plus Achiever
 
Posts: 135
Joined: Wed 2005 Jan 19 10:14
Location: West Chester, Ohio

Postby Ben Last » Wed 2005 Oct 26 8:18

Take a look at this: http://www.gmtt.co.uk/details.php?file=11
It is a PHP script which apparently allows the user to select tracks they want to play and play them, but I haven't tried this out so have no idea if it's what you're looking for or if it even works!
No trees were harmed in the construction of this message, however many electrons were terribly inconvenienced.
User avatar
Ben Last
Consulting Ambassador
Consulting Ambassador
 
Posts: 475
Joined: Fri 2005 Jan 21 7:47
Location: Stowmarket

Postby iissmart » Thu 2005 Oct 27 7:47

I like it the way it is now, but thanks for looking :D
--iissmart--
User avatar
iissmart
Plus Achiever
Plus Achiever
 
Posts: 135
Joined: Wed 2005 Jan 19 10:14
Location: West Chester, Ohio

Postby Ben Last » Fri 2005 Oct 28 8:36

Thats alright, I stumbled across it while looking for some other code examples.
No trees were harmed in the construction of this message, however many electrons were terribly inconvenienced.
User avatar
Ben Last
Consulting Ambassador
Consulting Ambassador
 
Posts: 475
Joined: Fri 2005 Jan 21 7:47
Location: Stowmarket


Return to Web Development

Who is online

Users browsing this forum: No registered users and 1 guest

cron