快捷導(dǎo)航

JS中video標(biāo)簽自動播放音視頻并繪制波形圖效果

更新時間：2023年09月08日 14:19:37 作者：碼農(nóng)飛飛

html中的<video>標(biāo)簽可以用來播放常見的音視頻格式，支持的格式包括:MP3、Ogg、WAV、AAC、MP4、WebM、AVI等，當(dāng)然支持的格式也和瀏覽器和操作系統(tǒng)有關(guān)，這篇文章主要介紹了video標(biāo)簽自動播放音視頻并繪制波形圖,需要的朋友可以參考下

html中的<video>標(biāo)簽可以用來播放常見的音視頻格式，支持的格式包括:MP3、Ogg、WAV、AAC、MP4、WebM、AVI等，當(dāng)然支持的格式也和瀏覽器和操作系統(tǒng)有關(guān)。這里以一個可以自動播放音視頻并繪制波形圖的頁面為例說明一下<video>標(biāo)簽的用法。

video標(biāo)簽想自動播放，需要設(shè)置三個可選屬性分別是muted、autoplay、controls，muted負(fù)責(zé)讓音視頻播放靜音，autoplay讓音視頻自動播放，controls屬性負(fù)責(zé)顯示對應(yīng)的控制菜單。除了通過html頁面設(shè)置標(biāo)簽屬性之外我們還可以通過js腳本來設(shè)置對應(yīng)的屬性，設(shè)置方法如下所示:

<!DOCTYPE html>
<html>
<head>
  <title>播放音視頻</title>
  <meta charset="UTF-8">
</head>
<body>
  <video id="myVideo" autoplay muted controls>
    <source src="./mysong.mp3" type="audio/mpeg">
    <!--source src="video.mp4" type="video/mp4"-->
    Your browser does not support the video tag.
  </video>
  <script>
	var videoElement = document.getElementById('myVideo');
	// 自動靜音播放
	videoElement.muted = true; 
	videoElement.autoplay = true;
	videoElement.controls = true;
  </script>
</body>
</html>

瀏覽器為了防止頁面自動播放音頻干擾用戶，不允許在用戶沒有進(jìn)行交互操作的時候，網(wǎng)頁自動以非靜音的模式播放音視頻。所以autoplay屬性必須搭配muted屬性一塊使用。如果想要繪制音視頻播放過程中的音頻波形圖，我們需要攔截對應(yīng)的音頻上下文，分析繪制對應(yīng)的音頻數(shù)據(jù)。對應(yīng)的實(shí)現(xiàn)如下所示:

<!DOCTYPE html>
<html>
<head>
  <title>繪制音頻波形圖</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>繪制音頻波形圖</h1>
  <video id="myVideo" controls>
    <source src="./mysong.mp3" type="audio/mpeg">
    Your browser does not support the video tag.
  </video>
  <canvas id="waveformCanvas"></canvas>
<script>
  // 獲取video元素和canvas元素
  let video,analyser,ctx,canvas,audioContext,timerID,analyserNode;
  video = document.getElementById('myVideo');
  //播放的時候調(diào)用初始化操作
  video.addEventListener("play",initWaveDraw);
  //獲取畫布元素
  canvas = document.getElementById('waveformCanvas');
  ctx = canvas.getContext('2d');
  function initWaveDraw(){
	  // 創(chuàng)建音頻上下文
	  if(!audioContext)
	  {
		  audioContext = new(window.AudioContext || window.webkitAudioContext)();
		  analyser = audioContext.createAnalyser();
		  analyser.connect(audioContext.destination);
		  analyserNode = audioContext.createMediaElementSource(video);
		  analyserNode.connect(analyser);
		  timerID = setInterval(drawWaveform,200); 
	  }
  }
  // 繪制波形圖
  function drawWaveform() {
    // 獲取波形數(shù)據(jù)
    var bufferLength = analyser.fftSize;
	console.log("drawing wave");
    var dataArray = new Uint8Array(bufferLength);
    analyser.getByteTimeDomainData(dataArray);
    // 清空畫布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 繪制波形圖
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'rgb(0, 255, 255)';
    ctx.beginPath();
    var sliceWidth = canvas.width * 1.0 / bufferLength;
    var x = 0;
    for (var i = 0; i < bufferLength; i++) {
      var v = dataArray[i] / 128.0;
      var y = v * canvas.height / 2;
      if (i === 0) {
        ctx.moveTo(x, y);
      } else {
        ctx.lineTo(x, y);
      }
      x += sliceWidth;
    }
    ctx.lineTo(canvas.width, canvas.height / 2);
    ctx.stroke();
  }
</script>	
</body>
</html>

顯示效果如下圖所示:

在這里插入圖片描述

如果想讓播放器自動播放音頻并放音，我們可以采用一些迂回策略，首先讓播放器自動靜音播放，然后設(shè)置一個定時器檢測用戶是否和頁面發(fā)生了操作交互，如果產(chǎn)生了交互就播放音頻并繪制波形圖。(瀏覽器默認(rèn)沒有交互的時候不允許播放聲音) 對應(yīng)的實(shí)現(xiàn)如下所示:

<!DOCTYPE html>
<html>
<head>
  <title>繪制音頻波形圖</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>繪制音頻波形圖</h1>
  <video id="myVideo" controls>
    <source src="./mysong.mp3" type="audio/mpeg">
    Your browser does not support the video tag.
  </video>
  <canvas id="waveformCanvas"></canvas>
<script>
  // 獲取video元素和canvas元素
  let video,analyser,ctx,canvas,audioContext,timerID, checktimerID, analyserNode;
  var hasUserInteracted = false;
  video = document.getElementById('myVideo');
  //獲取畫布元素
  canvas = document.getElementById('waveformCanvas');
  ctx = canvas.getContext('2d');
  video.muted = true; 
  video.autoplay = true;
  video.controls = true;
  // 監(jiān)聽鍵盤按下事件
  function handleUserInteraction(){
    console.log("user has interacted");
	hasUserInteracted = true;
  }
  document.addEventListener('click', handleUserInteraction);
  checktimerID = setInterval(checkMouseClick, 1000);
  setTimeout(function(){ video.addEventListener("volumechange",handleUserInteraction);},2000);
  //定時檢測鼠標(biāo)事件,開啟帶聲音的播放
	function checkMouseClick(){
		if(hasUserInteracted)
		{			
		   initWaveDraw();
		   video.muted = false; 
		   video.play();				
		   clearInterval(checktimerID);
		}
	}
  function initWaveDraw(){
	  // 創(chuàng)建音頻上下文
	  if(!audioContext)
	  {
		  audioContext = new(window.AudioContext || window.webkitAudioContext)();
		  analyser = audioContext.createAnalyser();
		  analyser.connect(audioContext.destination);
		  analyserNode = audioContext.createMediaElementSource(video);
		  analyserNode.connect(analyser);
		  timerID = setInterval(drawWaveform,200); 
	  }
  }
  // 繪制波形圖
  function drawWaveform() {
    // 獲取波形數(shù)據(jù)
    var bufferLength = analyser.fftSize;
	console.log("drawing wave");
    var dataArray = new Uint8Array(bufferLength);
    analyser.getByteTimeDomainData(dataArray);
    // 清空畫布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 繪制波形圖
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'rgb(0, 255, 255)';
    ctx.beginPath();
    var sliceWidth = canvas.width * 1.0 / bufferLength;
    var x = 0;
    for (var i = 0; i < bufferLength; i++) {
      var v = dataArray[i] / 128.0;
      var y = v * canvas.height / 2;
      if (i === 0) {
        ctx.moveTo(x, y);
      } else {
        ctx.lineTo(x, y);
      }
      x += sliceWidth;
    }
    ctx.lineTo(canvas.width, canvas.height / 2);
    ctx.stroke();
  }
</script>	
</body>
</html>

到此這篇關(guān)于JS中video標(biāo)簽自動播放音視頻并繪制波形圖的文章就介紹到這了,更多相關(guān)video標(biāo)簽自動播放音視頻內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: