The <video> tag in HTML can be used to play common audio and video formats. Supported formats include: MP3, Ogg, WAV, AAC, MP4, WebM, AVI, etc. Of course, the supported formats are also related to the browser and operating system. Here we take a page that can automatically play audio and video and draw waveforms as an example to illustrate the usage of the <video> tag.
If you want the video tag to play automatically, you need to set three optional attributes: muted, autoplay, and controls. Muted is responsible for muting the audio and video playback, autoplay allows the audio and video to play automatically, and the controls attribute is responsible for displaying the corresponding control menu. In addition to setting tag attributes through html pages, we can also set corresponding attributes through js scripts. The setting method is as follows:
<!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>
In order to prevent the page from automatically playing audio and disturbing the user, the browser does not allow the page to automatically play audio and video in non-muted mode when the user does not interact. Therefore, the autoplay attribute must be used together with the muted attribute.
If we want to draw audio waveforms during audio and video playback, we need to intercept the corresponding audio context, analyze and draw the corresponding audio data. The corresponding implementation is as follows:
<!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>
The display effect is as shown below:
If we want the player to automatically play audio and play the sound, we can use some roundabout strategies. First, let the player automatically mute the playback, and then set a timer to detect whether the user interacts with the page. If interaction occurs, play the audio and Draw a waveform graph. (By default, the browser does not allow sound to be played when there is no interaction) The corresponding implementation is as follows:
<!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>