Josh Sager Media: Creative Technologies Blog

Josh Sager Media: Creative Technologies Blog
Creative Technologies Blog
Home | Portfolio |Blog | Presentations | music | About

Posts Tagged ‘XML’

Drop Down Lists Populated using JavaScript and XML

Thursday, September 11th, 2008

The Problem
You have a drop down list but you want them to dynamically populate using your super cool xml. Not a problem because Javascript can help you out.

The Solution
view the xml and javascript drop down demo

  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <title>XML Drop Down Menu with JavaScript</title>
  7. <script language="javascript">
  8.        // creates an xml object
  9.         var pt=
  10.                 <team>
  11.                         <player id="1">
  12.                                 <name>Josh</name>
  13.                         </player>
  14.                         <player id="2">
  15.                                 <name>Ben</name>
  16.                         </player>
  17.                         <player id="3">
  18.                                 <name>Wayne</name>
  19.                         </player>
  20.                 </team>
  21.                
  22.                 // method to get the xml stuff
  23.                 function getXMLStuff(){
  24.                // loops through the xml and grabs only the names
  25.                 for each (var e in pt){
  26.                         //adds to the existing drop down box with the names from the xml
  27.                         document.myForm.myList.innerHTML += "<option value=’"+e.name+"’>"+e.name+"</option>"
  28.                 }
  29.                 }
  30.                
  31.        
  32. </script>
  33.  
  34. </head>
  35.  
  36. <body>
  37. <a href="#" onClick="getXMLStuff()">click me</a>
  38. <form name="myForm">
  39.         <select name="myList")
  40.         <option>Test</option>
  41.     </select>
  42.  
  43. </form>
  44. </body>
  45. </html>
  46.  

Tags: , ,
Posted in JavaScript, Technology | No Comments »

ActionScript 3.0 XML and Sound

Friday, September 5th, 2008

The Problem
Last week a student of mine was putting together a project where we wanted to play multiple audio files on the web. Naturally the first thing I reached for was Flash and XML. No problem. Well there was a twist. He wanted to have sets of files available by genre only. Which calls for one the best improvements of ActionScript 3.0 and thats E4X.

E4X allows you to “query” or “filter” if you will the data xml document so you can use just a small part of it instead of the whole thing.

The Solution
What I developed was a flash file that

  1. loads in the xml
  2. creates a sound object
  3. creates a sound channel
  4. on mouse click
    1. set a search parameter based on which button is clicked
    2. “filter” the xml by genre based on the search parameter
    3. store the “filtered” data in an array containing object value you name pairs
    4. play the first song
  5. There are a few other things in there like stops just to avoid sound vomit

The end result is a solution that dynamically loads sound, manages the sound files through xml, and can expand to filter songs by genre.

The Working Solution

View the working solution

Download the project file

ActionScript

  1. // xml switch demo
  2. // this demo is to switch xml files on button click for
  3. // sound output
  4.  
  5. // init variables
  6. var xmlLoadFilter:URLLoader = new URLLoader()
  7. var xmlFilter:XML
  8. // temp array to store queried songs from the xml file
  9. var songs:Array
  10. // creation of sound object and sound channel object
  11. var soundFile:Sound
  12. var sc:SoundChannel = new SoundChannel();
  13.  
  14. // default xml
  15. xmlLoadFilter.load(new URLRequest("master.xml"))
  16. xmlLoadFilter.addEventListener(Event.COMPLETE, onLoadXMLFilter)
  17.  
  18. // register button events
  19. comedy_btn.addEventListener(MouseEvent.MOUSE_DOWN, onDownFilter)
  20. rock_btn.addEventListener(MouseEvent.MOUSE_DOWN, onDownFilter)
  21. stop_btn.addEventListener(MouseEvent.MOUSE_DOWN, onStop)
  22.  
  23. // events
  24. // listener for comedy and rock button
  25. function onDownFilter(e:MouseEvent):void{
  26.         // stops any audio in the sc track
  27.         sc.stop();
  28.         // this array gets replaced everytime the mouse is clicked
  29.         var songs = new Array()
  30.         // temp string to store the genere for searching the xml file
  31.         var g:String
  32.         // this changes the search element based on the button clicked
  33.         switch(e.target.name){
  34.                 case "comedy_btn":
  35.                 g="comedy"
  36.                 break;
  37.  
  38.                 case "rock_btn":
  39.                 g="rock"
  40.                 break;
  41.         }
  42.         // seaches through the xml based on genre
  43.         for each(var p:XML in xmlFilter.music.(@genre==g)){
  44.                 songs.push({artist:p.artist, path:p.path})
  45.                 //trace("test: "+p.path)
  46.         }
  47.         // loads the song
  48.         soundFile = new Sound(new URLRequest("songs/"+songs[0].path))
  49.         // plays the song
  50.         sc = soundFile.play();
  51. }
  52. // xml complete listener
  53. function onLoadXMLFilter(e:Event):void{
  54.         xmlFilter = new XML(e.target.data)
  55. }
  56. // stops the audio
  57. function onStop(e:MouseEvent){
  58.         sc.stop();
  59. }

XML Document

  1.  
  2. <songs>
  3.         <music genre="rock">
  4.                 <artist>Josh Sager</artist>
  5.                 <path>Last Show.mp3</path>
  6.         </music>
  7.         <music genre="comedy">
  8.                 <artist>Josh Sager</artist>
  9.                 <path>RockStar.mp3</path>
  10.         </music>
  11.         <music genre="comedy">
  12.                 <artist>Josh Sager</artist>
  13.                 <path>Back in Time.mp3</path>
  14.         </music>
  15. </songs>

Tags: , , , , , ,
Posted in Flash, Misc, Technology | 1 Comment »