用途
新着
履歴
分類

JS サウンドビジュアライザー

JS サウンドビジュアライザー
JS サウンドビジュアライザー
音を使ったビジュアル表現のサンプルです。

jQueryとhowler.jsを使ったサウンドビジュアライザーのサンプルコードの備忘録です。

音のスピードや音量調整も簡易的に付けています。

BGM
rate
1
2
3
volume
1
2
3

howler.jsを読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.1/howler.min.js" crossorigin="anonymous"></script>

JS

    window.onload = () => {

        this.drawTimer  = null;
        this.playButton = document.getElementById('js-play');
        this.svg        = document.getElementById('js-svg');
        this.svgPath    = this.svg.querySelector('path');

    $(".btn_base").on("click",function(){
            if($(this).attr("data")==="off"){
                if(typeof bgm !== 'undefined'){
                    bgm.stop();
                }
                bgm = new Howl({
                src: [$(this).attr("data-base")],
                autoplay: false,
                loop: true,
                volume: 0.5
                });

                initAudioVisualizer();
                bgm.load();
                bgm.play();
                drawAudioVisualizer();

                $(".btn_base").attr("data","off");
                $(this).attr("data","on");
            }else if($(this).attr("data")==="on"){
                bgm.stop();
                $(this).attr("data","off");
            }
        });
        $(".btn_tempo").on("click",function(){
            //速度を変更する 0.5 〜 4.0 
            if(typeof bgm !== 'undefined'){
                bgm.rate($(this).attr("data"));
            }
        });

        $(".btn_vol").on("click",function(){
            // ボリュームは 0.0 〜 1.0 の間で設定できる
            if(typeof bgm !== 'undefined'){
                bgm.volume($(this).attr("data"));
            }
        });
        



//Web Audio APIの設定 各ノードをつなぐ
function initAudioVisualizer(){
    //音源を視覚化するために波形データの配列を取得する
    this.analyserNode = Howler.ctx.createAnalyser();
    this.freqs = new Uint8Array(this.analyserNode.frequencyBinCount);
    //ボリュームコントローラ
    Howler.ctx.createGain = Howler.ctx.createGain || Howler.ctx.createGainNode;
    this.gainNode = Howler.ctx.createGain();
    this.gainNode.gain.setValueAtTime(1, Howler.ctx.currentTime);
    //各ノードをつなぐ
    Howler.masterGain.connect(this.analyserNode);
    this.analyserNode.connect(this.gainNode);
    this.gainNode.connect(Howler.ctx.destination);
}

  //オーディオビジュアライザーのSVGを描画
  function drawAudioVisualizer(){
    // 0~1 0に近い方が描画がスムーズになる
    this.analyserNode.smoothingTimeConstant = 0.1;
    // FFTサイズ
    this.analyserNode.fftSize = 1024;
    // 周波数領域の波形データを引数の配列に格納する
    this.analyserNode.getByteFrequencyData(this.freqs);
    //SVG横幅が波形データに対してどのくらいの長さになるか
    const barWidth = this.svg.width.baseVal.value * 1.5 / this.analyserNode.frequencyBinCount;
    //SVGのpathに適用
    drawSvgPath(barWidth);
    //毎フレームごとに描画
    this.drawTimer = window.requestAnimationFrame(drawAudioVisualizer.bind(this));
  }

  //SVGパスを描画
  function drawSvgPath(barWidth){
    let d = 'M';
    this.freqs.forEach((y, i) => {
      const x       = i * barWidth;
      const value   = this.freqs[i];
      const percent = value / 255;
      const yBase   = i % 2 === 0 ? 1 : -1
      const height  = this.svg.height.baseVal.value/2 + (this.svg.height.baseVal.value/2 * percent * -1) * yBase * this.gainNode.gain.value;
      d += `${x} ${height},`;
    });
    this.svgPath.setAttribute('d', d);
  }


    };

HTML

<div class="flex">
    <div class="btn_base btn" data="off" data-base="/sound/demo/base/d001.wav">BGM</div>
    <div class="t">rate</div>
    <div class="btn_tempo demo_btn m" data="1">1</div>
    <div class="btn_tempo demo_btn m" data="1.5">2</div>
    <div class="btn_tempo demo_btn m" data="2">3</div>
    <div class="t">volume</div>
    <div class="btn_vol demo_btn m" data="0.1">1</div>
    <div class="btn_vol demo_btn m" data="0.5">2</div>
    <div class="btn_vol demo_btn m" data="1.0">3</div>

</div>

<div class="p-view">
    <div class="p-view__box">
    <svg class="p-view__svg" id="js-svg" xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400" preserveAspectRatio="none">
    <path d="M0,200 L600,200" stroke="#430" stroke-width="0.5" fill="none" />
    </svg>
    </div>


</div>
公開 2021-06-02 00:56:29
更新 2021-06-02 01:10:51
このページの二次元コード

同じカテゴリーのサンプル

人気のサンプル

search -  category -  about
© 2021 kipure
Top