Ressourcenempfehlungen für Video-Tutorials zur HTML5-Musikvisualisierung

Ist das bloße Abspielen von Musik zu eintönig? Wäre es interessanter, wenn man die Musik auch sehen könnte, während man sie hört? Dieser Kurs führt Sie in die Verwendung von webAudio und Canvas ein, um Ihre Musik in der von Ihnen gewünschten Form zu visualisieren und Ihre Musik in Bewegung zu bringen.

Adresse für die Kurswiedergabe: //m.sbmmt.com/course/327.html

Die Der Unterrichtsstil des Lehrers:

Die Vorträge des Lehrers sind einfach und ausführlich, klar in der Struktur, werden Schicht für Schicht analysiert, sind ineinandergreifend, streng in der Argumentation und streng in der Struktur. Er nutzt die logische Kraft des Denkens um die Aufmerksamkeit der Schüler zu erregen und den Unterrichtsprozess vernünftig zu steuern. Durch das Anhören der Vorlesungen des Lehrers lernen die Schüler nicht nur Wissen, sondern erhalten auch eine Denkschulung und werden auch von der strengen akademischen Haltung des Lehrers beeinflusst und beeinflusst

Der schwierigere Punkt in diesem Video ist HTML5-Musik Visualisierung:

Erfassung und Wiedergabe von Musik

Aufbau des Front-Ends und Backends der Anwendung

1. Erstellen Sie einen neuen Mediendatenordner, public/media, legen Sie die Audiodaten darin ab
2, erstellen Sie das Seiten-CSS-Framework, /public/stylesheets/index.css
3, lesen Sie den Seiteninhalt, Ansichten/index.ejs
4, Hintergrund-Routing-Steuerung, Routen/index.js, holen Sie sich die Musikliste und kehren Sie zum vorherigen Abschnitt zurück

Ajax fordert serverseitige Audiodaten an

Erstellen Sie eine neue Datei index.js unter Javascripts, referenzieren Sie sie und erstellen Sie sie in Views/index.ejs. Bearbeiten und erstellen Sie Dateien

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

, um Klickeffekte zu erzielen

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

Audio dekodieren und abspielen

AudioContext

Ein Objekt, das einzelne AudioNode-Objekte und ihre Verbindungen enthält, das heißt, das Audio-Kontextobjekt. In einem Dokument wird nur ein AudioContext erstellt: var ac = new window.AudioContext();

Attribute:

destination, AudioDestinationNode-Objekt, in dem alle Audioausgänge gesammelt werden, entspricht Audio-Hardware, Alle AudioNodes sind hier direkt oder indirekt verbunden.

currentTime, die Zeit (Sekunden) von der Erstellung von AudioContext bis zur aktuellen Zeit.

Methode:

decodeAudioData(arrayBuffer,succ(buffer),err), in arrayBuffer enthaltene Audiodaten asynchron dekodieren

createBufferSource(), autoBufferSourceNode-Objekt erstellen

createAnalyser(), AnalyserNode-Objekt erstellen

createGain()/createGainNode(), GainNode-Objekt erstellen

AudioBufferSourceNode

stellt eine Audioressource im Speicher dar, deren Audiodaten sind gespeichert in AudioBuffer (sein Pufferattribut)
Erstellung: var buffersource = ac.createBufferSource();

Eigenschaften:

Puffer, AudioBuffer-Objekt, stellt die abzuspielenden Audioressourcendaten dar
——Unterattribut: Dauer, die Dauer der Audioressource (Sekunden)

Schleife, ob die Wiedergabe wiederholt werden soll, Standardwert falsch

onended, kann an die aufgerufene Zeit gebunden werden Die Audiowiedergabe ist abgeschlossen. Handler

-Methode:

start/noteOn(when=ac.currentTime,offset=0,buration=buffer.duration-offset), beginnt mit der Audiowiedergabe.
wann: wann mit der Wiedergabe begonnen werden soll;
Offset: wie viele Sekunden mit der Wiedergabe beginnen sollen
Dauer: wie viele Sekunden mit der Wiedergabe beginnen sollen

stop/noteOff(when=ac.currentTime) , Ende Audio abspielen

Lautstärkeregelung hinzufügen

GainNode

Ein Objekt, das die Audiolautstärke und die Signalstärke aller Sampleframes ändert, die seine Audiodaten weiterleiten
Erstellen: var GainNode = ac.createGain()/ac.createGainNode();

gain, AudioParam-Objekt, die Stärke des Audiosignals kann durch Ändern seines Werts geändert werden. Der Standardwert des Attributs ist 1 Der Mindestwert ist 0. Der Höchstwert ist 1, und sein Wert kann auch größer als 1 und kleiner als 0 sein

Fehlerbehebung beim Abspielen

Problem: Beim Abspielen des zweiten Liedes wird das erste Lied abgespielt wird immer noch abgespielt. Der Hauptgrund ist, dass jedes Mal, wenn Sie auf die Musikliste klicken, „load("/media/"+this.title) aufgerufen wird, die Daten dekodiert und abgespielt werden:

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);
    });
}

Lösung:
Weisen Sie den Audiodaten einen Nullwert zu, var source = null ;, speichern Sie die dekodierten Daten des vorherigen Songs source = bufferSource;, beurteilen Sie die Ausführung, um die Wiedergabe von source && source[source.stop ? "stop" : "noteoff "](0);

Visualisierung von Musikdaten

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核心功能封装为对象

Das obige ist der detaillierte Inhalt vonRessourcenempfehlungen für Video-Tutorials zur HTML5-Musikvisualisierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!