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

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

강좌 재생 주소: http://www.php.cn/course/327.html

선생님의 강의 스타일:

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

음악 획득 및 재생

애플리케이션의 프런트엔드 및 백엔드 구축

1. 새 미디어 데이터 폴더인 public/media를 만들고 여기에 오디오 데이터를 넣습니다.

2. , /public/stylesheets/index.css

3 , 페이지 콘텐츠 읽기, views/index.ejs

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

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

javascripts 아래에 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가 생성됩니다. 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(해당 버퍼 속성)에 저장됩니다.

Create: var buffersource = ac.createBufferSource()

Properties:

buffer, AudioBuffer 객체는 재생할 오디오 리소스 데이터를 나타냅니다.

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

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

보다 작을 수도 있습니다. 재생 버그 수정

문제: 두 번째 노래 재생 노래를 재생할 때 첫 번째 노래가 계속 재생되는 주된 이유는 음악 목록을 클릭할 때마다 로드("/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 값 할당 var source = null;, 이전 노래 소스의 디코딩된 데이터 저장 = 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!