vue2实现自定义音乐播放器
发布时间：2024年01月04日
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.self_progress {
background-image: linear-gradient(to right, #00d09b, #00dfc4);
transition: all 0.3s;
}
.lyrics {
overflow-y: scroll;
text-align: center;
line-height: 25px;
font-size: 14px;
}
::-webkit-scrollbar {
display: none;
}
.text {
position: relative;
white-space: nowrap;
overflow: hidden;
width: 100%;
color: transparent;
background: linear-gradient(to right, #00dfc4, #0098a6);
background-clip: text;
animation: fill-lyrics linear forwards;
}
@keyframes fill-lyrics {
0% {
background-size: 0 100%;
}
100% {
background-size: 100% 100%;
}
}
</style>
</head>
<body>
<div id="app" class="h-100vh w-100vw grid place-items-center">
<div class="shadow h-80px w-800px py-10px flex flex-col px-15px">
<audio
@timeupdate="change('updateProgress')"
ref="audioPlayer"
:src="musicSrc"
></audio>
<div class="flex items-center h-50px">
<img
src="https://image.qwq.link/images/2023/12/15/twitter_1-19agabiran__20231203-112256_1731272804455375216_photo.jpg"
alt=""
class="object-cover h-full w-50px rounded-3px"
/>
<div class="flex-1 h-full lyrics">
<div
ref="lyrics"
:class="{'text' : item.words == currentIndex}"
v-for="item in lyrics"
:key="item.time"
:style="{ animationDuration: 1 + 's' }"
>
{{item.words}}
</div>
</div>
<img
@click="change('status')"
class="cursor-pointer ml-auto"
:src="isStart ? './stop.svg' : './start.svg'"
alt=""
/>
</div>
<div class="mt-auto">
<div
class="w-full h-3px bg-#efefef rounded-full"
@click="change('settingPosition',$event)"
>
<div
class="self_progress h-full"
:style="{width: progress + '%'}"
></div>
</div>
</div>
</div>
</div>
<script src="./vue/unocss.js"></script>
<script src="./vue/vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
musicSrc: './我怎么能猜透你-承桓.mp3',
progress: 0,
isStart: false,
currentIndex: '',
lyrics: [],
};
},
methods: {
change(type, event) {
const Fn = {
play: () => {
this.$refs.audioPlayer.play();
},
pause: () => {
this.$refs.audioPlayer.pause();
},
status: () => {
this.isStart = !this.isStart;
if (this.isStart) this.change('play');
else this.change('pause');
},
updateProgress: () => {
const audio = this.$refs.audioPlayer;
const progress = (audio.currentTime / audio.duration) * 100;
this.progress = progress.toFixed(2);
for (var i = 0; i < this.lyrics.length; i++) {
if (audio.currentTime < this.lyrics[i].time) {
this.currentIndex = this.lyrics[i - 1].words;
let dom = this.$refs.lyrics[i];
dom.scrollIntoView({
behavior: 'smooth',
block: 'end',
inline: 'end',
});
return i - 1;
} else {
this.currentIndex = this.lyrics[i].words;
}
}
},
settingPosition: () => {
const progressBar = event.target;
const rect = progressBar.getBoundingClientRect();
const position = (event.clientX - rect.left) / rect.width;
const audio = this.$refs.audioPlayer;
audio.currentTime = position * audio.duration;
},
};
Fn[type]();
},
formatTime(time) {
var parts = time.split(':'); //[03:00.000]==>[03,00.00]
return Number(parts[0] * 60) + Number(parts[1]);
},
},
created() {
this.lyrics = [
{
time: '00:00.0',
words: '我怎么能猜透你-承桓',
},
{
time: '00:00.07',
words: '词：小兔',
},
{
time: '00:00.15',
words: '曲：李云宵',
},
{
time: '00:00.23',
words: '编曲：楠哈哈',
},
{
time: '00:00.31',
words: '制作人：一寸光年团队',
},
{
time: '00:00.39',
words: '混音：张鸣利/承桓',
},
{
time: '00:00.46',
words: '和声：承桓',
},
{
time: '00:00.54',
words: '企划：葵Aria',
},
{
time: '00:00.62',
words: '制作公司&OP：一寸光年',
},
{
time: '00:00.7',
words: '【未经著作权人许可不得翻唱翻录或使用】',
},
{
time: '00:00.78',
words: '我咋能猜透你嘞',
},
{
time: '00:03.21',
words: '你又不是真心嘞',
},
{
time: '00:05.07',
words: '早知道后劲那么冲',
},
{
time: '00:06.96',
words: '还不如做朋友',
},
{
time: '00:08.76',
words: '我咋能赢老你嘞',
},
{
time: '00:10.68',
words: '是我先认真哩',
},
{
time: '00:12.6',
words: '为什么走着走着',
},
{
time: '00:14.94',
words: '只剩影子和我',
},
{
time: '00:18.15',
words: '遇见你跟他一起走',
},
{
time: '00:20.19',
words: '希望你说他是朋友',
},
{
time: '00:22.14',
words: '结果缺我都懒得缺',
},
{
time: '00:24.0',
words: '说句分手就走',
},
{
time: '00:25.68',
words: '那你说嫩老些漂亮话',
},
{
time: '00:27.54',
words: '说想跟我有以后',
},
{
time: '00:29.34',
words: '想开我就难受',
},
{
time: '00:31.05',
words: '不爱我你说这咋了某',
},
{
time: '00:33.09',
words: '我把我真心给老你',
},
{
time: '00:35.01',
words: '你让我栽跟头',
},
{
time: '00:36.93',
words: '不舍了说你了坏话',
},
{
time: '00:38.85',
words: '只能用酒浇愁',
},
{
time: '00:40.68',
words: '你往我心里钉钉子',
},
{
time: '00:42.51',
words: '凿我的心里直疼',
},
{
time: '00:44.4',
words: '就不争气 就还想着你',
},
{
time: '00:47.61',
words: '我咋能猜透你嘞',
},
{
time: '00:49.8',
words: '你又不是真心嘞',
},
{
time: '00:51.87',
words: '早知道后劲那么冲',
},
{
time: '00:53.85',
words: '还不如做朋友',
},
{
time: '00:55.65',
words: '我咋能赢老你嘞',
},
{
time: '00:57.51',
words: '是我先认真哩',
},
{
time: '00:59.43',
words: '为什么走着走着',
},
{
time: '01:01.71',
words: '只剩影子和我',
},
{
time: '01:06.39',
words: '主动了太久太累了',
},
{
time: '01:08.79',
words: '在乎久了会崩溃',
},
{
time: '01:10.68',
words: '你走的那天流眼泪',
},
{
time: '01:12.54',
words: '从鼻子流到嘴里头',
},
{
time: '01:14.61',
words: '你是真有手段',
},
{
time: '01:16.26',
words: '随意拿爱去摆置俺',
},
{
time: '01:18.39',
words: '俺还傻了不清',
},
{
time: '01:19.74',
words: '想为你挡下每颗子弹',
},
{
time: '01:21.99',
words: '你让我难过的事儿',
},
{
time: '01:23.79',
words: '我放在心里嚼',
},
{
time: '01:25.8',
words: '嚼到烂嚼到透',
},
{
time: '01:27.57',
words: '嚼到第二天清早切',
},
{
time: '01:29.61',
words: '既然没想跟我走到底',
},
{
time: '01:31.770004',
words: '嫩为啥要骗我',
},
{
time: '01:33.42',
words: '让我对你付出嫩老些',
},
{
time: '01:36.42',
words: '我咋能猜透你嘞',
},
{
time: '01:38.79',
words: '你又不是真心嘞',
},
{
time: '01:40.65',
words: '早知道后劲那么冲',
},
{
time: '01:42.6',
words: '还不如做朋友',
},
{
time: '01:44.4',
words: '我咋能赢老你嘞',
},
{
time: '01:46.380005',
words: '是我先认真哩',
},
{
time: '01:48.15',
words: '为什么走着走着',
},
{
time: '01:50.490005',
words: '只剩影子和我',
},
{
time: '02:06.51',
words: '我咋能猜透你嘞',
},
{
time: '02:08.76',
words: '你又不是真心嘞',
},
{
time: '02:10.65',
words: '早知道后劲那么冲',
},
{
time: '02:12.57',
words: '还不如做朋友',
},
{
time: '02:14.37',
words: '我咋能赢老你嘞',
},
{
time: '02:16.26',
words: '是我先认真哩',
},
{
time: '02:18.15',
words: '为什么走着走着',
},
{
time: '02:20.45999',
words: '只剩影子和我',
},
];
this.lyrics = this.lyrics.map((e) => {
return {
time: this.formatTime(e.time),
words: e.words,
};
});
},
});
</script>
</body>
</html>
文章来源:https://blog.csdn.net/weixin_65084919/article/details/135378032
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！
最新文章
- Python教程
- 深入理解 MySQL 中的 HAVING 关键字和聚合函数
- Qt之QChar编码（1）
- MyBatis入门基础篇
- 用Python脚本实现FFmpeg批量转换
- Midijourney制作表情包及赚钱攻略
- IntelliJ IDE 插件开发 | （三）消息通知与事件监听
- 01.13
- 2核2G3M轻量应用服务器腾讯云性能测评，限制流量！
- 支付宝推出新年“五福节”活动，新增四大AI玩法；大型语言模型综合指南
- Java中的异常
- 单元测试报Command line is too long. Shorten command line for XXXXX.XXX
- Angular系列教程之变更检测与性能优化
- 单向不带头链表的使用
- 嵌入式软件工程师面试题——2025校招社招通用(计算机网络篇)（二十九）