html背景模糊的音乐播放器,vue移动端仿音乐播放器
工作之余查了很多资料一步步摸索出来的,先感谢各位大佬。
仿QQ音乐做的,不是100%还原,不过基本原理都在这了,结合之前的歌词滚动组件一起使用
持续更新
效果图
专辑+歌词播放
纯歌词播放
页面布局拆分
总体分为
1顶部歌名+歌手的top-bar模块+模糊背景
2专辑+歌词滚动模块
3进度条+时间模块
4播放控件模块,播放,暂停,上一曲,下一曲。
需要注意音频初始化audioInit
mounted() {
const audio = document.getElementById("audio");
this.init();
this.audioInit();
this.swiper = new Swiper(this.activeClass, {
autoplay: false, //自动播放
loop: false, //循环播放
});
},
method: {
audioInit() {
let that = this;
// 音频或视频文件已经就绪可以开始
audio.addEventListener("canplay", () => {
console.log("canplay");
that.audioDuration = that.TimeToString(audio.duration);
let buffered = audio.buffered.end(0)
});
let progressL = this.$refs.track.offsetWidth; // 进度条总长
audio.addEventListener("timeupdate", () => {
// 当前播放时间
let compareTime = audio.currentTime;
let buffered = audio.buffered.end(0)
for (let i = 0; i < that.lyricInfo.length; i++) {
if (compareTime > parseInt(that.lyricInfo[i].time)) {
const index = that.lyricInfo[i].index;
if (i === parseInt(index)) {
that.lyricIndex = i; //获取当前播放歌曲的歌词index
}
}
}
that.currentTime = that.TimeToString(audio.currentTime);
that.audioPercent =
audio.currentTime / audio.duration.toFixed(3);
that.thumbTranslateX = that.audioPercent * 4;
});
audio.addEventListener("ended", () => {
that.playIndex =
that.playIndex + 1 >= that.songList.length
? 0
: that.playIndex + 1;
that.songInfo = that.songList[that.playIndex];
that.GetLyric(that.songInfo.id);
setTimeout(() => {
audio.play();
}, 100);
});
},
}
第一部分
需要定一个固定在页面的div,采用fixed布局
class="background-flitter"
:style="`background-image: url(${songInfo.cover})`"
>
{{ songInfo.name }}
{{ songInfo.artistsName }}
具体的歌曲信息如下
data: (){
return {
{
albumId: 93162249,
albumTitle: "STRAY SHEEP",
artistsName: "米津玄師",
cover:"https://p1.music.126.net/6mhlWCOOQkT0xDjjuCLW7g==/109951165181187586.jpg",
id: 1466598056,
index: 7,
name: "Lemon",
url:"https://music.163.com/song/media/outer/url?id=1466598056.mp3",
},
}
}
.main-page {
width: 100%;
height: 100vh;
position: relative;
background: rgba(15, 15, 15, 0.3);
.background-flitter {
position: fixed;
z-index: -2;
background-repeat: no-repeat;
width: 100%;
height: 100vh;
top: 0;
left: 0;
background-size: cover;
background-position: 50%;
filter: blur(0.16rem);
opacity: 0.7;
overflow: hidden;
box-sizing: border-box;
}
.top-bar {
width: 100%;
height: 1.2rem;
text-align: center;
color: #fff;
font-size: 0.32rem;
line-height: 0.6rem;
font-weight: 600;
}
}
至此完成整体背景和top-bar部分
第二部分,专辑+歌词滚动
左右滑动切换用到了swiper组件,专辑+歌词和纯歌词分别放在两个slide就可以了。
先固定一个歌词容器,与top-bar同级,具体代码可以参考歌词组件封装来看,都是复用的代码。
v-for="(item, index) in lyricInfo"
:key="index"
:style="{
color:
lyricIndex === index
? colorLight
: color,
}"
>
{{ item.lyric }}
ref="lyric"
:color="color"
:colorLight="colorLight"
:lineHeight="lineHeight"
:paddingTop="paddingTop"
:fontSize="fontSize"
:lyricIndex="lyricIndex"
:lyricsList="lyricInfo"
>
歌词滚动之前文章有讲过了,提一下这个唱片旋转的动画吧,给旋转部分添加ref="rotate"
.disc {
width: 5rem;
height: 5rem;
border-radius: 50%;
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.4);
animation: animations1 12s linear infinite forwards;
animation-play-state: paused;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
@keyframes animations1 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
在播放事件中添加
//播放与暂停
play() {
if (this.playing) {
// 播放中,点击则为暂停
this.playing = false;
this.$refs.rotate.style.animationPlayState = "paused";
audio.pause();
} else {
// 暂停中,点击则为播放
this.playing = true;
this.$refs.rotate.style.animationPlayState = "running";
audio.play();
}
},
到这完成了歌词滚动和切换
第三部分,进度条点击和拖拽控制播放进度(重点)
样式,时长比这些都讲烂了,讲讲点击和拖拽控制播放进度吧
拖拽功能:给拖拽按钮,也就是示例图的白色进度按钮添加三个事件
class="play-point"
@touchstart.stop.prevent="touchstart"
@touchmove.stop.prevent="touchmove"
@touchend.stop.prevent="touchend"
:style="{
transform: 'translateX(' + thumbTranslateX + 'rem)',
}"
>
//控制播放进度
SetProgress(t) {
audio.currentTime = audio.duration * t;
},
touchstart(event) {
let progressL = this.$refs.track.offsetWidth ; // 进度条总长
let allL = this.$refs.MainRef.offsetWidth ; // 页面总长
let half = (allL-progressL)/2
console.log("开始", progressL, allL, half)
//记录开始的X轴坐标
if (this.startXFirst) {
this.startX = half;
this.startXFirst = false;
}
},
touchmove(event) {
let moveX = parseInt(
(event.changedTouches[0].clientX - this.startX)
);
let progressL = this.$refs.track.offsetWidth; // 进度条总长
let percent = (moveX / progressL).toFixed(2); //拖动%比
if(percent>1){
percent = 1
}
this.audioPercent = percent; //音频播放%
this.thumbTranslateX = this.audioPercent * 4; //计算滑块位移
},
touchend(event) {
console.log("结束",event)
this.finalX = parseInt(
event.changedTouches[0].clientX - this.startX
);
let progressL = this.$refs.track.offsetWidth; // 进度条总长
let time = (this.finalX / progressL).toFixed(2);
if(time>1){
time = 1
}
this.SetProgress(time);
},
点击实现进度则简单多了,
class="progress"
@click="HandleProgressClick($event)"
ref="track"
>
class="progress_box"
:style="{ width: audioProgressPercent }"
>
class="play-point"
@touchstart.stop.prevent="touchstart"
@touchmove.stop.prevent="touchmove"
@touchend.stop.prevent="touchend"
:style="{
transform: 'translateX(' + thumbTranslateX + 'rem)',
}"
>
//点击进度条
HandleProgressClick(event) {
let progressL = this.$refs.track.offsetWidth; // 进度条总长
let clickX = event.offsetX;
let time = (clickX / progressL).toFixed(2);
this.SetProgress(time);
},
OK ,第三部分完成
第四部分
html背景模糊的音乐播放器,vue移动端仿音乐播放器相关推荐
- php++仿网页版微信,vue+web端仿微信网页版聊天室功能
一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室- ...
- vue+element高度仿照QQ音乐,完美实现PC端QQ音乐
一.前言 QQ音乐官网:点击访问 作者成品效果预览:点击访问 作者其他博客成品汇总预览:点击访问 暂时源码并没有提供其他获取渠道,私聊作者获取即可,或通过博客后面名片添加作者,很简单! 二.主要功能点 ...
- 多媒体web播放器,移动端h5 video播放器
由于项目需要用到h5的video标签,但是video标签在移动端会有一些坑,安卓和iOS的兼容性问题,不同浏览器间的表现差异,小问题还是挺多的.so,借用一款第三方的h5 video web播放器还是 ...
- android ios 实时视频播放,vue 移动端视频自动播放兼容ios,安卓
安卓初始化自动播放 首先创建一个jsmpeg.js文件,代码源文件放在百度网盘了,请自行下载 百度网盘下载地址 链接: https://pan.baidu.com/s/1bDvyrEAulMy8aYe ...
- 网易云,QQ音乐,Apple music 网页端下载音乐方法摸索
下载付费音乐必须是会员 一.网易云音乐 二 . QQ音乐 然后呢,跟网易云一样,只不过双击后不会弹出下载框,而是跳转到新的标签页 三 . Apple music 经过尝试之后,最终结论就是 不可能, ...
- 仿迅雷播放器教程 -- 基于VLC的MFC播放器 (6)
代码下载: http://download.csdn.net/detail/qq316293804/6409417 昨天的教程里写着预计MFC播放器会隔得久一点,但是今晚仔细看了下VLC的常用代码,发 ...
- 仿迅雷播放器教程 -- 总结(14)
代码下载:http://download.csdn.net/detail/u012248739/6502965 迅雷播放器教程汇总: 仿迅雷播放器教程 -- 基于ffmpeg的C++播放器 (1) 仿 ...
- Vue实现仿音乐播放器项目总述以及阶段目录
Github地址 https://github.com/badaoliumang/vuemusicplayer Vue实现仿音乐播放器各阶段代码 https://download.csdn.net/d ...
- Vue实现仿音乐播放器6-实现新歌速递与swiper轮播图切换
前言 前面在首页已经完成今日推荐以及访问百度API获取数据,现在继续来完善home主页. 效果 新歌速递 swiper实现轮播图 实现 实现新歌速递 在components下新建新歌速递组件News_ ...
最新文章
- STM32CubeMX HAL库串口+DMA数据发送不定长度数据接收
- centos .php 源码,CentOS 源码安装PHP
- vsftpd服务与客户机的传输和下载
- Sklearn参数详解—GBDT
- python达梦数据库_python 操作达 梦数据库
- 做个程序员身体调查,希望大家点一下!
- java 链表算法_数据结构算法Java版(一) 链表
- Linux中常用命令(文件)
- 马尔可夫随机场 MRF
- 福利:阿里巴巴Java开发手册(第2版)
- oracle的日期时间转换日期,oracle 的时间日期转换函数
- Graphics2D画图
- website for all kinds of courses
- PLDA宣布XpressLINK-SOC™ CXL控制器IP支持AMBA CXS Issue B协议
- Oracle中创建用户和授权
- 磁盘管理找不到新加硬盘,借助DG(DiskGenius)实现新加硬盘初始化分区和之前硬盘的数据迁移
- 苹果进入品牌价值衰减期
- php人物走动,pygame制作游戏人物精灵的行走及二段跳实现方法
- Witt向量简介 §3.2.2:Witt环运算封闭性验证
- 为什么很少人用redmine_为什么中文不能用来编程呢?其实还有这些原因!看完长见识了...