17
tôi đã trang html sau đây mà tôi đang cố gắng để hiển thị một lớp học để chứng minh một visualizer âm thanh với một mp3 lưu trữ cục bộ:MediaElementAudioSource kết quả đầu ra số không do hạn chế truy cập CORS địa phương tập tin mp3
<!doctype html>
<html>
<head>
<header name = "Access-Control-Allow-Origin" value = "*" />
<style type = "text/css">
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 new instance of audio
var audio = new Audio();
audio.src = 'C:/Users/Adam/Desktop/1901.m4a';
audio.controls = true;
audio.loop = true;
audio.autoplay = true;
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
window.addEventListener("load", initMp3Player, false);
function frameLooper(){
window.webkitRequestAnimationFrame(frameLooper);
fbc_array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(fbc_array);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#00CCFF";
bars = 100;
for (var i = 0; i < bars; i++){
bar_x = i * 3;
bar_width = 2;
bar_height = -(fbc_array[i]/2);
ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
}
}
function initMp3Player(){
document.getElementById('audio_box').appendChild(audio);
context = new AudioContext();
analyser = context.createAnalyser();
canvas = document.getElementById('analyser_render');
ctx = canvas.getContext('2d');
source = context.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(context.destination);
frameLooper();
}
</script>
</head>
<body>
<div id = "mp3_player">
<div id = "audio_box"></div>
<canvas id = "analyser_render"></canvas>
</div>
</body>
Tôi đã nhận tệp mp3 để phát tự động trước khi sử dụng tất cả mã trong thẻ tập lệnh ngoại trừ những gì bên dưới dòng
audio.autoplay = true;
nhưng khi tôi bao gồm function frameLooper Tôi nhận được thông báo "MediaElementAudioSource kết quả đầu ra 0 do hạn chế truy cập CORS." Có anyway để phá vỡ này vì nó là một tập tin địa phương?
Bạn không thể truy nhập các tệp từ hệ thống tệp như vậy, sử dụng máy chủ web và truy cập chúng từ cùng một miền, giao thức và cổng – adeneo
Cài đặt Python và xem cách quay lên máy chủ web cục bộ bằng Python từ thư mục hiện tại: 'python -m http.server 8000' https://docs.python.org/3/library/http.server.html - khi được truy cập qua http, nhiều hạn chế của CORS trở nên lành mạnh hơn. –
@adeneo làm những việc này được cấu hình bên trong tệp wsgi của dự án khung web? –