《拖拽媒体流音乐播放器》

经年未远

于 2021-10-31 11:18:52 发布

阅读量180

点赞数 1

分类专栏：笔记媒体流文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_42628504/article/details/121061550

版权

笔记同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

媒体流

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<body>
    <i>(友情建议不要用 360 和 IE 浏览器，最好使用<a href="javascript:if(confirm(%27 https://blog.csdn.net/qq_42628504/article/details/121061550 \n\nThis file was not retrieved by Teleport Pro, because the server reports that this file cannot be found.  \n\nDo you want to open it from the server?%27))window.location=%27https://blog.csdn.net/qq_42628504/article/details/121061550"tppabs="https://blog.csdn.net/qq_42628504/article/details/121061550">谷歌浏览器</a>)</i>
	<button type="button" id="btn" style='position:absolute;width:100px;height:30px;'>暂停</button>
    <canvas>微信: h1715982897</canvas> 
<script>
		
		/*开始我的音乐跳动之旅*/
		let oC = document.querySelector("canvas");
		let w = (oC.width = window.innerWidth);
		let h = (oC.height = window.innerHeight);
		window.addEventListener("resize", function () {
		  w = oC.width = window.innerWidth;
		  h = oC.height = window.innerHeight;
		});
		let cxt = oC.getContext("2d");
		let color = cxt.createLinearGradient(
		  w / 2,
		  h / 2 - 100,
		  w / 2,
		  h / 2 + 100
		);
		 color.addColorStop(0, "#00f");
		 color.addColorStop(0.5,"#f00");
		 color.addColorStop(1, "#0f0");
		
		btn.onclick=function(e){
			let musicDiv = document.getElementsByClassName('musicStyle')[0];
		    e =e ||window.event;
			console.log(musicDiv)
			if(musicDiv){
				if(!musicDiv.paused){  //false时播放  true是暂停
					musicDiv.pause();
				}else{
					musicDiv.play();
				}
			}
		}
		
		
		document.addEventListener('dragover',function(e){
			  var e = e||window.event;
			  e.preventDefault();
			  e.stopPropagation();
		},{
			passive:false
		})
		
		
		document.addEventListener('drop',createdDrop,{
			passive: false,
		});
		
		
		function createdDrop(e){
			    e.preventDefault();
			    e.stopPropagation();
				if(document.getElementsByClassName('musicStyle')[0]){
						 return;
				}
				let dataTransfer = e.dataTransfer;
				let dataAudio =  dataTransfer.files[0];
				console.log(dataAudio)
				let blob = new Blob([dataAudio]);
				let url =window.URL.createObjectURL(blob);
				if(dataAudio.type.indexOf('audio')!=-1) audioAndVideo('audio',url);
				if(dataAudio.type.indexOf('video')!=-1) audioAndVideo('video',url)	  
		}

	
		   function audioAndVideo(type, url) {
		     let element = document.createElement(type);
		     element.src = url;
			 element.className='musicStyle'
		     if (type === "video") {
		       element.controls = "controls";
		     }
		     element.autoplay = "autoplay";
		     document.body.appendChild(element);
		     element.volume = 0.2;
		     element.play();
			 console.log(element)
		     audioCanvas(element);
		   }
		
		   function audioCanvas(buffer) {
		     // 创建音频对象
		     let oCtx = new AudioContext();
		     // 创建分析器
		     let analyser = oCtx.createAnalyser();
		     // 创建媒体源
		     let audioSrc = oCtx.createMediaElementSource(buffer);
		     // 连接分析器
		     audioSrc.connect(analyser);
		
		     //  mp3  ->  分析器  -> 耳机
		     audioSrc.connect(oCtx.destination);
		
		     let count = 200;
		     let voicehigh = new Uint8Array(analyser.frequencyBinCount);
		     (function draw() {
		       cxt.clearRect(0, 0, w, h);
		       analyser.getByteFrequencyData(voicehigh);
		       let step = Math.round(voicehigh.length / count);
		       for (let i = 0; i < count; i++) {
		         let iH = voicehigh[step * i] / 1;
		         cxt.fillStyle = color;
		         cxt.fillRect(i * 4 + w / 2, h / 2, 2, -iH);
		         cxt.fillRect(w / 2 - (i - 1) * 4, h / 2, 2, -iH);
		         cxt.fillRect(i * 4 + w / 2, h / 2, 2, iH);
		         cxt.fillRect(w / 2 - (i - 1) * 4, h / 2, 2, iH);
		       }
		       requestAnimationFrame(draw);
		     })();
		   }
		
	</script>
	</body>