SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    dynamic media player fails in safari (and probably konq)

    so, under the 'listen' heading at http://aromanscandal.org/evils/ i have a little semi-ajax widget for playing mp3s without reloading the page (of course this just opens them up in a new page if javascript is turned off...other fixes along that line to follow).

    what is killing me is this- in firefox, i click on an mp3, it loads in the player, and plays. when i click on another mp3, the first mp3 stops playing, the second one loads and plays, etc. hiding the player window stops the music playback also.

    so far, so good.

    in safari, however, each time i load an mp3 it is loading a new child element, without first removing the originally loaded mp3. it will even load one mp3 multiple times (until the browser crashes, i suppose). i have tried all types of combinations of element.removeChild(element) and element.innerHTML = '' to no avail. any ideas?

    code below:

    html
    Code:
    <div class='hide' id="listen">
    <p><a href="#" onclick="hide('listen')">[x] click to dismiss mp3s</a></p>
    <p><a href="http://aromanscandal.org/evils/01 UN.mp3" onclick="getTrack('http://aromanscandal.org/evils/01 UN.mp3');return false;">UN.mp3</a><br />
    
      <a href="http://aromanscandal.org/evils/04 correctly flowered lanes.mp3" onclick="getTrack('http://aromanscandal.org/evils/04 correctly flowered lanes.mp3');return false;">correctly flowered lanes.mp3</a><br />
        <a href="http://aromanscandal.org/evils/05 Blue.mp3" onclick="getTrack('http://aromanscandal.org/evils/05 Blue.mp3');return false;">blue.mp3</a><br />
          <a href="http://aromanscandal.org/evils/06 Greenwich.mp3" onclick="getTrack('http://aromanscandal.org/evils/06 Greenwich.mp3');return false;">greenwich.mp3</a><br />
        </p>
        <p id="player"></p>
    </div>
    javascript (the 'getTrack' function is what is called from the html above)
    Code:
    function createRequestObject() {
         var ro;
         var browser = navigator.appName;
         if(browser == "Microsoft Internet Explorer"){
              ro = new ActiveXObject("Microsoft.XMLHTTP");
         }else{
              ro = new XMLHttpRequest();
         }
         return ro;
    }
    
    var http = createRequestObject();
    
    function getTrack(track) {
         var player = document.getElementById('player');
         player.innerHTML = '';
         http.open('get', 'scripts/mediaPlayer.php?track='+track);
         http.onreadystatechange = handleResponse;
         http.send(null);
    }
    
    function handleResponse() {
         if(http.readyState == 4){
              var response = http.responseText;
              var update = new Array();
              var player = document.getElementById('player');
              player.innerHTML = response;
         }
    }
    Last edited by alxklo; Nov 6, 2006 at 13:59.


Bookmarks

Posting Permissions

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