Order Now AdSolution Sign Up | Login » Bits on the Run Sign Up | Login »

Forums

/

Interaction with the player

6 replies [Last post]

Hello everyone.

I have been using this player for quite sometime and it is wonderful, it has capabilities of not only playing media but also can be customised as a media manager.

Previously I have been only generating playlists without any description data such as "annotation", however recently a new requirement has been established. It is to display more details about the media, because I am only using mp3 files with nediaplayer I only require to extract details of ID3 tags of each file.

the playlist is designed with basic information such as the location and the title, I want to access the location parameter of each media as it gets accessed by the user while playin, this way I can process the files to get its ID3 tags and display it. I am having problems in getting the filenames of the file the user is currently playing. Each time I try to access the pointer from getUpdate typ is always equals to "time". I have no idea how I should go about in getting the item pointer so that I could than get "location" data from the playlist of the current track.

I have attached the code below for you guys to have a look and help, also I have not updated the player to new version. I think the new version has slightly different way of handling events, I would really appreciate if someone could help me in getting this to work.

<script type="text/javascript">
var currentItem;

function getUpdate(typ,pr1,pr2,pid) {
if(typ == "item") { currentItem = pr1; setTimeout("getItemData(currentItem)",100); }
};

function getItemData(idx) {
var obj = thisMovie("thePlayerId").itemData(idx);
document.getElementById("theCaption").innerHTML = obj["location"];
};

// This is a javascript handler for the player and is always needed.
function thisMovie(movieName) {
if(navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
} else {
return document[movieName];
}
};

function createplayer(xmlFile) {
var so = new SWFObject('http://www.gurbanivichar.com/multimedia/mediaplayer.swf','thePlayerID','450','310','8');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addVariable('height','310');
so.addVariable('width','450');
so.addVariable('file','http://www.gurbanivichar.com/multimedia/BV/playlist.xml');
so.addVariable('displaywidth','0');
so.addVariable('searchbar','false');
so.addVariable('thumbsinplaylist','false');
so.addVariable('volume','100');
so.addVariable("javascriptid","thePlayerId");
so.addVariable("enablejs","true");

so.write('player');
}

</script>

<div id="player" class="floatright"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</div>
<script type="text/javascript">
createplayer('http://www.gurbanivichar.com/multimedia/BV/playlist.xml');
</script>

<div id="theCaption">captions</div>

If you want to see the webpage please go to the following address: http://www.gurbanivichar.com/multimedia/popup.php
The player is given playlist from the links in the website, using javascript technique as mentioned in the demos. Unfortunately I mistakenly forgot to change the playlist argument from the addVariable() function it should say xmlFile for its file and I do not have access to the server until this evening so it wont be changed by this evening but I do not think it will interfere with the problem I have described above.

I only require the location paramter to be handed over to me for each currently running track, I will be using JQuery and ID3tage to extract the id3 tags from the files and display it dynamically in the "theCaption" div.

I am keen to upgrade the player and also the SWFObject library as well as long as someone could help me with the events javascript code to extract the details of the currently playing track.

Thanks in advance and I very much look forward to getting it up and running again.

You can get the current file URL with:

var currentFile = null;

function getItemData(idx)
{
  var obj = thisMovie('thePlayerId').itemData(idx);
  currentFile = obj['file']; 
};

You can get the following data items with a call to itemData():

  function itemData(idx)
  =========================
  idx:  0=>duration      (number-seconds.tenths)  <duration>
  idx:  1=>start         (number-seconds.tenths)  <start>
  idx:  2=>description   (text)                   <annotation>
  idx:  3=>midroll       (url)                    <meta rel='midroll'> ...doesn't work
  idx:  4=>link          (url)                    <info>
  idx:  5=>id            (text)                   <identifier>
  idx:  6=>category      (text)                   <album>
  idx:  7=>audio         (url)                    <meta rel='audio'>
  idx:  8=>captions      (url)                    <meta rel='captions'>
  idx:  9=>image         (url)                    <image>
  idx: 10=>type          (text) flv, jpg, etc.    <meta rel='type'>
  idx: 11=>file          (url)                    <location>
  idx: 12=>title         (text)                   <title>
  idx: 13=>author        (text)                   <creator>
  idx: nn=>fallback      (url)                    <meta rel='fallback'>

**<meta rel='other flashvars'>

Yes, but how do I send a call to this function with the correct pointer to the track?

See below the getUpdate() functiona calls the getItemData() function however the arguments sent to getUpdate() are a little different than expectations i.e. typ is equal to "time" in my case and it is never able to get passed the if condition, because anything other than the track pointer would be of no use for getItemData(). So I am just wondering how to get the correct argument for "idx" for getItemData().

var currentItem;

function getUpdate(typ,pr1,pr2,pid) {
if(typ == "item") { currentItem = pr1; setTimeout("getItemData(currentItem)",100); }
};

function getItemData(idx) {
var obj = thisMovie("thePlayerId").itemData(idx);
document.getElementById("theCaption").innerHTML = obj['file'];
};

// This is a javascript handler for the player and is always needed.
function thisMovie(movieName) {
if(navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
} else {
return document[movieName];
}
};

Please advise.

The correct argument is already being monitored in your existing code here:

function getUpdate(typ, pr1, pr2, pid)
{
  if(typ == 'item')
  {
    currentItem = pr1;
    setTimeout("getItemData(currentItem)", 100);
  }
};

When the type is equal to 'item', getItemData() is called with the current index. Then the current file URL is available in the variable currentFile ( and any other item {track} data that you want is also available to be assigned to a variable ).

Thanks KLink,

I know that the correct condition for typ is being monitored in the getUpdate() function, what I am trying to say is that I am never getting typ == 'item'. If you have a look at the actual page http://www.gurbanivichar.com/multimedia/popup.php you may get an idea where I might be going wrong.

I think it was just some JavaScript syntax errors in the code above getUpdate() that kept it from running. In JavaScript, once there is a syntax error, the code below that doesn't get executed. Sometimes I break it up into blocks so the whole page doesn't get killed. Tested on my server with my mediaplayer and my playlist (browser & Adobe Flash Player security restrictions prevent me from executing the JavaScript API on a domain that is different than the domain that the HTML was served from, so I can't test with your player and your playlist).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

  <head>

<title>Gurbani Vichar : Multimedia Listener</title>

    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
    <meta name="Description" content="Looking at the miserable plight of man, the writer, Jaswant Singh Khoji, belovedly called Bauji, an apostle of love and compassion, has taken pains to analyse and trace the cause of mans degeneration and give him the ambrosial dose, so that he can rise up and fight out with rejuvenated vigour to regain his lost empire. Bauji has unflinching faith that Gurbani has descended from Divinity and he has taken up the mission of Guru Nanak for the uplift of mankind to the Divine Realm by spreading the message of Nanak Love to entire humanity." />
    <meta name="Keywords" content="gurbani vichar, punjabi, bau ji, bauji, khoji, dodra, dhan guru nanak, vaheguru, waheguru, gurbani" />
    <meta name="verify-v1" content="odOlnaOzVkEVafUEpMq0n0uJm4Xb8P5xg+Abk5tmi7Y=" />

    <link rel="icon" href="http://www.gurbanivichar.com/common/images/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="http://www.gurbanivichar.com/common/styles/style.css" />
    <link rel="stylesheet" type="text/css" href="http://www.gurbanivichar.com/common/styles/scroll.css" />

  </head>

  <body>

    <!-- This is the beginning of the website's body -->
    <div id="contentwrapper">
      <div id="box">
        <div class="eng">
          <script type="text/javascript">
            // Idea by:  Nic Wolfe
            // This script and many more are available free online at
            // The JavaScript Source!! http://javascript.internet.com
            function popUp(URL)
            {
              day = new Date();
              id  = day.getTime();
              eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=875,height=450,left = 282.5,top = 225');");
            };
          </script>
          <!-- <script type="text/javascript" src="jquery.js"></script> -->
          <div class="boxPlayer eng">
            <p class="highlight massive bold cntr">Listen Online</p>
            <br />
            <script type="text/javascript" src="http://www.gurbanivichar.com/multimedia/swfobject.js"></script>
            <script type="text/javascript">
              function display(category)
              {
                var whichcategory = document.getElementById(category);
                if (whichcategory.className == "show")
                {
                  whichcategory.className = "hide";
                }
                else
                {
                  whichcategory.className = "show";
                }
              };

              function change(name)
              {
                if(name.className == 'Group')
                {
                  name.className = 'Open';
                }
                else
                {
                  name.className = 'Group';
                }
              };

              function changeCurrent(name)
              {
                var n = document.getElementById('playlist');
                var elements = n.getElementsByTagName('a');

                for(var i = 0; elements[i]; i++)
                {
                  if(elements[i].className == 'CurrentO')
                  {
                    elements[i].className = 'Option';
                  }
                  if(elements[i].className == 'CurrentA')
                  {
                    elements[i].className = 'All';
                  }
                  if(elements[i].className == 'CurrentD')
                  {
                    elements[i].className = 'Direct';
                  }
                }

                if(name.className == 'Option')
                {
                  name.className = 'CurrentO';
                }
                if(name.className == 'All')
                {
                  name.className = 'CurrentA';
                }
                if(name.className == 'Direct')
                {
                  name.className = 'CurrentD';
                }
              };

              var currentItem;

              function getUpdate(typ, pr1, pr2, pid)
              {
                if(typ == 'item')
                {
                  currentItem = pr1;
                  setTimeout("getItemData(currentItem)", 100);
                }
              };

              function getItemData(idx)
              {
                var obj = thisMovie('thePlayerId').itemData(idx);
                gid('itemdata').innerHTML = 'Item Data: ' + obj['file'];
              };

              function gid(name)
              {
                return document.getElementById(name);
              };

              function thisMovie(movieName)
              {
                return document.getElementsByName(movieName)[0];
              };

            function changeCurrent(name)
            {
              var n = document.getElementById('playlist');
              var elements = n.getElementsByTagName('a');
              oldImage = "url(http://www.gurbanivichar.com/common/images/Open.png)";
              newImage = "url(http://www.gurbanivichar.com/common/images/Current.png)";
              for(var i = 0; elements[i]; i++)
              {
                if(elements[i].style.backgroundImage == newImage)
                {
                  elements[i].style.backgroundImage = oldImage;
                }
              }
              name.style.backgroundImage = newImage;
};

            function createplayer(xmlFile)
            {
              var so = new SWFObject('http://www.gurbanivichar.com/multimedia/mediaplayer.swf', 'thePlayerID', '450', '310', '8');
                  so.addParam('allowscriptaccess',   'always');
                  so.addParam('allowfullscreen',     'true');
                  so.addVariable('height',           '310');
                  so.addVariable('width',            '450');
                  so.addVariable('file',             'http://www.gurbanivichar.com/multimedia/BV/playlist.xml');
                  so.addVariable('displaywidth',     '0');
                  so.addVariable('searchbar',        'false');
                  so.addVariable('thumbsinplaylist', 'false');
                  so.addVariable('volume',           '100');
                  so.addVariable('javascriptid',     'thePlayerId');
                  so.addVariable('enablejs',         'true');
                  so.write('player');
            };
          </script>
          <div id="player" class="floatright">
            <a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.
          </div>
          <script type="text/javascript">
            createplayer('http://www.gurbanivichar.com/multimedia/BV/playlist.xml');
          </script>
          <div class="highlight" id="playlist">
            <div class="bold">
              Choose an Album to listen from:
              <div class="spacer">
              </div>
            </div>
              <a href="javascript:display('BauJi')" onclick="javascript:change(this)" class="Group">Bau Ji's Talks</a>
              <div class="hide" id="BauJi">
                <a href="javascript:createplayer('http://www.gurbanivichar.com/multimedia/BV/playlist.xml')" onclick="javascript:changeCurrent(this)" class="All">Listen all tracks from this album</a>
                <a href="javascript:createplayer('http://www.gurbanivichar.com/multimedia/BV/NBV1/playlist.xml')" onclick="javascript:changeCurrent(this)" class="Option">Volume 1 [New Release March 2008]</a>
                <a href="javascript:createplayer('http://www.gurbanivichar.com/multimedia/BV/NBV2/playlist.xml')" onclick="javascript:changeCurrent(this)" class="Option">Volume 2 [New Release March 2008]</a>
                <a href="javascript:createplayer('http://www.gurbanivichar.com/multimedia/BV/BV1/playlist.xml')" onclick="javascript:changeCurrent(this)" class="Option">Volume 1 [Old Release]</a>
                <a href="javascript:createplayer('http://www.gurbanivichar.com/multimedia/BV/BV2/playlist.xml')" onclick="javascript:changeCurrent(this)" class="Option">Volume 2 [Old Release]</a>
              </div>
              <a href="javascript:createplayer('http://www.gurbanivichar.com/multimedia/MataJi/playlist.xml')" onclick="javascript:changeCurrent(this)" class="Direct">Mata Ji's Talks</a>
              <a href="javascript:createplayer('http://www.gurbanivichar.com/multimedia/NS/playlist.xml')" onclick="javascript:changeCurrent(this)" class="Direct">Naam Simran</a>
              <a href="javascript:display('Nitnem')" onclick="javascript:change(this)" class="Group">Nitnem</a>
              <div class="hide" id="Nitnem">
                <a href="javascript:createplayer('http://www.gurbanivichar.com/multimedia/Nitnem/playlist.xml')" onclick="javascript:changeCurrent(this)" class="All">Listen all tracks from this album</a>
                <a href="javascript:createplayer('http://www.gurbanivichar.com/multimedia/Nitnem/Nitnem/playlist.xml')" onclick="javascript:changeCurrent(this)" class="Option">Nitnem</a>
                <a href="javascript:createplayer('http://www.gurbanivichar.com/multimedia/Nitnem/AsaDiWar/playlist.xml')" onclick="javascript:changeCurrent(this)" class="Option">Asa Di War</a>
                <a href="javascript:createplayer('http://www.gurbanivichar.com/multimedia/Nitnem/Rehras/playlist.xml')" onclick="javascript:changeCurrent(this)" class="Option">Rehras</a>
                <a href="javascript:createplayer('http://www.gurbanivichar.com/multimedia/Nitnem/KirtanSohela/playlist.xml')" onclick="javascript:changeCurrent(this)" class="Option">Kirtan Sohela</a>
              </div>
              <a href="javascript:display('Sep06')" onclick="javascript:change(this)" class="Group">September 2006</a>
              <div class="hide" id="Sep06">
                <a href="javascript:createplayer('http://www.gurbanivichar.com/multimedia/samagams/0609/playlist.xml')" onclick="javascript:changeCurrent(this)" class="All">Listen all tracks from this album</a>
                <a href="javascript:createplayer('http://www.gurbanivichar.com/multimedia/samagams/0609/Vol1/playlist.xml')" onclick="javascript:changeCurrent(this)" class="Option">Volume 1</a>
                <a href="javascript:createplayer('http://www.gurbanivichar.com/multimedia/samagams/0609/Vol2/playlist.xml')" onclick="javascript:changeCurrent(this)" class="Option">Volume 2</a>
                <a href="javascript:createplayer('http://www.gurbanivichar.com/multimedia/samagams/0609/Vol3/playlist.xml')" onclick="javascript:changeCurrent(this)" class="Option">Volume 3</a>
                <a href="javascript:createplayer('http://www.gurbanivichar.com/multimedia/samagams/0609/Vol4/playlist.xml')" onclick="javascript:changeCurrent(this)" class="Option">Volume 4</a>
              </div>
              <a href="javascript:display('Dec06')" onclick="javascript:change(this)" class="Group">December 2006</a>
              <div class="hide" id="Dec06">
                <a href="javascript:createplayer('http://www.gurbanivichar.com/multimedia/samagams/0612/playlist.xml')" onclick="javascript:changeCurrent(this)" class="All">Listen all tracks from this album</a>
                <a href="javascript:createplayer('http://www.gurbanivichar.com/multimedia/samagams/0612/Vol1/playlist.xml')" onclick="javascript:changeCurrent(this)" class="Option">Volume 1</a>
                <a href="javascript:createplayer('http://www.gurbanivichar.com/multimedia/samagams/0612/Vol2/playlist.xml')" onclick="javascript:changeCurrent(this)" class="Option">Volume 2</a>
                <a href="javascript:createplayer('http://www.gurbanivichar.com/multimedia/samagams/0612/Vol3/playlist.xml')" onclick="javascript:changeCurrent(this)" class="Option">Volume 3</a>
                <a href="javascript:createplayer('http://www.gurbanivichar.com/multimedia/samagams/0612/Vol4/playlist.xml')" onclick="javascript:changeCurrent(this)" class="Option">Volume 4</a>
              </div>
              <a href="javascript:display('Mar07')" onclick="javascript:change(this)" class="Group">March 2007</a>
              <div class="hide" id="Mar07">
                <a href="javascript:createplayer('http://www.gurbanivichar.com/multimedia/samagams/0703/playlist.xml')" onclick="javascript:changeCurrent(this)" class="All">Listen all tracks from this album</a>
                <a href="javascript:createplayer('http://www.gurbanivichar.com/multimedia/samagams/0703/Vol1/playlist.xml')" onclick="javascript:changeCurrent(this)" class="Option">Volume 1</a>
                <a href="javascript:createplayer('http://www.gurbanivichar.com/multimedia/samagams/0703/Vol2/playlist.xml')" onclick="javascript:changeCurrent(this)" class="Option">Volume 2</a>
                <a href="javascript:createplayer('http://www.gurbanivichar.com/multimedia/samagams/0703/Vol3/playlist.xml')" onclick="javascript:changeCurrent(this)" class="Option">Volume 3</a>
                <a href="javascript:createplayer('http://www.gurbanivichar.com/multimedia/samagams/0703/Vol4/playlist.xml')" onclick="javascript:changeCurrent(this)" class="Option">Volume 4</a>
              </div>
            </div>
            <div id="itemdata">
              Item Data
            </div>
<div class="spacer">
            </div>
<div class="spacer">
            </div>
<div class="spacer">
            </div>
          </div>
        </div>
        <div class="spacer">
        </div>
        <div class="spacer">
        </div>
      </div>
</div>

    <!-- This is the end of the website's body -->
    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
    <script type="text/javascript">
      _uacct = "UA-1021218-5";
      urchinTracker();
    </script>

  </body>

</html>

Thanks KLink,

Everything seems to be woking now! woohoo

The poblem was actually somewhere in the createPlayer() function and it felt like the order in adding variables also mattered because I tried it for a couple of time and only worked in the given order:

function createplayer(xmlFile) {
var s1 = new SWFObject("http://www.gurbanivichar.com/multimedia/mediaplayer.swf","playerID","450","350","8");
s1.addParam("allowfullscreen","true");
s1.addParam("allowscriptaccess","always");
s1.addVariable("thumbsinplaylist","false");

s1.addVariable("file",xmlFile);
s1.addVariable("linktarget","_self");

s1.addVariable("enablejs","true");
s1.addVariable("javascriptid","playerID");

s1.addVariable("width","450");
s1.addVariable("height","350");
s1.addVariable("displaywidth","0");
s1.addVariable('volume','100');

s1.write("player");
};

It probably be something else but changing this helped.

Now I have the desired results, I am using JQuery to fire a PHP request tot he server to extract ID3 tags from the current mp3 file selected in the player and update its details on the page. I am choosing this root because there are too many playlists I have created and updating each of them would be very time consuming and on the same time maintainning them woule be very time consuming as well, because from this point forward the number of playlists can only increase in number. So now I have only simple playlist with the title of the mp3 file together with the link to the file and other details such as the artists, album and more can be simply extracted by id3tag lib which is another open source library.

If anyonw is interested in more details about the methods I have used let me know I will post the code, meanwhile you can have a look at the player displaying details from:

http://www.gurbanivichar.com/multimedia/popup.php

Thanks for the help!