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-listener之外。此外，您可以将整个内容包装在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();
       };

使用raphael.js中的单击事件启动Web音频api缓冲音频文件

1 个答案: