加载文件并在页面加载时播放音频

Question

我有一些代码可以让我输入一个 mp3 文件，然后输出音频并显示音乐的视觉表现。 （加载文件是通过输入类型=“文件”手动完成的）

我不再想从我的计算机加载文件，而是在页面加载时自动播放音乐。 该文件名为song.mp3。

我不确定如何调整我的代码以允许自动播放（我希望视觉表示也能在加载时工作）。

 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 = "#fff"; 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(" + 0 + "," + 0 + "," + 0 + ")"; 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: 50%; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } audio { position: fixed; left: 10px; bottom: 10px; width: calc(100% - 20px); }

 <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>JS Audio Visualizer</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div id="content"> <input type="file" id="thefile" accept="audio/*" /> <canvas id="canvas"></canvas> <audio id="audio" controls></audio> </div> <script src="./script.js"></script> </body> </html>

Answer 1

从文档中获取音频标签后，您只需要加载和播放音频文件。

var audio = document.getElementById("audio");
audio.src = URL.createObjectURL("song.mp3");
audio.load();
audio.play();

因为 Chrome 不允许自动播放音频加载，直到用户与网页进行交互。 因此，您需要添加一个带有静音声音的隐藏自动播放iframe 。

<iframe src="silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>

您可以从这里获取静音声音文件https://github.com/anars/blank-audio/blob/master/250-milliseconds-of-silence.mp3

你的js

window.onload = function() {
    function renderVisual() {
        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 = "#fff";
            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(" + 0 + "," + 0 + "," + 0 + ")";
                ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);

                x += barWidth + 1;
            }
        }

        renderFrame();
    }

    var context = new AudioContext();
    var file = document.getElementById("thefile");
    var audio = document.getElementById("audio");
    audio.src = "song.mp3";
    audio.load();
    var src = context.createMediaElementSource(audio);
    audio.play();
    renderVisual();

    file.onchange = function() {
      var files = this.files;
      audio.src = URL.createObjectURL(files[0]);
      audio.load();
      audio.play();
      renderVisual();
    };
  };

你的html

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>JS Audio Visualizer</title>



      <link rel="stylesheet" href="./style.css">


</head>

<body>

  <div id="content">
  <input type="file" id="thefile" accept="audio/*" />
  <canvas id="canvas"></canvas>
  <audio id="audio" controls></audio>
  <iframe src="silence.mp3" allow="autoplay" id="silence_audio" style="display:none"></iframe>
</div>



    <script  src="./script.js"></script>




</body>

</html>

注意：由于CORS如果您直接在本地打开文件，这将在 Chrome 上出错。 您需要将您的网站托管到服务器（Nginx 或 Apache）。

Answer 2

这是在页面加载时播放 mp3 的最简单方法

您只需要在音频标签上添加控制和自动播放属性，然后您就可以播放自动播放音乐

<audio id="myAudio" controls autoplay>
  <source src="music.mp3" type="audio/mpeg">
</audio>

注意：它在本地不起作用，您需要将文件托管在服务器上

参考链接： https : //www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_autoplay

加载文件并在页面加载时播放音频

问题描述

2 个解决方案

解决方案1
3 已采纳 2019-07-22 02:48:57

解决方案2
1 2020-05-24 21:05:24

加载文件并在页面加载时播放音频

问题描述

2 个解决方案

解决方案1 3 已采纳 2019-07-22 02:48:57

解决方案2 1 2020-05-24 21:05:24

解决方案1
3 已采纳 2019-07-22 02:48:57

解决方案2
1 2020-05-24 21:05:24