MediaElementAudioSource输出零由于CORS访问限制本地mp3文件
MediaElementAudioSource outputs zeros due to CORS access restrictions local mp3 file
我有以下html页面,我试图展示一个类来演示音频可视化器与本地存储的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>
在使用脚本标签中的所有代码之前,我已经获得了mp3文件自动播放,不包括
行以下的内容audio.autoplay = true;
但是当我包含frameLooper函数时,我得到消息"MediaElementAudioSource由于CORS访问限制而输出零。"既然它是本地文件,有没有办法绕过这个?
在初始化Audio对象之后,添加以下内容:
audio.crossOrigin = "anonymous";
相关文章:
- 如何使用javascript只加载mp3文件标题
- 获取二进制数据并将其保存为.mp3文件Javascript
- 如何将MP3文件播放到麦克风输入jQuery中
- 使链接播放.mp3文件
- JavaScript/HTML5音频:在Android Chrome中播放用户通过文件选择器加载的mp3文件
- 播放mp3文件之前,请参阅其他页面的javascript
- HTML5网络音频API wavesurfer.js在大型mp3文件上崩溃
- MP3文件未通过联机播放器播放
- 为什么不能在人行横道中选择“mp3”文件
- 我正在尝试一个接一个地播放一个 mp3 文件(一个作为介绍),但它不起作用.我该怎么做
- 是否可以使用 Javascript 或 jQuery 将 mp3 文件转换为 m4r
- 通过PHP从mp3文件中获取封面艺术并显示它
- 将 mp3 文件从另一台服务器下载到我的服务器
- 在点击时播放mp3文件与javascript
- 在主文件夹和子文件夹中搜索.mp3文件
- 离子如何创建一个mp3文件
- 基本 Web 音频 API 不播放 mp3 文件
- 节点 - 将 m3u8 流另存为 mp3 文件
- 动态路径变量播放音频.mp3文件 如何?D3 JavaScript 咖啡脚本
- 如何使用Jplayer播放多个mp3文件