JS中video标签自动播放音视频并绘制波形图效果
更新时间：2023年09月08日 14:19:37 作者：码农飞飞
html中的<video>标签可以用来播放常见的音视频格式，支持的格式包括:MP3、Ogg、WAV、AAC、MP4、WebM、AVI等，当然支持的格式也和浏览器和操作系统有关，这篇文章主要介绍了video标签自动播放音视频并绘制波形图,需要的朋友可以参考下
html中的<video>标签可以用来播放常见的音视频格式，支持的格式包括:MP3、Ogg、WAV、AAC、MP4、WebM、AVI等，当然支持的格式也和浏览器和操作系统有关。这里以一个可以自动播放音视频并绘制波形图的页面为例说明一下<video>标签的用法。
video标签想自动播放，需要设置三个可选属性分别是muted、autoplay、controls，muted负责让音视频播放静音，autoplay让音视频自动播放，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>浏览器为了防止页面自动播放音频干扰用户，不允许在用户没有进行交互操作的时候，网页自动以非静音的模式播放音视频。所以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>到此这篇关于JS中video标签自动播放音视频并绘制波形图的文章就介绍到这了,更多相关video标签自动播放音视频内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
目前随着元宇宙概念的爆火，THREE技术已经深入到了物联网、VR、游戏、数据可视化等多个平台，今天我们主要基于THREE实现一个三维的VR看房小项目，感兴趣的朋友跟随小编一起看看吧2022-10-10
什么是闭包呢？闭包就是函数实例执行过程中动态产生一个没有被释放资源的栈区，也是一个预执行的过程。2011-01-01
这篇文章主要介绍了JS实现的Unicode编码转换操作,结合完整实例形式分析了javascript实现Unicode编码转换的具体操作技巧,需要的朋友可以参考下2017-04-04
使用js获取文件的后缀，有个不错的正则，大家可以借用下，具体如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-07
TypeScript是一种由微软开发的开源、跨平台的编程语言。这篇文章主要介绍了TypeScript的安装、使用、自动编译的实现方法,需要的朋友可以参考下2020-04-04
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
这篇文章主要介绍了js 获取 本周、上周、本月、上月、本季度、上季度的开始结束日期,需要的朋友可以参考下2020-02-02
这篇文章主要为大家详细介绍了bootstrapValidator自定验证方法写法，研究bootstrapValidator验证,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要为大家详细介绍了小程序animate动画实现直播间点赞，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要为大家介绍了JavaScript之instanceof方法手写示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
下面小编就为大家带来一篇js 声明数组和向数组中添加对象变量的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
最新评论