亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 JS 畫布中繪制正弦波沒有任何作用

在 JS 畫布中繪制正弦波沒有任何作用

牧羊人nacy 2022-07-01 16:49:50
我編寫了以下內容以從 AudioBuffer 中繪制聲波,但我得到的是帶有水平直線的畫布:const { audioContext, analyser } = this.getAudioContext();const source = audioContext.createBufferSource();source.buffer = audioBuffer;source.connect(audioContext.destination);const canvas = document.getElementById('canvas');const canvasCtx = canvas.getContext("2d");let sinewaveDataArray = new Uint8Array(analyser.fftSize);const drawSinewave = function() {    analyser.getByteTimeDomainData(sinewaveDataArray);    requestAnimationFrame(drawSinewave);    canvasCtx.fillStyle = 'white';    canvasCtx.fillRect(0, 0, canvas.width, canvas.height);    canvasCtx.lineWidth = 2;    canvasCtx.strokeStyle = "black";    canvasCtx.beginPath();    const sliceWidth = canvas.width * 1.0 / analyser.fftSize;    let x = 0;    for(let i = 0; i < analyser.fftSize; i++) {        const v = sinewaveDataArray[i] / 128.0; // byte / 2 || 256 / 2        const y = v * canvas.height / 2;        if(i === 0) {            canvasCtx.moveTo(x, y);        } else {            canvasCtx.lineTo(x, y);        }        x += sliceWidth;    }    canvasCtx.lineTo(canvas.width, canvas.height / 2);    canvasCtx.stroke();};source.start();drawSinewave();getAudioContext =  () => {        AudioContext = window.AudioContext || window.webkitAudioContext;        const audioContext = new AudioContext();        const analyser = audioContext.createAnalyser();        return { audioContext, analyser };    };我正在尋找的最終結果類似于這里的第一個圖像剪輯:https ://meyda.js.org/知道我缺少什么嗎?
查看完整描述

1 回答

?
繁星淼淼

TA貢獻1775條經驗 獲得超11個贊

我認為需要進行兩個小改動才能使其正常工作。

source.start()需要響應用戶事件來執行??梢允褂脦в袉螕籼幚沓绦虻暮唵伟粹o來實現此目的。這是處理某些瀏覽器中存在的自動播放策略所必需的。

aReferenceToAButton.addEventListener('click', async () => {
    await audioContext.resume();
    source.start();});

最后但同樣重要的是,您需要通過AnalyserNode.

source
    .connect(analyser)
    .connect(audioContext.destination);

我希望這有幫助。


查看完整回答
反對 回復 2022-07-01
  • 1 回答
  • 0 關注
  • 139 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號