2023-02-19

【JavaScript】非同期処理と async/await をある程度理解する

【実践したいこと】
細かい事までわかろうとするとキリがないのでそこまで深掘りしないとしても、async/await をよくわからないまま何となく使う状況からは脱却したい。
ここでは async/await についてすべて解説しているのではなく、自分が実際に async/await を使うときにはっきりさせたかった部分だけが書かれている。

【前提知識】
Promise

非同期処理とは
async/await とは
- async
- await
参考文献

2022-09-23

【JavaScript】ブラウザのコンソールにログやエラーが表示されないようにしたいとき

【実践したいこと】
何を：console.log などが実行されても、ブラウザのコンソールに何も表示させないようにしたい。
どこで：Webページ上
何のために使うのかはわからないが、実例を見たのでメモしておく。

【ソース】

▾main.js

console.log = function() {};
console.error = function() {};

または

console.log = () => {};
console.error = () => {};

参考文献

stackoverflow.com

2022-09-07

【Web Audio API】ブラウザが Web Audio API に対応しているかチェックしたいとき

【実践したいこと】
何を：ユーザが使っているブラウザが Web Audio API に対応しているかチェックし、対応していなければ警告文をコンソールに表示させるまでどこで：Webページ上

【ソース】

▾index.html

<!DOCTYPE html>
<html>
    <body>
        <script src="main.js"></script>
    </body>
</html>

▾main.js

try {
    window.AudioContext =
        window.AudioContext ||
        window.webkitAudioContext ||
        window.mozAudioContext ||
        window.msAudioContext ||
        window.oAudioContext;
} catch (e) {
    console.error("Your browser does not support Web Audio API.");
}

2021-12-27

【JavaScript】指定の範囲の値を、別の範囲に置き換えたい(再マッピングしたい)とき

【実践したいこと】
何を：ある範囲(たとえば0～7)の値を、別の範囲(たとえば-1～1)の値に置き換えたい。
Pure DataのスライダーやMax/MSPのscaleオブジェクトのような操作が欲しかった。

【ソース】

▾main.js

function mapping (value, minIn, maxIn, minOut, maxOut) {
    return (value - minIn) * (maxOut - minOut) / (maxIn - minIn) + minOut;
}

// 0～7を-1～1の範囲に合わせたときのそれぞれの値を出力
for (let i = 0; i < 8; i++) {
    let val = mapping(i, 0, 7, -1, 1);
    console.log(val);
}

// コンソールログ:
// -1
// -0.7142857142857143
// -0.4285714285714286
// -0.1428571428571429
// 0.1428571428571428
// 0.4285714285714286
// 0.7142857142857142
// 1

参考文献

gist.github.com

siomin.vercel.app

2021-12-11

Web Audio API 前知識：音声処理のために知っておくべき仕組みと用語

Webページ上で音声処理 (サウンドエンジニアリング) をするには、Web Audio APIというJavaScript APIを利用することになる。
この記事では、Web Audio APIを使ったサウンドエンジニアリングを行うにあたって知っておくべき仕組みや用語をまとめておきたい。

音の表現方法
- 時間領域表現
- 周波数領域表現
サンプリングレート (サンプリング周波数、サンプルレート)
チャンネル
- モノ / モノラル (Mono)
- ステレオ (Stereo)
- クアッド (Quad)
- 5.1
音声ノード (audio node)
- 音源を定義するノード
  - OscillatorNode
  - AudioBufferSourceNode
  - MediaElementAudioSourceNode
  - MediaStreamAudioSourceNode
- エフェクトを定義するノード
  - BiquadFilterNode
  - ConvolverNode
  - DelayNode
  - DynamicsCompressorNode
  - GainNode
- 音声の出力先を定義するノード
  - AudioDestinationNode
- 音声データを分析するノード
  - AnalyserNode
AudioContextオブジェクト / 音声処理グラフ (audio processing/routing graph)
参考文献

2021-11-21

【JavaScript】Webページ上で画像や映像をトリミングしたいとき

【実践したいこと】
何を：画像または映像を読み込み、その一部分だけを切り取る(トリミングする)まで (今回は、Webカメラから取得した映像(以下の記事を参照)を使う) 。
どこで：Webページ上

audiovisualcoding.hatenablog.com

【前提知識】
HTML属性とDOMプロパティ

【ソース】

▾index.html

<!DOCTYPE html>
<html>
    <body>
        <div id="canvasWrap"></div>
        <script src="main.js"></script>
    </body>
</html>

▾main.js

// 「Webページ上でWebカメラの映像を使いたいとき」のコードを使用 ==========
const video = document.createElement('video');
video.autoplay = true;
video.width = 720;
video.height = 480;

const media = navigator.mediaDevices;

const constraints = { audio: false, video: true };
media.getUserMedia(constraints)
.then(function(stream) {
    video.srcObject = stream;
});

// 本記事の内容ここから ===============================================
// 1-i Canvasオブジェクトを作成する
const canvas = document.createElement('canvas');
canvas.width = 360;
canvas.height = 240;
// 1-ii canvas要素にどういう手法で描画するかを決定する
ctx = canvas.getContext('2d');
// 1-iii canvas要素をHTMLに追加する
document.getElementById('canvasWrap').appendChild(canvas);

// 2-i 映像を切り取る関数を準備する
function trim() {
    ctx.drawImage(
        // image: 切り取る対象(元イメージ)
        video,
        // sx, sy: 元イメージをトリミングする起点の座標
        video.width / 2 - canvas.width / 2,
        video.height / 2 - canvas.height / 2, 
        // sw, sh: トリミングする大きさ
        canvas.width, canvas.height,
        // dx, dy: トリミングした画像を描画するキャンバス上の起点の座標 
        0, 0, 
        // dw, dh: 描画する大きさ
        canvas.width, canvas.height
    );
}

// 2-ii 映像の読み込みを待って、2-iの関数を実行する
video.addEventListener('play', function() {
    function loop() {
        trim();
        // 2-iii 映像が変わるのに従ってcanvas上の描画を更新する
        // 次の再描画で呼び出し
        requestAnimationFrame(loop);
    }
    // 初回呼び出し: アニメーション画面の更新を始める
    requestAnimationFrame(loop);
})

切り取った画像を描画するための領域を準備する
- 1-i Canvasオブジェクトを作成する
  - Canvasオブジェクトが持つプロパティ
- 1-ii canvas要素にどういう手法で描画するかを決定する
- 1-iii canvas要素をHTMLに追加する
映像をトリミングして、キャンバスに描画する
- 2-i 映像を切り取る関数を準備する
- 2-ii 映像の読み込みを待って、2-iの関数を実行する
- 2-iii 映像が変わるのに従ってcanvas上の描画を更新する
参考文献

2021-11-19

【JavaScript】Webページ上でWebカメラの映像を使いたいとき

【実践したいこと】
何を：ユーザのWebカメラやマイクから、映像・音声(今回は映像のみ)を取得して再生するまで
どこで：Webページ上

【前提知識】

HTML属性とDOMプロパティ
Promise

【ソース】

▾index.html

<!DOCTYPE html>
<html>
    <body>
        <div id="videoWrap"></div>
        <script src="main.js"></script>
    </body>
</html>

▾main.js

// 1-i HTMLVideoElementオブジェクトを作成する
const video = document.createElement('video');
video.autoplay = true;
video.width = 360;
video.height = 240;
// 1-ii video要素をHTMLに追加する
document.getElementById('videoWrap').appendChild(video);

// 2-i MediaDevicesオブジェクトを用意する
const media = navigator.mediaDevices;
// 2-ii Webカメラを使っていいかユーザに聞く
const constraints = { audio: false, video: true };
media.getUserMedia(constraints)
// 2-iii 取得できた映像・音声データを処理する
.then(function (stream) {
    video.srcObject = stream;
});

取得する映像・音声の行き先を準備する
- 1-i Videoオブジェクトを作成する
  - Videoオブジェクトが持つプロパティ
- 1-ii video要素をHTMLに追加する
Webカメラやマイクを通した映像・音声を取得する
- 2-i MediaDevicesオブジェクトを用意する
- 2-ii Webカメラを使っていいかユーザに聞く
- 2-iii 取得できた映像・音声データを処理する
参考文献