HTML5 音楽ビジュアライゼーションのビデオ チュートリアルに関するリソースの推奨事項

単純な音楽再生は単調すぎませんか? 音楽を聴きながら見ることができれば、さらに面白くなります。このコースでは、webAudio と Canvas を使用して、音楽を好きな形で視覚化し、音楽を動かすことができます。

コース再生アドレス: http://www.php.cn/course/327.html

教師の指導スタイル:

教師の講義はシンプルかつ奥深く、構造が明確です、相互に接続された厳密な議論、厳密な構造を層ごとに分析し、論理的思考力を使用して生徒の注意を引き、理性を使用して教室での指導プロセスを制御します。教師の講義を聞くことで、学生は知識を学ぶだけでなく、思考のトレーニングも受け、教師の厳格な学問的態度に影響され、影響を受けます。このビデオのさらに難しい部分は、HTML5 音楽の視覚化です:

。 音楽の取得と再生

アプリケーションのフロントエンドとバックエンドを構築します

1. 新しいメディア データ フォルダー public/media を作成し、そこにオーディオ データを配置します

2. ページの CSS フレームワークを構築します。 、/public/stylesheets/index.css

3、ページコンテンツの読み取り、views/index.ejs

4、バックグラウンドルーティング制御、routes/index.js、音楽リストを取得してフロントセクションに返す

ajaxリクエストサーバーサイドオーディオデータ

JavaScriptの下に新しいファイルindex.jsを作成し、作成したファイルをviews/index.ejsで参照します

<script type="text/javascript" src="/javascripts/index.js"></script>

作成したファイルを編集してクリック効果を実現します

<ul id="list">
        <% music.forEach(function(name){ %>
              <li title="<%= name %>"><%= name %></li>    #设置title属性
        <% }) %>
</ul>

オーディオをデコードして再生する

AudioContext

には、各 AudioNode オブジェクトとその接続オブジェクト、つまりオーディオ コンテキスト オブジェクトが含まれています。ドキュメント内に作成される AudioContext は 1 つだけです: var ac = new window.AudioContext();

属性:

destination、AudioDestinationNode オブジェクト。すべてのオーディオ出力が集まり、オーディオ ハードウェアに相当し、すべての AudioNode が直接または間接的に接続されます。ここ。

currentTime、AudioContextの作成から現在までの時間(秒)。

メソッド:

decodeAudioData(arrayBuffer,succ(buffer),err)、arrayBufferに含まれる音声データを非同期でデコード

createBufferSource()、autoBufferSourceNodeオブジェクトを作成

createAnalyser()、AnalyserNodeオブジェクトを作成

createGain() /createGainNode () は、GainNode オブジェクトを作成します。

AudioBufferSourceNode

はメモリ内のオーディオ リソースを表し、そのオーディオ データは AudioBuffer (そのバッファ属性) に保存されます。バッファ、AudioBuffer オブジェクトは、再生されるオーディオ リソース データを表します

- サブ属性:duration、オーディオ リソースの継続時間 (秒)

loop、ループ再生するかどうか、デフォルトは false

onended、バインドされたオーディオの再生が完了しました タイム ハンドラー

メソッド:

start/noteOn(when=ac.currentTime,offset=0,buration=buffer.duration-offset) は、オーディオの再生を開始します。

when: 再生を開始するタイミング;

offset: オーディオの再生を開始する秒数;

duration: 再生する秒数

stop/noteOff(when=ac.currentTime)、オーディオの再生を終了する

ボリュームコントロールを追加します

GainNode

オーディオボリュームを変更し、オーディオデータを渡すすべてのサンプルフレームの信号強度を変更するオブジェクト

Create: var GainNode = ac.createGain()/ac.createGainNode();

gain, AudioParamオブジェクトの値を変更することで、オーディオ信号の強度を変更できます。デフォルト値の属性値は 1、最小値は 0、最大値は 1 です。値は 1 より大きく、0 未満にすることもできます

。

再生バグ修正

問題: 2 番目の曲を再生する 曲を再生するときに、最初の曲がまだ再生されている主な原因は、音楽リストをクリックするたびに、load("/media/"+this.title) が行われることです。が呼び出され、データがデコードされて再生されます:

xhr.onload = function(){
    ac.decodeAudioData(xhr.response, function(buffer){
        var bufferSource = ac.createBufferSource();
        bufferSource.buffer = buffer;
        bufferSource.connect(gainNode);
        bufferSource[bufferSource.start?"start":"noteOn"](0);
    }, function(err){
                console.log(err);
    });
}

解決策:

オーディオデータにNull値を割り当てます varsource = null;、前の曲のデコードされたデータを保存しますsource =bufferSource;、ソース&&ソースの再生を停止するように実行を判断します[source.stop ? "stop" : "noteoff"](0);

音楽データの可視化

AnalyserNode

音频分析对象，它能实时的分析音频资源的频域和时域信息，但不会对音频流做任何处理
创建：var analyser = ac.createAnalyser();

fftSize，设置FFT（FFT是离散傅里叶变换的快速算法，用于将一个信号变换到频域）值得大小，用于分析得到频域，为32 - 2048之间2的整数倍，默认为2048。实时得到的音频频域的数据个数为FFTSize的一半

frequencyBinCount，FFT值得一半，即实时得到的音频频域的数据个数

getByteFrequencyData(Uint8Array)，复制音频当前的频域数据（数量是FrequencyBinCount）到Uint8Array（8位无符号整型类型化数组）中

创建Analyser对象：

var analyser = ac.createAnalyser();
analyser.fftSize = 512;
analyser.connect(gainNode);

连接到分

析对象获取数据：bufferSource.connect(analyser);

实现可视化功能函数：

function visualizer(){
    var arr = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(arr);
    console.log(arr);
}

调用visualizer函数：

利用canvas将音乐数据可视化（柱状图）

在views下加入id

控制高度变化：

var box = $("#box")[0];
var height, width;
var canvas = document.createElement("canvas");
box.appendChild(canvas);
 
function resize(){
    height = box.clientHeight;
    width = box.clientWidth;
    canvas.height = height;
    canvas.width = width;
}
resize();    #调用触发函数
 
window.onresize = resize;

利用canvas将音乐数据可视化（圆点图）

应用优化

webAudio API

webAudio核心功能封装为对象

以上がHTML5 音楽ビジュアライゼーションのビデオ チュートリアルに関するリソースの推奨事項の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。