audio canvas 绘制音频图失败

中天 • • 问答 • 1341 阅读

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>

回答

直接上代码,公司同事帮忙解决的

<!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>

以上是audio canvas 绘制音频图失败的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>