HTML の <video> タグは、一般的なオーディオおよびビデオ形式の再生に使用できます。サポートされる形式には、MP3、Ogg、WAV、AAC、MP4、WebM、AVI などが含まれます。もちろん、サポートされる形式は、ブラウザとオペレーティング システム。ここでは、オーディオとビデオを自動的に再生し、波形を描画できるページを例として、<video> タグの使用方法を説明します。
video タグが自動的に再生されるようにする場合は、ミュート、自動再生、およびコントロールの 3 つのオプション属性を設定する必要があります。ミュートはオーディオとビデオのミュート再生に使用され、自動再生はオーディオとビデオの自動再生に使用され、controls 属性はミュートされたオーディオとビデオの再生に使用されます。対応するコントロールメニューを表示します。タグの属性はHTMLページから設定するほかに、JSスクリプトからも対応する属性を設定することができます。設定方法は以下のとおりです。
<!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>
Web ページがオーディオを自動的に再生してユーザーの邪魔をしないようにするため、ブラウザでは、ユーザーが対話型操作を実行していないときに Web ページが非ミュート モードでオーディオとビデオを自動的に再生することは許可されません。したがって、autoplay 属性は muted 属性と一緒に使用する必要があります。
オーディオおよびビデオの再生中にオーディオ波形を描画したい場合は、対応するオーディオ コンテキストをインターセプトし、対応するオーディオ データを分析して描画する必要があります。対応する実装は次のとおりです。
<!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');
//播放的时候调用初始化操作
video.addEventListener("play",initWaveDraw);
//获取画布元素
canvas = document.getElementById('waveformCanvas');
ctx = canvas.getContext('2d');
function initWaveDraw(){
// 创建音频上下文
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() {
// 获取波形数据
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>
表示効果を次の図に示します。
プレーヤーにオーディオとサウンドを自動的に再生させたい場合は、いくつかの回りくどい戦略を採用できます。まず、プレーヤーに再生を自動的にミュートさせ、次にユーザーがページを操作したかどうかを検出するタイマーを設定します。はインタラクションです。オーディオが再生され、波形グラフが描画されます。(デフォルトでは、ブラウザーはインタラクションがない場合にサウンドを再生することを許可しません) 対応する実装は次のとおりです。
<!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;
// 监听键盘按下事件
function handleUserInteraction(){
console.log("user has interacted");
hasUserInteracted = true;
}
document.addEventListener('click', handleUserInteraction);
checktimerID = setInterval(checkMouseClick, 1000);
setTimeout(function(){
video.addEventListener("volumechange",handleUserInteraction);},2000);
//定时检测鼠标事件,开启带声音的播放
function checkMouseClick(){
if(hasUserInteracted)
{
initWaveDraw();
video.muted = false;
video.play();
clearInterval(checktimerID);
}
}
function initWaveDraw(){
// 创建音频上下文
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() {
// 获取波形数据
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>