audio canvas 绘制音频图失败
0
悬赏园豆：80
[已解决问题]
解决于 2021-01-14 19:08
Uncaught DOMException: Failed to execute 'createMediaElementSource' on 'AudioContext': HTMLMediaElement already connected previously to a different MediaElementSourceNode.
at uploadfile
未能对“AudioContext”执行“createMediaElementSource”：HTMLMediaElement以前已连接到其他MediaElementSourceNode。
audio canvas 绘制音频图
通过input 获取本地文件,将aa.mp3进行播放绘制音频图,然后再通过input文件获取bb.mp3文件进行播放绘制音频图失败,报错:
Uncaught DOMException: Failed to execute 'createMediaElementSource' on 'AudioContext': HTMLMediaElement already connected previously to a different MediaElementSourceNode.
at uploadfile
未能对“AudioContext”执行“createMediaElementSource”：HTMLMediaElement以前已连接到其他MediaElementSourceNode。
有没有大神可以帮忙看下
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Audio Visualizer</title>
<style type="text/css">
/*visualizer.css*/
.playbutton{
position: relative;
left:500px;
z-index: 100;
}
.stopbutton{
position: relative;
left:500px;
z-index: 100;
}
#file1 {
position: fixed;
left: 700px;
top: 0;
z-index: 100;
}
#file2 {
position: fixed;
left: 900px;
top: 0;
z-index: 100;
}
#canvas {
position: fixed;
left: 0;
top: 0;
width: 20%;
height: 30%;
}
audio {
position: fixed;
left: 10px;
bottom: 10px;
width: calc(100% - 20px);
display:block;
}
</style>
</head>
<body>
<div id="content">
<input type="file" id="file1" accept="audio/*" onchange="uploadfile(this)"/>
<canvas id="canvas"></canvas>
<audio id="audio" controls></audio>
</div>
<div class="playbutton" onclick="Pause();">play/Pause</div>
<div class="stopbutton" onclick="Stop();">stop</div>
<div class="stopbutton" onclick="play();">play</div>
</body>
<script type="text/javascript">
var file = document.getElementById("file");
var audio = document.getElementById("audio");
var state=0;//0 关闭 1:暂停 2:播放
function Stop(){
//var audio = document.getElementById("audio");
audio.load();
state=0;
}
function Pause(){
//var audio = document.getElementById('audio');
if(audio!==null){
//检测播放是否已暂停.audio.paused 在播放器播放时返回false.
//alert(audio.paused);
if(audio.paused) {
audio.play();//audio.play();// 这个就是播放
state=2;
}else{
audio.pause();// 这个就是暂停
state=1;
}
}
}
state=0;
//var file = document.getElementById("file");
//var audio = document.getElementById("audio");
function uploadfile(file){
//var audio=document.createElement("audio");
//part1: 画布
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var WIDTH = canvas.width;
var HEIGHT = canvas.height;
//part2: 音频
var files = file.files;//声音文件
console.log("files[0]");
console.log(files[0]);
audio.src = URL.createObjectURL(files[0]);
console.log("***1*1***");
audio.load();
console.log("***2*2***");
//part3: 分析器
var AudCtx = new AudioContext();//音频内容
//AudCtx.createMediaElementSource();
var src = AudCtx.createMediaElementSource(audio);
var analyser = AudCtx.createAnalyser();
src.connect(analyser);
analyser.connect(AudCtx.destination);
analyser.fftSize = 128;//快速傅里叶变换, 必须为2的N次方
var bufferLength = analyser.frequencyBinCount;// = fftSize * 0.5
//part4: 变量
var barWidth = (WIDTH / bufferLength) - 1;//间隔1px
var barHeight;
var dataArray = new Uint8Array(bufferLength);//8位无符号定长数组
console.log(audio);
//part5: 动态监听
function renderFrame() {
requestAnimationFrame(renderFrame);//方法renderFrame托管到定时器，无限循环调度，频率<16.6ms/次
if(state=="2"){
context.fillStyle = "#000";//黑色背景
context.fillRect(0, 0, WIDTH, HEIGHT);//画布拓展全屏,动态调整
analyser.getByteFrequencyData(dataArray);//获取当前时刻的音频数据
// console.log("dataArray:"+dataArray);
//console.log("bufferLength:"+bufferLength);
//part6: 绘画声压条
var x = 0;
for (var i = 0; i < bufferLength; i++) {
var data = dataArray[i];//int,0~255
//var percentV = data / 255;//纵向比例
var percentV = data / 500;
var percentH = i / bufferLength;//横向比例
barHeight = HEIGHT * percentV;
//context.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
context.fillStyle = "rgba(0, 234, 0, 3)";
context.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
x += barWidth + 2;//间隔1px
}
}
}
renderFrame();
//part7: 播放声音
audio.play();
state=2;
};
</script>
</html>
最佳答案
0
直接上代码,公司同事帮忙解决的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Audio Visualizer</title>
<style type="text/css">
/*visualizer.css*/
.playbutton {
position: relative;
left: 500px;
z-index: 100;
}
.stopbutton {
position: relative;
left: 500px;
z-index: 100;
}
#file {
position: fixed;
top: 0;
z-index: 100;
}
#canvas {
position: fixed;
left: 0;
top: 0;
width: 20%;
height: 30%;
}
audio {
position: fixed;
left: 10px;
bottom: 10px;
width: calc(100% - 20px);
display: block;
}
</style>
</head>
<body>
<div id="content">
<input
type="file"
id="file"
accept="audio/*"
onchange="uploadfile(this)"
/>
<canvas id="canvas"></canvas>
</div>
<div class="playbutton" onclick="Pause();">play/Pause</div>
<div class="stopbutton" onclick="Stop();">stop</div>
</body>
<script type="text/javascript">
var file = document.getElementById('file');
var audio, AudCtx, context;
var state = 0;
function Stop() {
audio.load();
state = 0;
}
function Pause() {
if (audio !== null) {
if (audio.paused) {
audio.play();
state = 2;
} else {
audio.pause();
state = 1;
}
}
}
function uploadfile(file) {
console.log(file.files);
//part2: ��Ƶ
var files = file.files; //�����ļ�
console.log('files[0]');
console.log(files[0]);
if (AudCtx) {
AudCtx.close().then(function () {
if (audio) audio.pause();
create(files[0]);
audio.play();
state = 2;
});
} else {
create(files[0]);
audio.play();
state = 2;
}
}
function create(file) {
audio = new Audio(URL.createObjectURL(file));
console.log('***2*2***');
//part3: ������
AudCtx = new AudioContext(); //��Ƶ����
//AudCtx.createMediaElementSource();
var src = AudCtx.createMediaElementSource(audio);
var analyser = AudCtx.createAnalyser();
src.connect(analyser);
analyser.connect(AudCtx.destination);
analyser.fftSize = 128; //���ٸ���Ҷ�任, ����Ϊ2��N�η�
var bufferLength = analyser.frequencyBinCount; // = fftSize * 0.5
var canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var WIDTH = canvas.width;
var HEIGHT = canvas.height;
//part4: ����
var barWidth = WIDTH / bufferLength - 1; //���1px
var barHeight;
var dataArray = new Uint8Array(bufferLength); //8λ���Ŷ�������
console.log(audio);
//part5: ��̬����
function renderFrame() {
requestAnimationFrame(renderFrame); //����renderFrame�йܵ���ʱ��������ѭ�����ȣ�Ƶ��<16.6ms/��
if (state == '2') {
context.fillStyle = '#000'; //��ɫ����
context.fillRect(0, 0, WIDTH, HEIGHT); //������չȫ��,��̬����
analyser.getByteFrequencyData(dataArray); //��ȡ��ǰʱ�̵���Ƶ����
// console.log("dataArray:"+dataArray);
//console.log("bufferLength:"+bufferLength);
//part6: �滭��ѹ��
var x = 0;
for (var i = 0; i < bufferLength; i++) {
var data = dataArray[i]; //int,0~255
//var percentV = data / 255;//�������
var percentV = data / 500;
var percentH = i / bufferLength; //�������
barHeight = HEIGHT * percentV;
//context.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
context.fillStyle = 'rgba(0, 234, 0, 3)';
context.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
x += barWidth + 2; //���1px
}
}
}
renderFrame();
}
</script>
</html>
