音频在没有可视化的情况下播放
[英]Audio is playing without visualization
问题描述
I am trying to play audio without any visualisation.
我正在尝试在没有任何可视化的情况下播放音频。 I have used the code below:我使用了下面的代码：
<: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>
I do not know what to do!我不知道该怎么办！ I've tried injecting window.AudioContext = window.AudioContext || window.webkitAudioContext;我试过注入window.AudioContext = window.AudioContext || window.webkitAudioContext; window.AudioContext = window.AudioContext || window.webkitAudioContext; but nothing has changed, I have no familiar programmers, so I came here.但什么都没有改变，我没有熟悉的程序员，所以我来到了这里。 please help.请帮忙。 Looks like google can't read this code or what I don't know.看起来谷歌无法阅读此代码或我不知道的内容。
Google considers context = new webkitAudioContext();谷歌认为context = new webkitAudioContext(); as an error !作为一个错误！
1 个解决方案
解决方案1
2 已采纳 2021-01-18 17:24:10
Just add the audio tag into the dom只需将音频标签添加到 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);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.