第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

為什么我的程序在 Atom 內(nèi)的atom-html-preview和atom-live-serve

為什么我的程序在 Atom 內(nèi)的atom-html-preview和atom-live-serve

偶然的你 2023-11-02 17:14:28
我有一個程序,它使用 Web Audio API 來可視化音頻的時域波形。它在 Atom 中工作正常,我使用“harmsk”的“atom-html-preview”包,但它不能在 Chrome 或 JSFiddle 中運(yùn)行。我做錯了什么?是語法錯誤還是我使用了過時的函數(shù)?編輯:它也適用于“jas-chen”的“atom-live-server”在 Atom 中,輸出如下所示let frequencyArray = [];let analyser;let request;var flag=0;var height=0;const canvas = document.getElementById("myCanvas");const ctx = canvas.getContext("2d");const bars = Math.round(canvas.width);const lineWidth = 3;var centerX = canvas.width / 2;var centerY = canvas.height / 2;const audio = new Audio();audio.src =  "https://s3.us-west-2.amazonaws.com/storycreator.uploads/ck9kpb5ss0xf90132mgf8z893?client_id=d8976b195733c213f3ead34a2d95d1c1";audio.crossOrigin = "anonymous";audio.load();const context = new (window.AudioContext || window.webkitAudioContext)();analyser = context.createAnalyser();const source = context.createMediaElementSource(audio);source.connect(analyser);analyser.connect(context.destination);frequencyArray = new Uint8Array(analyser.frequencyBinCount);  function begin()  {    audio.play();    requestAnimationFrame(drawCanvas);  };  function end()  {    cancelAnimationFrame(request);    audio.pause();  };audio.addEventListener("ended", close);function close(){  if(flag==0)  {    flag=1;  }  else  {      ctx.clearRect(0, 0, canvas.width, canvas.height);      flag=0;  }}  const drawCanvas = () => {      ctx.clearRect(0, 0, canvas.width, canvas.height);      analyser.getByteTimeDomainData(frequencyArray);      for (var i = 0; i < bars; i+=5) {       height = frequencyArray[i] * 0.25;        drawLine(          {            i,            bars,            height          },          canvas,          ctx        );      }      if(flag==0)      {      request = requestAnimationFrame(drawCanvas);      }      else      {        flag=2;        close();      }  };
查看完整描述

1 回答

?
人到中年有點甜

TA貢獻(xiàn)1895條經(jīng)驗 獲得超7個贊

我認(rèn)為這是因為控制臺中的此錯誤

js:47 AudioContext 不允許啟動。它必須在用戶在頁面上做出手勢后恢復(fù)(或創(chuàng)建)。

如果您引用消息中的鏈接,則它指定

如果您在頁面加載時創(chuàng)建 AudioContext,則必須在用戶與頁面交互(例如,用戶單擊按鈕)后的某個時間調(diào)用resume()?;蛘?,如果在任何附加節(jié)點上調(diào)用 start(),則 AudioContext 將在用戶手勢后恢復(fù)。

由于您AudioContext是在用戶手勢(單擊)之前創(chuàng)建的,因此您可以修改begin函數(shù)以恢復(fù)上下文,

?function begin()

? {

? ? context.resume().then(() => {

? ? ? ? ? audio.play();

? ? ? ? ? requestAnimationFrame(drawCanvas);

? ? });

? };

工作演示:

let frequencyArray = [];

let analyser;

let request;

var flag=0;

var height=0;


const canvas = document.getElementById("myCanvas");

const ctx = canvas.getContext("2d");

const bars = Math.round(canvas.width);

const lineWidth = 3;



var centerX = canvas.width / 2;

var centerY = canvas.height / 2;



const audio = new Audio();

audio.src =

? "https://s3.us-west-2.amazonaws.com/storycreator.uploads/ck9kpb5ss0xf90132mgf8z893?client_id=d8976b195733c213f3ead34a2d95d1c1";

audio.crossOrigin = "anonymous";

audio.load();


const context = new (window.AudioContext || window.webkitAudioContext)();

analyser = context.createAnalyser();

const source = context.createMediaElementSource(audio);


source.connect(analyser);

analyser.connect(context.destination);


frequencyArray = new Uint8Array(analyser.frequencyBinCount);



? function begin()

? {

? ? context.resume().then(() => {

? ? ?audio.play();

? ? ?requestAnimationFrame(drawCanvas);

? ? })

? };


? function end()

? {

? ? cancelAnimationFrame(request);

? ? audio.pause();

? };


audio.addEventListener("ended", close);


function close()

{

? if(flag==0)

? {

? ? flag=1;

? }

? else

? {

? ? ? ctx.clearRect(0, 0, canvas.width, canvas.height);

? ? ? flag=0;

? }

}



? const drawCanvas = () => {


? ? ? ctx.clearRect(0, 0, canvas.width, canvas.height);

? ? ? analyser.getByteTimeDomainData(frequencyArray);


? ? ? for (var i = 0; i < bars; i+=5) {

? ? ? ?height = frequencyArray[i] * 0.25;


? ? ? ? drawLine(

? ? ? ? ? {

? ? ? ? ? ? i,

? ? ? ? ? ? bars,

? ? ? ? ? ? height

? ? ? ? ? },

? ? ? ? ? canvas,

? ? ? ? ? ctx

? ? ? ? );

? ? ? }


? ? ? if(flag==0)

? ? ? {

? ? ? request = requestAnimationFrame(drawCanvas);

? ? ? }

? ? ? else

? ? ? {

? ? ? ? flag=2;

? ? ? ? close();

? ? ? }

? };


??

? const drawLine = (opts, canvas, ctx) => {

? ? const { i, bars, height } = opts;


? ? // draw the bar

? ? ctx.strokeStyle = "#212121";

? ? ctx.lineWidth = lineWidth;

? ? ctx.lineCap = "round";

? ? ctx.beginPath();

? ? ctx.moveTo(i, centerY);

? ? ctx.lineTo(i, centerY + height);

? ? ctx.stroke();


? ? ctx.beginPath();

? ? ctx.moveTo(i, centerY);

? ? ctx.lineTo(i, centerY - height);

? ? ctx.stroke();



};

<!DOCTYPE html>

<html>

<head>


<body>


<button onClick=begin()>Start</button>

<button onClick=end()>End</button>

<canvas id="myCanvas" width="500" height="200" style="border:1px solid #d3d3d3;">

</canvas>



</body>

</html>


查看完整回答
反對 回復(fù) 2023-11-02
  • 1 回答
  • 0 關(guān)注
  • 137 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號