1
を働いていない私は私のHTML5オーディオを可視化するためのオーディオAPIのjsのコードを使用し、それがチュートリアル/コードアナライザバーアニメーションHTMLオーディオAPI
リンクでここに素晴らしい仕事：https://www.developphp.com/video/Jav...o-API-Tutorial
は、それが秀良い作品しかし、私は次のように外部リンクとSRCを変更問題：
SRC =「http://example.com/file.mp3」
オーディオが音を立てるいけないと私は可視化コードを削除すると、それが当たり前に働くものの、可視化を示してはいけません味方...私は、オーディオが再生
AudioContext.createMediaStreamDestination()
と
context.createMediaElementSource(audio);
を変えてみましたが、何の可視化はまだ..私は、私はすべてのアイデアを何ができるかわかりませんか？
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<style>
div#mp3_player{ width:500px; height:60px; background:#000; padding:5px; margin:50px auto; }
div#mp3_player > div > audio{ width:500px; background:#000; float:left; }
div#mp3_player > canvas{ width:500px; height:30px; background:#002D3C; float:left; }
</style>
<script>
// Create a new instance of an audio object and adjust some of its properties
var audio = new Audio();
// audio.crossOrigin='anonymous';
audio.src = 'http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.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(){
\t document.getElementById('audio_box').appendChild(audio);
\t context = new AudioContext(); // AudioContext object instance
\t analyser = context.createAnalyser(); // AnalyserNode method
\t canvas = document.getElementById('analyser_render');
\t ctx = canvas.getContext('2d');
\t // Re-route audio playback into the processing graph of the AudioContext
\t
\t source = context.createMediaStreamDestination(audio); \t
\t
\t source.connect(analyser);
\t analyser.connect(context.destination);
\t 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(){
\t window.requestAnimationFrame(frameLooper);
\t fbc_array = new Uint8Array(analyser.frequencyBinCount);
\t analyser.getByteFrequencyData(fbc_array);
\t ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
\t ctx.fillStyle = '#00CCFF'; // Color of the bars
\t bars = 100;
\t for (var i = 0; i < bars; i++) {
\t \t bar_x = i * 3;
\t \t bar_width = 2;
\t \t bar_height = -(fbc_array[i]/2);
\t \t // fillRect(x, y, width, height) // Explanation of the parameters below
\t \t ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
\t }
}
}
</script>
</head>
<body>
<div id="mp3_player">
<div id="audio_box"></div>
<canvas id="analyser_render"></canvas>
</div>
</body>
</html>
@Sabreenaこれはサーバー側で行われていますが、私が答えてくれたリンクを読んでください。 – Kaiido
返信いただきありがとうございます。解決策を得ました:-) – Sabreena
@Sabreena、嬉しいです。その答えがあなたの問題を解決するのに役立つならば、あなたは[それを受け入れる]ことを歓迎する以上のものです（http://stackoverflow.com/help/someone-answers）。こうして、それは答えられる*ストリームから降りるでしょう。 – Kaiido