Question

我正在尝试在没有任何可视化的情况下播放音频。我使用了下面的代码：

<!doctype html>
<html>
<head>
    <style>
        div#mp3_player{ width:500px; height:120px; background:#000; padding:5px; margin:50px auto; border-radius: 10px; }
        div#mp3_player > div > audio{  width:500px; background:#000; float:left;   }
        div#mp3_player > canvas{ width:500px; height:60px; padding: 0px; background:#ffffff; float:left; border-radius: 10px;}
    </style>
    <script>
        window.AudioContext = window.AudioContext || window.webkitAudioContext;
        // Create a new instance of an audio object and adjust some of its properties
        var audio = new Audio();
        audio.src = 'UncleFlexxx - Camry 3.5.mp3';
        audio.controls = true;
        audio.loop = true;
        audio.autoplay = true;
        // Establish all variables that your Analyser will use
        var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
        // Initialize the MP3 player after the page loads all of its HTML into the window
        window.addEventListener("load", initMp3Player, false);
        function initMp3Player(){
            document.getElementById('audio_box').appendChild(audio);
            context = new webkitAudioContext(); // AudioContext object instance
            analyser = context.createAnalyser(); // AnalyserNode method
            canvas = document.getElementById('analyser_render');
            ctx = canvas.getContext('2d');
            // Re-route audio playback into the processing graph of the AudioContext
            source = context.createMediaElementSource(audio);
            source.connect(analyser);
            analyser.connect(context.destination);
            frameLooper();
        }
        // frameLooper() animates any style of graphics you wish to the audio frequency
        // Looping at the default frame rate that the browser provides(approx. 60 FPS)
        function frameLooper(){
            window.webkitRequestAnimationFrame(frameLooper);
            fbc_array = new Uint8Array(analyser.frequencyBinCount);
            analyser.getByteFrequencyData(fbc_array);
            ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
            ctx.fillStyle = 'white'; // Color of the bars
            bars = 100;
            for (var i = 0; i < bars; i++) {
                bar_x = i * 3;
                bar_width = 4;
                bar_height = -(fbc_array[i] / 2.5);
                //  fillRect( x, y, width, height ) // Explanation of the parameters below
                ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
            }
        }
    </script>
</head>
<body>
<div id="mp3_player">
    <div id="audio_box"></div>
    <canvas id="analyser_render"></canvas>
</div>
</body>
</html>

我不知道该怎么办！我试过注入 window.AudioContext = window.AudioContext || window.webkitAudioContext; 但没有任何改变！我没有熟悉的程序员，所以我来到这里，请帮助。看起来谷歌无法读取此代码或我不知道的内容。

Google 将 context = new webkitAudioContext(); 视为错误！

Answer 1

只需将音频标签添加到 dom 中

    var audio = new Audio();
    audio.src = 'UncleFlexxx - Camry 3.5.mp3';
    audio.controls = true;
    audio.loop = true;
    audio.autoplay = true;
    document.getElementById("mp3_player").appendChild(audio);

音频在没有可视化的情况下播放

1 个答案: