HTML5 음악 시각화 비디오 튜토리얼에 대한 리소스 권장 사항

간단한 음악 재생이 너무 단조롭나요? 음악을 들으면서 볼 수도 있다면 더욱 재미있을 것 같아요. 이 과정에서는 webAudio와 캔버스를 사용하여 원하는 형식으로 음악을 시각화하고 음악을 움직이게 만들 수 있습니다.

강좌 재생 주소: //m.sbmmt.com/course/327.html

선생님의 강의 스타일:

선생님의 강의는 간단하고 심층적이며 구조가 명확합니다. , 그리고 층별로 분석합니다. 상호 연결되고 엄격한 논증, 엄격한 구조를 사용하여 논리적 사고력을 사용하여 학생들의 관심을 끌고 이성을 사용하여 교실 교육 과정을 제어합니다. 선생님의 강의를 들으면서 학생들은 지식을 배울 뿐만 아니라 사고력 훈련도 받으며 선생님의 엄격한 학업 태도에 영향을 받습니다. 이 영상에서 더 어려운 부분은 HTML5 음악 시각화입니다:

음악 획득 및 재생

2. , /public/stylesheets/index.css

4, 백그라운드 라우팅 제어, Routes/index.js, 음악 목록을 가져와서 앞 섹션으로 반환

ajax 요청 서버 측 오디오 데이터

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

생성된 파일을 편집하여 클릭 효과를 얻으세요

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

오디오 디코딩 및 재생

Create: var buffersource = ac.createBufferSource()

Properties:

- 하위 속성: 지속 시간, 오디오 리소스의 지속 시간(초)

loop, 반복 재생 여부, 기본값은 false

when: 재생 시작 시간;

duration: 재생 시간(초)

stop/noteOff(when=ac.currentTime), 오디오 재생 종료

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

gain, AudioParam 객체의 값을 변경하여 오디오 신호의 강도를 변경할 수 있습니다. 기본값 속성 값은 1입니다. 최소값은 0이고 최대값은 1입니다. 값은 1보다 크고 0

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 값 할당 var source = null;, 이전 노래 소스의 디코딩된 데이터 저장 = bufferSource;, 실행을 판단하여 소스 && 소스 재생을 중지합니다[ source.stop ? "stop" : "noteoff"](0);

음악 데이터 시각화

音频分析对象，它能实时的分析音频资源的频域和时域信息，但不会对音频流做任何处理
创建：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 중국어 웹사이트의 기타 관련 기사를 참조하세요!