HTML5 Web Audio API的内容与使用

主要api解释：

  `// 创建音频上下文  
    var audioCtx = new AudioContext();
    // 创建音调控制对象  
    var oscillator = audioCtx.createOscillator();
    // 创建音量控制对象  
    var gainNode = audioCtx.createGain();
    // 音调音量关联  
    oscillator.connect(gainNode);
    // 音量和设备关联  
    gainNode.connect(audioCtx.destination);
    // 音调类型指定为正弦波  
    oscillator.type = 'sine';
    // 设置音调频率  
    oscillator.frequency.value = 196.00;
    // 先把当前音量设为0  
    gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
    // 0.01秒时间内音量从刚刚的0变成1，线性变化 
    gainNode.gain.linearRampToValueAtTime(1, audioCtx.currentTime + 0.01);
    // 声音开始
    oscillator.start(audioCtx.currentTime);
    // 1秒时间内音量从刚刚的1变成0.001，指数变化 
    gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 1);
    // 1秒后停止声音 
    oscillator.stop(audioCtx.currentTime + 1);
    `

vue版本：实现功能：利用播放暂停按钮来切换：

`//声明变量:用于切换播放暂停
data.isPlay = false;
let beeps = {
init() {
    if (this.audioCtx) {
     return;
    }
    this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
},
start(){
    if(this.oscillator){
        this.stop();
    }
    // 创建音调控制对象
    this.oscillator = this.audioCtx.createOscillator();
    // 创建音量控制对象
    var gainNode = this.audioCtx.createGain();
    // 音调和音量关联
    this.oscillator.connect(gainNode);
    // 音量和设备（扬声器）关联
    gainNode.connect(this.audioCtx.destination);
    gainNode.gain.value = 0.1;
    // 音调类型指定为'triangle'
    this.oscillator.type = "sine";
    this.oscillator.start(this.audioCtx.currentTime);
    //设置音调的频率
    this.oscillator.frequency.value = 0;
},
stop(){
    if(!this.oscillator){
       return;
    }
    this.oscillator.stop()
},
beep(frequency) {
    if (data.isPlay === false ) {
     return;
    } else {
        if (this.oscillator) {
            this.oscillator.frequency.value = frequency;
        } 
    }
},
};  `

// 给按钮添加点击事件：
click(){
    beeps.init();
    data.isPlay = !data.isPlay;
}
// 监听data.isPlay的改变
if(data.isPlay){
    beeps.play();
}else if(!data.isPlay){
    beeps.stop();
}
//监听频率是否改变，传入对应频率
if(data.isPlay){
    beeps.beep(3333)
}

原生版本：实现功能：点击按钮播放一次声音，duration结束后自动停止：

`<div class="play-frequency">
    <label style="font-size:18px;">频率音调</label>
        <svg onclick="btnPlayClick()" version="1.1" id="play" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="40px" width="40px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
           <path class="stroke-solid" fill="none" stroke="#99bbff" d="M49.9,2.5C23.6,2.8,2.1,24.4,2.5,50.4C2.9,76.5,24.7,98,50.3,97.5c26.4-0.6,47.4-21.8,47.2-47.7
        C97.3,23.7,75.7,2.3,49.9,2.5" />
            <path class="icon" fill="#99bbff" d="M38,69c-1,0.5-1.8,0-1.8-1.1V32.1c0-1.1,0.8-1.6,1.8-1.1l34,18c1,0.5,1,1.4,0,1.9L38,69z" />
        </svg>
</div>

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
//播放对应频率的声音
function btnPlayClick() {
    console.log(elF.val())
    beep(elF.val(), 30000)
}

function beep(frequency, duration) {
    var oscillator = audioCtx.createOscillator();
    var gainNode = audioCtx.createGain();
    oscillator.connect(gainNode);
    gainNode.connect(audioCtx.destination);
    gainNode.gain.value = 0.3;
    oscillator.frequency.value = frequency;
    oscillator.type = 'triangle';
    oscillator.start();

    setTimeout(
        function () {
            oscillator.stop();
        },
        duration
    );
};`

参考文章：www.zhangxinxu.com/wordpress/2…