【完全コピペ可能】Web Audio APIで音鳴らしてみた。ついでに停止、再開ボタンも。

こんにちは!マダラです。。

めちゃくちゃ久しぶりの投稿です!ブログって継続が大事とは言いますが、いざやるとなかなか難しいものですね。。

PVもじわじわと下がり出してきたので焦って投稿してします笑

今回はWeb Audio APIを用いて、簡単にブラウザから音を出していきます。
コピペで簡単に利用できるのが大好きなみなさんのためにも、コード丸っと貼っておきますね。

スポンサーリンク

Web Audio APIとは

Web Audio APIはWeb上で音声を扱うための強力で多機能なシステムを提供します。これにより開発者はオーディオソースを選択したり、エフェクトを加えたり、ビジュアライゼーションを加えたり、パンニングなどの特殊効果を適用したり、他にもたくさんのいろいろなことができるようになります。

まんま公式から持ってきました。

要はブラウザで音楽やエフェクトを加えたりできるんですよね!
今回私は、簡単に音楽を鳴らすところまで実装しただけなので、そんなに理解していない。。

Web Audio APIを使ってみる

それでは、下記のコードを利用してください。

<button id="bgmConfirm" ontouchstart="">開始</button>
<button id="bgmStop" ontouchstart="">停止・再開</button>
document.addEventListener("DOMContentLoaded", function(){
    var stopflag=0;
    document.querySelector('#bgmConfirm').addEventListener('click', function() {
      const AudioContext = window.AudioContext || window.webkitAudioContext;
      const ctx = new AudioContext();
      const request = new XMLHttpRequest();
      const url = 'https://zprodev.github.io/web-audio-test/assets/Campfire_Song.mp3';
      request.open('GET', url, true);
      request.responseType = 'arraybuffer';
      request.onload =  () => {
        ctx.decodeAudioData(request.response, (audioBuffer) => {
          const audioSource = ctx.createBufferSource();
          audioSource.buffer = audioBuffer;
          audioSource.connect(ctx.destination);
          audioSource.start();
        });
      }
      request.send();
      // 停止
      document.querySelector('#bgmStop').addEventListener('click', function() {
          if (stopflag == 0) {
              ctx.suspend();
              stopflag = 1;
          } else {
              ctx.resume();
              stopflag = 0;
          }
      });
    });
},false);

Web Audio APIを実行するには、ユーザの動作による発火が必要です。

パケ死対策のため、ユーザー操作があるまでオーディオを鳴らさないようになっているらしいです。

勝手にブラウザから音が発生するのは、ユーザがびっくりするのでよくないってのも応用情報で見た気がします。

自動再生させる裏技もあるようですが、qiitaの記事にたくさんあったので是非調べてみてください。

Web Audio APIに関する詳細な情報が知りたい方はこちらのリンク先を見ればわかりますよ〜

https://developer.mozilla.org/ja/docs/Web/API/Web_Audio_API

スポンサーリンク