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>
添加回答
舉報