javascript - WebAudio API 的异步事件

Question

如何使用 webaudio API 对振荡器停止播放后发生的事件进行编程？我试图通过更新我的 Vue 组件，在播放音符时 react 性地让数据显示在 DOM 中。我的代码如下所示:

<template>
    <div id="player">
        <div>{{ currentTime }}</div>
        <button @click="start">play</button>
        <div>{{ sequence }}</div>
    </div>
</template>
<script>

 var audioContext = new AudioContext()

 function getRandomInt(min, max) {
     min = Math.ceil(min);
     max = Math.floor(max);
     return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
 }

 export default {
     name: 'player',
     data: function(){
         return {
             sequence: [],
             toRecall: null,
             frequencies: [110, 220, 440, 880],
             lives: 3,
             n: 2,
             currentTime: null,
             stop: false
         }
     },
     methods: {

         playNote: function(startTime, delay, duration){
             var self=this
             return new Promise(function(accept, reject){
                 var pitch = getRandomInt(-12, 13)

                 self.sequence.push(pitch)
                 var startTime = audioContext.currentTime + delay
                 var endTime = startTime + duration
                 var oscillator = audioContext.createOscillator()
                 oscillator.connect(audioContext.destination)
                 oscillator.type = 'sawtooth'
                 oscillator.start(startTime)
                 oscillator.stop(endTime)
                 accept()
             })                          
         },
         start: function(){
             var self=this
             this.currentTime = audioContext.currentTime
             this.playNote(0, 0, 1).then(function(){
                 // do once the note is done playing
                 self.sequence.pop()
             })

         }
     }
 }

具体来说，我希望音高的序列(目前只有一个)在屏幕上显示音符播放的 1 秒，然后消失——只是为了证明 pop 只有在音符播放完毕后才会被调用。谁能帮我这个？谢谢。

Answer 1

参见 https://webaudio.github.io/web-audio-api/#dom-audioscheduledsourcenode-onended .由于 OscillatorNode 是 AudioScheduledSourceNode，您可以执行类似的操作


振荡器.onended =函数(){
/* 从显示中删除注释，或其他任何内容 */
};