Vue.jsTwitterFacebookはてブPocket前回、いろんな音がだせるオシレーターをつくった。音が出せるようになったら、やっぱりどんな波形か見たくなるのが世の常。APIとSVG/Canvasをつかってオシロスコープをつくる。パフォーマンス検証のためSVGとCanvasの双方をつかったが、サンプルが小さかったこともあり違いは見られなかった。(詳細は後述する)音声波形データを取得するOscillatorNodeをAnalyserNodeに繋ぐことで、音声波形や周波数のデータを取得できる。fftSize(時間領域)内の波形データが取得できるので、プロットしてグラフ(オシロスコープ)を表示するconsole.log(data);AnalyserNode.fftSizeプロパティで高速フーリエ変換(FFT)においての周波数領域(データを取得する範囲)を指定する。デフォルトだと2024。32〜32768の範囲で、2のべき乗の値が指定できる。AnalyserNode.frequencyBinCountプロパティ(readonly)で、可視化に必要なデータ数が取得できるので、この値を使って空のUint8Arrayを作成する。今回はオシロスコープ(波形の形をみる)ので、AnalyserNode.getByteTimeDomainDataメソッドを使い、先ほど作成したUint8Arrayにコピーする。このメソッドを実行すると、時系列ごとの波形の値が取得できる。スペクトラムアナライザ(周波数ごとの音量)を見たいときはAnalyserNode.getByteFrequencyDataメソッドを使う。API(AnalyserNode)とVue.jsでオシロスコープをつくる。}});OscillatorNode→AnalyserNode→AudioDestinationNodeと繋ぎ、オシレーターの音声波形データを取得できるようにしている。">のように線を引いている。あとはSVGのd属性とバインドしているだけなので処理としては簡単になっている。Canvasによる描画の場合は、クリア→描画→クリア→描画→...のサイクルを行っている。y)で線を引きながら描画している。今回はサンプルアプリが小さいのでSVG・Canvasとも性能に差異はなかった。コードを見ていただければわかるとおり、SVGの方がかなりシンプルに書ける。その辺は好みだろうか...。Serverでの開発を行った時にハマったのが、Nullと空文字("")の扱いの違いだった。結論から言うと、以下のようになっている。...【C#】いろんなパディング(空白埋めやゼロ埋め)固定長IFファイルの作成では必要不可欠な処理、パディング。文字長を一定にしたり、ブラの隙間に夢を詰めたりいろんな使い方がされる。このエントリでは以下の3種類の方法を紹介する。2)」とかいたらコンパイラさんに怒られてしまった。LEFT関数は特に問題ないが、可変長データ...Excelで「データを貼り付けできません。」というエラーが出た時の対処法Excelでなぜか図形が挿入できない。オブジェクトを貼り付けることができない。こんなしょうもないことで、10分を無駄にしてしまった。その対処法をまとめる。Google先生に聞いたところ、以下の対処法があったが、どれもよくわからなかった。