需要帮助修改 HTML5 音频分析器栏图形

Question

有一个自定义动画 HTML 音频分析器图形，可播放音轨并根据该音频的频率移动。

这是来自 CodePen HERE的代码，我发现它仅适用于 HTTPS 域。

现在的问题是：我不需要像代码那样上传音轨，我只需要一个简单的音轨来自动播放并删除该上传按钮。 假设我在服务器上的同一目录中有一个track1.mp3并且想在我的 HTML 页面加载时播放它。

 window.onload = function() { var file = document.getElementById("thefile"); var audio = document.getElementById("audio"); file.onchange = function() { var files = this.files; audio.src = URL.createObjectURL(files[0]); audio.load(); audio.play(); var context = new AudioContext(); var src = context.createMediaElementSource(audio); var analyser = context.createAnalyser(); var canvas = document.getElementById("canvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var ctx = canvas.getContext("2d"); src.connect(analyser); analyser.connect(context.destination); analyser.fftSize = 256; var bufferLength = analyser.frequencyBinCount; console.log(bufferLength); var dataArray = new Uint8Array(bufferLength); var WIDTH = canvas.width; var HEIGHT = canvas.height; var barWidth = (WIDTH / bufferLength) * 2.5; var barHeight; var x = 0; function renderFrame() { requestAnimationFrame(renderFrame); x = 0; analyser.getByteFrequencyData(dataArray); ctx.fillStyle = "#000"; ctx.fillRect(0, 0, WIDTH, HEIGHT); for (var i = 0; i < bufferLength; i++) { barHeight = dataArray[i]; var r = barHeight + (25 * (i / bufferLength)); var g = 250 * (i / bufferLength); var b = 50; ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")"; ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight); x += barWidth + 1; } } audio.play(); renderFrame(); }; };

 #thefile { position: fixed; top: 10px; left: 10px; z-index: 100; } #canvas { position: fixed; left: 0; top: 0; width: 100%; height: 100%; } audio { position: fixed; left: 10px; bottom: 10px; width: calc(100% - 20px); }

 <div id="content"> <input type="file" id="thefile" accept="audio/*" /> <canvas id="canvas"></canvas> <audio id="audio" controls></audio> </div>

Answer 1

谷歌强制执行另一项政策

对于这些人来说，没有什么是神圣的——截至 2018 年 12 月，针对开发 Web Audio API 的 Chrome 用户制定了新的自动播放政策。 如果AudioContext(); 在用户与手势（点击、敲击、打嗝、打鼾等）交互之前创建， AudioContext(); 将被暂停，直到用户这样做。

因此，为了适应这个工程奇迹，我添加了一个播放按钮并将所有内容包装在一个 eventListener 中。

---

更改src

“现在的问题是：我不需要像代码那样上传音轨，我只需要一个简单的音轨来自动播放并删除该上传按钮。假设我在同一目录中有一个 track1.mp3并想在我的页面加载时播放它。”

好的，演示已经适应加载一个普通的 url，你需要更改这一行，使其指向服务器上文件的位置：

 audio.src = "https://host.top/path/to/file.mp3";

由于与 CORS 的某些冲突，添加了前面提到的行上方的新行：

 audio.crossOrigin = "anonymous";

---

普朗克

演示

注意：如果这个 Stack Snippet 没有声音，那么去这个Plunker

 document.getElementById('load').addEventListener('click', audioViz); function audioViz(e) { var player = document.getElementById("player"); player.crossOrigin = "anonymous"; player.src = "https://glsbx.s3-us-west-1.amazonaws.com/-/dd.mp3"; player.load(); player.play(); var context = new AudioContext(); var src = context.createMediaElementSource(player); var analyser = context.createAnalyser(); var canvas = document.getElementById("canvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var ctx = canvas.getContext("2d"); src.connect(analyser); analyser.connect(context.destination); analyser.fftSize = 256; var bufferLength = analyser.frequencyBinCount; console.log(bufferLength); var dataArray = new Uint8Array(bufferLength); var WIDTH = canvas.width; var HEIGHT = canvas.height; var barWidth = (WIDTH / bufferLength) * 2.5; var barHeight; var x = 0; function renderFrame() { requestAnimationFrame(renderFrame); x = 0; analyser.getByteFrequencyData(dataArray); ctx.fillStyle = "#000"; ctx.fillRect(0, 0, WIDTH, HEIGHT); for (var i = 0; i < bufferLength; i++) { barHeight = dataArray[i]; var r = barHeight + (25 * (i / bufferLength)); var g = 250 * (i / bufferLength); var b = 50; ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")"; ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight); x += barWidth + 1; } } player.play(); renderFrame(); }

 button { position: fixed; top: 46px; left: 46px; z-index: 100; display: inline-block; font-size: 48px; border: none; background: none; color: rgba(223, 6, 39, 0.8); cursor: pointer; } button:hover { color: rgba(255, 0, 128, 0.8); } button:focus { outline: 0 } #canvas { position: fixed; left: 0; top: 0; width: 100%; height: 100%; } #player { position: fixed; left: 10px; bottom: 10px; width: calc(100% - 20px); }

 <button id='load' class='load' type='button'>▶</button> <canvas id="canvas"></canvas> <audio id="player" controls> <source src='about:blank'> </audio>