audio canvas 绘制音频图失败

2021-01-14 19:07发布

站内问答 / 前端开发
1808 1 4

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>

标签：
举报
1条回答
叛逆
2楼-- · 2021-01-14 19:29

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

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)