WAVE TYPE (波形)

ピー音を再生する

まめちしき

虫除けアプリがうたう周波数:

蚊が嫌がる周波数 16KHz~18KHz、もしくは6000Hz~9000Hz

ネズミよけ 25kHz

若者にしか聞こえないモスキート音 17kHz~19kHz

※「虫よけには超音波が効く」という科学的根拠はない

view source

JavaScript

document.title = 'ピー音ノイズを再生する';

(function() {
    var fontColor = 'rgba(0, 0, 0, 1)';
    var waveColor = 'rgba(0, 0, 255, 0.8)';
    var gridColor = 'rgba(0, 0, 0, 0.1)';
    var font = '12px "Times New Roman"';
    var onDOMContentLoaded = function() {
 
        window.AudioContext = window.AudioContext || window.webkitAudioContext;
 
        try {
            // Create the instance of AudioContext
            var context = new AudioContext();
        } catch (error) {
            window.alert(error.message + ' : chrome.');
            return;
        }
 
        // Create the instance of OscillatorNode
        var oscillator = context.createOscillator();
 
        // Parameters for the instance of OscillatorNode
        var type      = oscillator.type;
        var frequency = oscillator.frequency.value;
        var detune    = oscillator.detune.value;
 
        // for legacy browsers
        context.createGain = context.createGain || context.createGainNode;
 
        // Create the instance of GainNode
        var gain = context.createGain();
 
        // Flag for starting or stopping sound
        var isStop = true;
 
        // for drawing sound wave
 
        // Create the instance of AnalyserNode
        var analyser = context.createAnalyser();
 
        var canvas = document.querySelector('canvas');
        var ctx = canvas.getContext('2d');
 
        var timerid  = null;
        var interval = document.getElementById('range-draw-interval').valueAsNumber;
 
        var drawWave = function() {
            var width  = canvas.width;
            var height = canvas.height;
 
            var paddingTop    = 20;
            var paddingBottom = 20;
            var paddingLeft   = 30;
            var paddingRight  = 30;
 
            var innerWidth  = width  - paddingLeft - paddingRight;
            var innerHeight = height - paddingTop  - paddingBottom;
            var innerBottom = height - paddingBottom;
 
            var middle = (innerHeight / 2) + paddingTop;
 
            // Sampling period
            var period = 1 / context.sampleRate;
 
            // This value is the number of samples during 5 msec
            var n5msec = Math.floor(5 * Math.pow(10, -3) * context.sampleRate);
 
            // Get data for drawing sound wave
            var times = new Uint8Array(analyser.fftSize);
            analyser.getByteTimeDomainData(times);
 
            // Clear previous data
            ctx.clearRect(0, 0, width, height);
 
            // Draw sound wave
            ctx.beginPath();
 
            for (var i = 0, len = times.length; i < len; i++) {
                var x = Math.floor((i / len) * innerWidth) + paddingLeft;
                var y = Math.floor((1 - (times[i] / 255)) * innerHeight) + paddingTop;
 
                if (i === 0) {
                    ctx.moveTo(x, y);
                } else {
                    ctx.lineTo(x, y);
                }
 
                // 5 msec ?
                if ((i % n5msec) === 0) {
                    var sec  = i * period;             // index -> time
                    var msec = sec * Math.pow(10, 3);  // sec -> msec
                    var text = Math.round(msec);// + ' msec';
                    // Draw grid (X)
                    ctx.fillStyle = gridColor;
                    ctx.fillRect(x, paddingTop, 1, innerHeight);
 
                    // Draw text (X)
                    ctx.fillStyle = fontColor;
                    ctx.font      = font;
                    ctx.fillText(text, (x - (ctx.measureText(text).width / 2)), (height - 3));
                }
            }
            var text = ' msec';
            ctx.fillText(text, (x), (height - 3));
            
 
            ctx.strokeStyle = waveColor;
            ctx.lineWidth   = 2;
            ctx.lineCap     = 'round';
            ctx.lineJoin    = 'miter';
            ctx.stroke();
 
            // Draw grid (Y)
            ctx.fillStyle = gridColor;
            ctx.fillRect(paddingLeft, paddingTop,  innerWidth, 1);
            ctx.fillRect(paddingLeft, middle,      innerWidth, 1);
            ctx.fillRect(paddingLeft, innerBottom, innerWidth, 1);
 
            // Draw text (Y)
            ctx.fillStyle = fontColor;
            ctx.font      = font;
            ctx.fillText(' 1.00', 3, paddingTop);
            ctx.fillText(' 0.00', 3, middle);
            ctx.fillText('-1.00', 3, innerBottom);
 
            timerid = window.setTimeout(drawWave, interval);
        };
 
        /*
         * Event Listener
         */
 
        // Start or Stop sound
        document.querySelector('button').addEventListener(EventWrapper.CLICK, function() {
            if (isStop) {
                // Create the instance of OscillatorNode
                oscillator = context.createOscillator();
 
                // for legacy browsers
                oscillator.start = oscillator.start || oscillator.noteOn;
                oscillator.stop  = oscillator.stop  || oscillator.noteOff;
 
                // OscillatorNode (Input) -> GainNode (Volume) -> AnalyserNode (Visualization) -> AudioDestinationNode (Output)
                oscillator.connect(gain)
                gain.connect(analyser);
                analyser.connect(context.destination);
 
                // Set parameters
                oscillator.type            = type;
                oscillator.frequency.value = frequency;
                oscillator.detune.value    = detune;
 
                // Start sound
                oscillator.start(0);
 
                // Start drawing sound wave
                drawWave();
 
                isStop = false;
                this.innerHTML = '■';
            } else {
                // Stop sound
                oscillator.stop(0);
 
                // Stop drawing sound wave
                if (timerid !== null) {
                    window.clearTimeout(timerid);
                    timerid = null;
                }
 
                isStop = true;
                this.innerHTML = '▶';
            }
        }, false);
 
        // Control Draw Interval
        document.getElementById('range-draw-interval').addEventListener('input', function() {
            interval = this.valueAsNumber;
            document.getElementById('output-draw-interval').textContent = this.value;
        }, false);
 
        // Control Volume
        document.getElementById('range-volume').addEventListener('input', function() {
            var min = gain.gain.minValue || 0;
            var max = gain.gain.maxValue || 1;
 
            if ((this.valueAsNumber >= min) && (this.valueAsNumber <= max)) {
                gain.gain.value = this.valueAsNumber;
                document.getElementById('output-volume').textContent = this.value;
            }
        }, false);
 
        // Select type
        document.getElementById('form-wave-type').addEventListener('change', function() {
            for (var i = 0, len = this.elements['radio-wave-type'].length; i < len; i++) {
                if (this.elements['radio-wave-type'][i].checked) {
                    oscillator.type = type = (typeof oscillator.type === 'string') ? this.elements['radio-wave-type'][i].value : i;
                    break;
                }
            }
        }, false);
 
        // Control frequency
        document.getElementById('range-frequency').addEventListener('input', function() {
            var min = oscillator.frequency.minValue || 0;
            var max = oscillator.frequency.maxValue || 100000;
 
            if ((this.valueAsNumber >= min) && (this.valueAsNumber <= max)) {
                oscillator.frequency.value = frequency = this.valueAsNumber;
                document.getElementById('output-frequency').textContent = this.value;
            }
        }, false);
 
        // Control detune
        document.getElementById('range-detune').addEventListener('input', function() {
            var min = oscillator.detune.minValue || -4800;
            var max = oscillator.detune.maxValue ||  4800;
 
            if ((this.valueAsNumber >= min) && (this.valueAsNumber <= max)) {
                oscillator.detune.value = detune = this.valueAsNumber;
                document.getElementById('output-detune').textContent = this.value;
            }
        }, false);
    };
 
    if ((document.readyState === 'interactive') || (document.readyState === 'complete')) {
        onDOMContentLoaded();
    } else {
        document.addEventListener('DOMContentLoaded', onDOMContentLoaded, true);
    }
 
})();






function EventWrapper(){
}
 
(function(){
    var click = '';
    var start = '';
    var move  = '';
    var end   = '';
 
    // Touch Panel ?
    if (/iPhone|iPad|iPod|Android/.test(navigator.userAgent)) {
        click = 'click';
        start = 'touchstart';
        move  = 'touchmove';
        end   = 'touchend';
    } else {
        click = 'click';
        start = 'mousedown';
        move  = 'mousemove';
        end   = 'mouseup';
    }
 
    EventWrapper.CLICK = click;
    EventWrapper.START = start;
    EventWrapper.MOVE  = move;
    EventWrapper.END   = end;
})();


//https://weblike-curtaincall.ssl-lolipop.jp/portfolio-web-sounder/webaudioapi-basic/demos/demo-16

CSS

#demo{
  display: grid;
  place-items: center;
}

canvas{
  display:block;
  margin:0 auto;
}
[name="form-wave-type"] label{
  display:block;
  height:32px;
  line-height:32px;
}

input[type="range"]{
  width:98%;
}

button{
  width:100%;
  min-width:80px;
  height:4em;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-audio-sign-wave-noize/

ABOUT

hi0a.com 「ひまアプリ」は無料でつかえる便利ツールやブラウザ上で遊べるミニゲームを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。ご了承下さい。