web audio API实现可视化音乐盒

最新推荐文章于 2025-09-25 02:39:13 发布

原创

最新推荐文章于 2025-09-25 02:39:13 发布 · 994 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #html #css #前端

最近给个人博客做了个音乐盒功能，能实现暂停，切换歌曲，拖拽时间，音频可视化的功能，效果：在个人博客界面右上角可以看到旋转的音乐图标，hover后可展示音乐盒。因为项目中用了vuecli框架，音乐盒以vue组件的形式编写，图标用到了阿里图标库，如果你想直接使用该组件需要替换下图标，css变量。
在这里插入图片描述

1 旋转音标

通过animation重复动画实现，不是很难，值得注意的是rotate对inline标签不起作用，需要转化成block或者inline-block，直接上代码：

.musicBox .icon-music{
   
   
/* rotate对inline元素不起作用，转化成block */
	display: block;
	font-size: 1.8em;
	color: var(--green1);
	cursor: pointer;
	animation: musicRotate 5s linear infinite;
}
@keyframes musicRotate{
   
   
	from{
   
   
		transform: rotate(0);
	}
	to{
   
   
		transform: rotate(360deg);
	}
}

2 拖拽条设置

一个input做拖动条，一个div标签做填充。

<div class="progress"></div>
<input
	type="range" 
	class="range" 
	:value='audio.value' 
	min="0" max="1" step="0.001" 
	@mousedown="setTime=true" 
	@touchstart="setTime=true"
	@input="dragTime"
	@change="changeTime"
>

js部分包含了audio API部分，可以先跳过看css，看完音频可视化再来看这部分js，拖拽过程实时更新进度条跟时间，但是不更新播放的音乐，当松手（input的值改变）时计算出时间然后跳转到指定时间音乐，audioCtx跟source属于Audio API。

dragTime(e){
   
   
	const value = e.target.value
	// 更新当前时间
	const minutes = parseInt(value * source.buffer.duration / 60, 10)
	const seconds = parseInt(value * source.buffer.duration % 60)
	this.audio.currentMinutes = minutes
	this.audio.currentSeconds = seconds
	if(minutes < 10)
		this.audio.currentMinutes = '0' + minutes
	if(seconds < 10)
		this.audio.currentSeconds = '0' + seconds
	this.audio.value = value
	document.querySelector('.progress').style.width = this.audio.value*</