www.webdeveloper.com
Page 1 of 4 123 ... LastLast
Results 1 to 15 of 52

Thread: mp3 player in javascript

  1. #1
    Join Date
    Jul 2006
    Posts
    373

    mp3 player in javascript

    Hi,

    i was wondering if its possible to have a mp3 player based on javascript. I have every mp3 file in a single folder and a config.xml fil with the name and other info of every song. So i was thinking to have that displayed on my page using javascript so the users can play every song i have in that folder. Actually the hardest part of all is that since i want the song to be playing as they navigate the page, the song should open in a new window but be manipulated from the original window where the player controls are. Is this possible?

    Thank you.

  2. #2
    Join Date
    Feb 2008
    Posts
    1,666
    Yes, that is all possible, except that JavaScript has no means of querying a folder for file names. You would need a server-side solution for that. Also, as for playing sound files, you would also need a cross-browser solution and there is no supplied cross-browser solution. Meaning, you would either have to provide your own cross-browser and downloadable player (think OBJECT/EMBED tags) or you would have to provide instructions for users to download 3rd-party browser plugins to make their browser compatible. As for providing your own, that involves writing a C or Java module to run within the browser DOM.

    Last note, in case you don't already know, Java is NOT JavaScript. The two are completely different and incompatible languages which serve two entirely different purposes.

  3. #3
    Join Date
    Jul 2006
    Posts
    373
    I know the difference between java and javascript, thank you. Maybe my explanation sounded too complex, but i dont think its so difficult because i have seen similar results using javascript. My idea is to populate the list based on the content of the xml file, it could be also json file or whatever. The list would link to where the files are stored in the server and by clicking on them the sound would play. There is a ton of pages that do something like that, the only difference is that the sound should open in a pop up window and you can control the content of an opened pop-up window switching its content from the parent window. So thats basically my idea. The only thing i need to get started is a code to populate from the xml file, the rest i think is much easier.

  4. #4
    Join Date
    Feb 2008
    Posts
    1,666
    After you've retrieved the XML using AJAX, then the following will give you a DOM-like XML object from which to extract your data:
    Code:
    list = ajaxProxy.responseXML.documentElement;
    alert(list.childNodes.length);

  5. #5
    Join Date
    Jul 2006
    Posts
    373
    Thank you. Sorry but im completely lost. The list.xml file looks something like this
    Code:
    <main>
    	<song src="mp3/1.mp3">
    		<title>Future Sound Of London</title>
    		<artist>Papua New Guinea</artist>
    		<genre>IDM</genre>
    		<duration>1:42</duration>
    	</song>
    </main>
    I guess is possible to call all this data using ajax so the list is populated with each song and its correspondent info. However to be honest i dont know even where to start from... i will appreciate any hint you can give me.

    Thank you.

  6. #6
    Join Date
    Feb 2008
    Posts
    1,666
    After you've retrieved the XML using AJAX, just try this and see what it says:
    Code:
    var list = ajaxProxy.responseXML.documentElement;
    var x, len = list.childNodes.length;
    for (x=0; x<len; ++x)
    {
        alert("child " + (x+1) + " is '" + list.childNodes[x].tagName + "'");
    }

  7. #7
    Join Date
    Jul 2006
    Posts
    373
    hehe sorry, but its that i dont know how to retrieve the xml using ajax...

  8. #8
    Join Date
    Feb 2008
    Posts
    1,666
    If you haven't used AJAX at all, start here:
    http://www.jibbering.com/2002/4/httprequest.html

  9. #9
    Join Date
    Jul 2006
    Posts
    373
    Thanks. Well, then i guess i have to put something like this

    Code:
    function player() {
     xmlhttp.open("GET", "list.xml",true);
    var list = ajaxProxy.responseXML.documentElement;
    var x, len = list.childNodes.length;
    for (x=0; x<len; ++x)
    {
        alert("child " + (x+1) + " is '" + list.childNodes[x].tagName + "'");
    }
    
    }

    how is it?

  10. #10
    Join Date
    Feb 2008
    Posts
    1,666
    First you have to instantiate the AJAX object during page load. That link shows you how. Then you (1) perform an open(), (2) attach the callback function for asynchronous operation, and then (3) issue a send(). It is in the callback function that you would call a second function to perform the code I gave you. That link shows you how to set up the callback function, too.

  11. #11
    Join Date
    Jul 2006
    Posts
    373
    sorry, its like if you were talking in Chinese to me... i cant understand even where to start from.

  12. #12
    Join Date
    Feb 2008
    Posts
    1,666
    Everything I said is discussed and demonstrated in that link I gave you.

  13. #13
    Join Date
    Jul 2006
    Posts
    373
    In the link you provide i did find how to load the data from a json file, but nothing about from a xml file. It actually says its not recommendable to do so, but to use json instead.

  14. #14
    Join Date
    Feb 2008
    Posts
    1,666
    Huh? That is strange. I've loaded XML data through AJAX with no problems. In fact, that is what AJAX was originally designed for -- XML. It also handles normal HTML or text-based transfers though.

  15. #15
    Join Date
    Jul 2006
    Posts
    373
    Hi, i found a nice script that pretty much does what im looking for.

    http://www.varal.org/media/niftyplay...mp3alizer.html

    however it has some downsides, like the song from the playlist doesnt appear until you click the link on the original page, you cant control the song from the original page once the pop-up opens and that you have to put the playlist manually instead of having it populate from a xml file as i intend. I think that if i achieve to populate the list loaded from the xml file, i can have it displayed both in the original page and in the popup. The problem is i dont know if you can make that by choosing a song from the list on the original page you can play it in the popup despite another one is playing or control pause and stop from there. Any ideas please? i think that im very close.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles