0

ラファエル サークルがあり、関数を起動するマウス イベントを追加したいと考えています。この関数は 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>
4

1 に答える 1

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();
       };
于 2012-10-30T14:18:23.360 に答える