使用raphael.js中的單擊事件啓動web音頻api緩衝的音頻文件

Question

我有一個raphael圓，我想附加一個啓動函數的鼠標事件。該函數被稱爲PlayAudioFile（），並且Raphael.js代碼塊不可訪問。我不知道如何修改下面的代碼來使其範圍可用。

  window.onload = function() { 
       var R = Raphael(0, 0, "200px", "200px"), 
        r = R.circle(100, 100, 50).attr({fill: "hsb(0, 1, 1)", stroke: "none", opacity: .5}).click(function(){ 

        alert("Wish I was an audio file being triggered instead");  // this needs to launch the playAudioFile() function. That function is not accessible however. So how do I modify playAudioFile()'s scope so that it is? 

        }); 


       var start = function() { 
        this.ox = this.attr("cx"); 
        this.oy = this.attr("cy"); 
        this.animate({r: 70, opacity: .25}, 500, ">"); 
       }, 
       move = function (dx, dy) { 
        this.attr({cx: this.ox + dx, cy: this.oy + dy}); 
       }, 
       up = function() { 
        this.animate({r: 50, opacity: .5}, 500, ">"); 
       }; 
       R.set(r).drag(move, start, up); 
}; 



var context = new webkitAudioContext(), 
    savedBuffer; 
var nameOfAudioFile = new XMLHttpRequest(); 
nameOfAudioFile.open('GET', 'A.mp3', true); 
nameOfAudioFile.responseType = 'arraybuffer'; 
nameOfAudioFile.onload = function() { 
     context.decodeAudioData(nameOfAudioFile.response, 
      function(incomingBuffer) { 
       //save the buffer, we'll reuse it 
       savedBuffer = incomingBuffer; 
       //once the file has been loaded, we can start listening for click on the div, and use playAudioFile since it no longer requires a buffer to be passed to it 
       var myDiv= document.getElementById("myDiv"); 
       myDiv.addEventListener("click", playAudioFile , false); 

      } 
      ); 
playAudioFile = function() { 
    var source = context.createBufferSource(); 
    source.buffer = savedBuffer; 
    source.connect(context.destination); 
    source.noteOn(0); // Play sound immediately 
}; 


}; 
nameOfAudioFile.send(); 



</script> 


<div id="myDiv">This div triggers playAudioFile() when clicked. Good!</div> 

<style> 
#myDiv { 
    position:relative; 
    left:150px; 
    top:240px; 
background-color: green; 
width:160px; 
height:100px; 
} 
</style> 

Answer 1

嘗試移動playAudioFile功能nameOfAudioFile的onload監聽外部。另外，你可以將整個事件封裝在window.onload函數中，以便將它全部保留在該範圍內。

 window.onload = function() { 
      var context = new webkitAudioContext(), 
       savedBuffer, 
       playAudioFile = function() { 
        var source = context.createBufferSource(); 
        source.buffer = savedBuffer; 
        source.connect(context.destination); 
        source.noteOn(0); // Play sound immediately 
       }; 

      var nameOfAudioFile = new XMLHttpRequest(); 
      nameOfAudioFile.open('GET', 'A.mp3', true); 
      nameOfAudioFile.responseType = 'arraybuffer'; 
      nameOfAudioFile.onload = function() { 
       context.decodeAudioData(nameOfAudioFile.response, function(incomingBuffer) { 
        savedBuffer = incomingBuffer; 
        var myDiv = document.getElementById("myDiv"); 
        myDiv.addEventListener("click", playAudioFile, false); 

        //at this point we know that the buffer has loaded and it should be safe to draw the button 
        var R = Raphael(0, 0, "200px", "200px"), 
         r = R.circle(100, 100, 50).attr({ 
          fill: "hsb(0, 1, 1)", 
          stroke: "none", 
          opacity: .5 
         }).click(function() { 
          playAudioFile(); 
         }); 


        var start = function() { 
          this.ox = this.attr("cx"); 
          this.oy = this.attr("cy"); 
          this.animate({ 
           r: 70, 
           opacity: .25 
          }, 500, ">"); 
         }, 
         move = function(dx, dy) { 
          this.attr({ 
           cx: this.ox + dx, 
           cy: this.oy + dy 
          }); 
         }, 
         up = function() { 
          this.animate({ 
           r: 50, 
           opacity: .5 
          }, 500, ">"); 
         }; 
        R.set(r).drag(move, start, up); 

       }); 
      }; 
      nameOfAudioFile.send(); 
     };