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

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

javascript html

Javascript 加载文件并在页面加载时播放音频,javascript,html,Javascript,Html,我有代码，允许我输入mp3文件，输出音频并显示音乐的视觉表现。（通过输入type=“file”手动加载文件）我不再想从我的电脑加载文件，而是在加载页面上自动播放音乐。该文件名为song.mp3 我不知道如何调整我的代码以允许自动播放（我希望视觉表现也能在加载时工作） window.onload=function（）{ var file=document.getElementById（“thefile”）； var audio=document.getElementById（“音频”）； fi

我有代码，允许我输入mp3文件，输出音频并显示音乐的视觉表现。（通过输入type=“file”手动加载文件）

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

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

window.onload=function（）{
var file=document.getElementById（“thefile”）；
var audio=document.getElementById（“音频”）；
file.onchange=函数（）{
var files=this.files；
audio.src=URL.createObjectURL（文件[0]）；
load（）；
音频播放（）；
var context=新的AudioContext（）；
var src=context.createMediaElementSource（音频）；
var analyzer=context.createanalyzer（）；
var canvas=document.getElementById（“canvas”）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var ctx=canvas.getContext（“2d”）；
src.连接（分析仪）；
分析器.连接（上下文.目的地）；
Analyzer.fftSize=256；
var bufferLength=分析仪频率BINCOUNT；
console.log（缓冲区长度）；
var DATARRAY=新的Uint8Array（缓冲区长度）；
var WIDTH=canvas.WIDTH；
var HEIGHT=canvas.HEIGHT；
变量barWidth=（宽度/缓冲长度）*2.5；
高度；
var x=0；
函数renderFrame（）{
requestAnimationFrame（renderFrame）；
x=0；
分析仪。GetByTefFrequencyData（数据阵列）；
ctx.fillStyle=“#fff”；
ctx.fillRect（0，0，宽度，高度）；
对于（变量i=0；i
#文件{
位置：固定；
顶部：10px；
左：10px；
z指数：100；
}
#帆布{
位置：固定；
左：0；
排名：0；
宽度：100%；
身高：50%；
-webkit变换：旋转（180度）；
-moz变换：旋转（180度）；
-o变换：旋转（180度）；
-ms变换：旋转（180度）；
变换：旋转（180度）；
}
音频{
位置：固定；
左：10px；
底部：10px；
宽度：计算（100%-20px）；
}

JS音频可视化工具
从文档中获取音频标签后，只需加载并播放音频文件
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>



您可以从这里获取静音声音文件
你的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();
    };
  };

window.onload=function（）{
函数renderVisual（）{
var analyzer=context.createanalyzer（）；
var canvas=document.getElementById（“canvas”）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var ctx=canvas.getContext（“2d”）；
src.连接（分析仪）；
分析器.连接（上下文.目的地）；
Analyzer.fftSize=256；
var bufferLength=分析仪频率BINCOUNT；
console.log（缓冲区长度）；
var DATARRAY=新的Uint8Array（缓冲区长度）；
var WIDTH=canvas.WIDTH；
var HEIGHT=canvas.HEIGHT；
变量barWidth=（宽度/缓冲长度）*2.5；
高度；
var x=0；
函数renderFrame（）{
requestAnimationFrame（renderFrame）；
x=0；
分析仪。GetByTefFrequencyData（数据阵列）；
ctx.fillStyle=“#fff”；
ctx.fillRect（0，0，宽度，高度）；
对于（变量i=0；i

你的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>


JS音频可视化工具

注意：如果您直接在本地打开文件，由于CORS
，Chrome上会出现错误。您需要将您的网站托管到服务器（Nginx或Apache）。
这里是在页面加载时播放mp3的最简单方法
您只需在音频标签上添加控件和自动播放属性，就可以播放自动播放音乐
<audio id="myAudio" controls autoplay>
  <source src="music.mp3" type="audio/mpeg">
</audio>