需要帮助修改 HTML5 音频分析器栏图形 [英] Need help to Modify HTML5 Audio Analyser bar graphic

问题描述

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

There is a custom animated HTML audio analyzer graphic that plays an audio track and moves based on the frequencies of that audio.

这是来自 CodePen HERE 的代码，我发现它只能工作仅限 HTTPS 域.

This is the code from CodePen HERE, I've found out that it only works on HTTPS domain only.

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

Now the problem is: I don't need to upload an audio track like what the code does, I just need a simple audio track to play automatically and removing that upload button. let's say I have a track1.mp3 in the same directory on the server and want to play it when my HTML page is loaded.

  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>

<input type="file" id="thefile" accept="audio/*"/><canvas id="canvas"></canvas><audio id="audio" 控件></audio>

推荐答案

Google 强制执行另一项政策

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

"Now the problem is: I don't need to upload an audio track like what the code does, I just need a simple audio track to play automatically and removing that upload button. let's say I have a track1.mp3 in the same directory and want to play it when my page is loaded."

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

OK, the demo has been adapted to load a normal url, you'll need to change this line so that it points to the location of the file on your server:

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

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

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

为与CORS的某些冲突添加了位于前面提到的行上方的新行:

audio.crossOrigin = "anonymous";

---

注意:如果此 Stack Snippet 没有声音，则转到此 Plunker

Note: If this Stack Snippet has no sound, then go to this 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>

这篇关于需要帮助修改 HTML5 音频分析器栏图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！