:: Support :: Additional MP3 Player Examples: Javascript Media Loading

This example shows how to add JavaScript support for real-time mp3 and XML loading to our MP3 player. This example utilizes a stand-alone MP3 player component with all controls and title text (no playlist component or images). FlashVars are used to dynamically pass the path for the default XML playlist that is loaded upon pageload.

  1. Using your Flash 8/CS3/CS4 authoring software, open an existing FLA that includes the MP3 component, or install the MXP and open a new document, then add the MP3 component to the stage and give it the instance name "myMP3" as shown in the example FLA (see download info below).

  2. Add a "TextInput" component (in the Flash component menu under "User Interface") to the stage and give it an instance name of "mediapath" as shown in the example FLA (see download info below).

  3. You will also need to add several lines of action script to the actions panel (scene1: frame 1). The action script can be copied from the example FLA (see download info below).

  4. You should change the color of the background and resize it to fit all of the objects on the stage.

  5. Once you are finished modifying the FLA you should save your project, publish a network ready SWF, and embed the SWF in your webpge. Be sure to add the 'id/name="myFlashMovie"' parameter to both locations in your embed script as shown below:

    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
    width="210" height="50"
    id="myFlashMovie" >
    <param name="movie" value="mp3_javascript.swf" />
    <param name="FlashVars" value="playlist=tracks.xml" />
    <embed src="mp3_javascript.swf" width="210" height="50" FlashVars="playlist=tracks.xml"
    type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

  6. You will also need to add the "getFlashMovieObject" and "SendDataToFlashMovie" functions to the header of your web document as shown in the example html file (see download info below).

  7. Now set up the JavaScript (text or thumbnail) links in the body of your web document as shown in the example html file (see download info below). These links are used to load a new mp3 and XML files into the MP3 player in real-time (i.e. no page refresh).

  8. When loading single MP3 files you should not use the previous and next buttons, playlist component, or images (i.e. to utilize these features, you must load XML files); and you must use the ID3 metadata information in the file to populate the title and duration fields, which means your MP3 tracks must contain ID3 metadata, and you must set the "Title Metadata Source" and "Duration Metadata Source" parameters to "ID3" in the Component Inspector.

:: Download Example Files

External JavaScript Thumbnail Links
thumb1 thumb1
External JavaScript Text Links
:: Load XML - White Stripes
:: Load Single MP3 - Fatboy Slim


Support - Documentation - Skin Wizard - Sample Skins - Tutorials
Copyright © 2003-2012 Earth Science Agency, LLC - All Rights Reserved