使用vue.js制作一个音乐播放器

时间: 2023-11-23 20:05:46 浏览: 20
好的,下面是一个简单的 Vue.js 音乐播放器的代码示例: HTML模板: ```html <div id="app"> <!-- 音乐列表 --> <ul> <li v-for="(item, index) in musicList" :key="index" @click="playMusic(index)"> {{ item.name }} </li> </ul> <!-- 播放器组件 --> <van-sticky> <van-row> <van-col span="6"> <img :src="currentMusic.cover" alt="" /> </van-col> <van-col span="18"> <h2>{{ currentMusic.name }}</h2> <p>{{ currentMusic.singer }}</p> <van-progress :percentage="playProgress" /> <van-row> <van-col span="4"> <van-icon :name="isPlay ? 'pause' : 'play'" @click="togglePlay" /> </van-col> <van-col span="4"> <van-icon name="skip-previous" @click="prevMusic" /> </van-col> <van-col span="4"> <van-icon name="skip-next" @click="nextMusic" /> </van-col> </van-row> </van-col> </van-row> </van-sticky> <!-- 音乐播放器 --> <audio ref="audio" :src="currentMusic.url" @play="onPlay" @pause="onPause" @timeupdate="onTimeUpdate" /> </div> ``` CSS样式: ```css /* 引入vant组件库的样式 */ @import url("https://cdn.jsdelivr.net/npm/vant/lib/index.css"); /* 自定义样式 */ ul { list-style: none; margin: 0; padding: 0; li { padding: 10px; cursor: pointer; &:hover { background-color: #eee; } } } img { width: 100%; } h2 { font-size: 14px; margin: 0; } p { font-size: 12px; margin: 0; } /* 定义sticky组件的位置 */ .van-sticky { top: 0; width: 100%; z-index: 99; .van-row { background-color: #fff; .van-col { padding: 10px; } } } ``` Vue.js代码: ```javascript new Vue({ el: "#app", data: { musicList: [ { name: "歌曲1", singer: "歌手1", cover: "http://xxx.jpg", url: "http://xxx.mp3" }, { name: "歌曲2", singer: "歌手2", cover: "http://xxx.jpg", url: "http://xxx.mp3" }, { name: "歌曲3", singer: "歌手3", cover: "http://xxx.jpg", url: "http://xxx.mp3" } ], currentMusic: {}, isPlay: false, playProgress: 0 }, methods: { playMusic(index) { // 播放音乐 this.currentMusic = this.musicList[index]; this.isPlay = true; this.$refs.audio.play(); }, togglePlay() { // 切换播放状态 if (this.isPlay) { this.$refs.audio.pause(); } else { this.$refs.audio.play(); } this.isPlay = !this.isPlay; }, prevMusic() { // 上一曲 let index = this.musicList.indexOf(this.currentMusic); if (index === 0) { index = this.musicList.length - 1; } else { index--; } this.playMusic(index); }, nextMusic() { // 下一曲 let index = this.musicList.indexOf(this.currentMusic); if (index === this.musicList.length - 1) { index = 0; } else { index++; } this.playMusic(index); }, onPlay() { // 音乐开始播放 }, onPause() { // 音乐暂停 }, onTimeUpdate() { // 更新播放进度 let currentTime = this.$refs.audio.currentTime; let duration = this.$refs.audio.duration; this.playProgress = (currentTime / duration) * 100; } } }); ``` 这个示例中使用了 Vant 组件库中的 Sticky、Row、Col、Icon 和 Progress 组件,以及 HTML5 的 audio 标签来实现音乐播放器的功能。你可以根据自己的需要进行修改和扩展。

相关推荐

最新推荐

Vue.js实现文章评论和回复评论功能

主要为大家详细介绍了Vue.js实现文章评论和回复评论功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)

本文主要介绍了利用Vue.js+Node.js+MongoDB实现一个博客系统,这个博客使用Vue做前端框架,Node+express做后端,数据库使用的是MongoDB。实现了用户注册、用户登录、博客管理、文章编辑、标签分类等功能,需要的朋友...

详解django模板与vue.js冲突问题

在本文里小编给各位整理了关于django模板与vue.js冲突问题以及实例代码,需要的朋友们参考下。

vue中使用vue-print.js实现多页打印

由于打印插件存在问题,如果打印文件超出一页,只显示一页,所以我们需要修改print.js源文件,所以只能手动下载vue-print.js到本地,做一些修改,然后引入到项目中,不能使用npm安装 下载 print.js ...

vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法

目前大多数PC浏览器支持在线预览pdf文件,但大多数手机浏览器还未支持,尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框。网上查了一些资料,在实现的过程中,还是走了比较多的弯路,最后采用了备受推荐的...

同步原理PPT学习教案.pptx

同步原理PPT学习教案.pptx文件是关于同步原理的学习教案,主要讨论了载波同步、位同步、群同步以及网络同步等内容。在数字通信系统中,确保接收端能够准确、可靠地接收发送端传输的信息是至关重要的。因此,了解和掌握同步原理对于数字通信工程师和学生来说非常重要。 载波同步是指在相干解调时,接收端需要获取一个与发送端同频同相的相干载波。这个载波的获取称为载波提取或载波同步。在数字通信系统中,保证接收端能够准确地同步发送端的载波是十分关键的。位同步又称码元同步,为了得到抽样周期,保证相位一致。在数字通信系统中,接收端需要知道每个码元的起止时刻,以便在恰当的时刻进行取样判决。群同步有时也称帧同步,包含字同步、句同步、分路同步。在数字通信中,信息流是用若干码元组成一个“字”,又用若干个“字”组成“句”。在接收这些数字信息时,必须知道这些“字”、“句”的起止时刻,否则接收端无法正确恢复信息。这些同步原理的掌握和应用对数字通信的准确性和可靠性至关重要。 在获得了以上讨论的载波同步、位同步、群同步之后,两点间的数字通信就可以有序、准确、可靠地进行了。然而,随着数字通信的发展,尤其是计算机通信的发展,多个用户之间的通信已经不再局限于点对点的通信,而是扩展到多网之间的通信。因此,网络同步也成为了一个关键的同步原理。网络同步是指在跨越多个网络的情况下,保证数据传输的时间同步。这对于多用户之间的数据交互来说非常重要,因为如果数据传输的时间不同步,就会导致数据的混乱和错误。因此,了解和掌握网络同步原理对于现代数字通信系统的设计和应用也是十分重要的。 综上所述,同步原理PPT学习教案.pptx文件详细介绍了载波同步、位同步、群同步和网络同步的概念和原理。这些同步原理对于数字通信工程师和学生来说都是十分重要的基础知识。对于数字通信系统的设计和应用来说,掌握这些同步原理可以有效地提高系统的准确性和可靠性。因此,建议有关人员认真学习和掌握这些同步原理,以提高其在数字通信领域的专业能力和素质。

管理建模和仿真的文件

管理Boualem Benatallah引用此版本:布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学,1996年。法语。NNT:电话:00345357HAL ID:电话:00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆,用于存放和传播科学研究论文,无论它们是否被公开。论文可以来自法国或国外的教学和研究机构,也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire

Vue.js SSR服务端渲染实践经验分享

# 1. 介绍SSR及其在Vue.js中的作用 ## 1.1 什么是SSR 在Web开发中,SSR指的是服务器端渲染(Server-Side Rendering),即在服务器端将页面模板和数据结合后生成最终的HTML页面,再将HTML页面发送给客户端。相对应的概念是CSR(Client-Side Rendering),即采用JavaScript在客户端进行页面渲染。 ## 1.2 为什么在Vue.js中使用SSR 在Vue.js中使用SSR可以提升首屏加载速度、改善搜索引擎优化(SEO)并改善用户体验。SSR可以让搜索引擎更容易抓取页面内容,因为页面的内容已经在服务端生成。此外,SSR

coxph模型的summary函数以后得到的是什么,分别分析一下

coxph模型是用来拟合生存分析数据的模型,它可以用来评估某些预测变量对于生存时间的影响。在R语言中,当我们用coxph函数拟合模型后,可以使用summary函数来查看模型的摘要信息。 使用summary函数得到的是一个类似于表格的输出结果,其中包含了以下信息: 1. Model:显示了使用的模型类型,这里是Cox Proportional Hazards Model。 2. Call:显示了生成模型的函数及其参数。 3. n:数据集中观测值的数量。 4. Events:数据集中事件(即生存时间结束)的数量。 5. Log-likelihood:给定模型下的对数似然值。 6. C

SerDes知识详解一、SerDes的作用.pdf

)上重新同步时钟和数据信号来解决这些问题,但是这些信号再次变得异步的时候,这些问题就会重新出现。 SerDes 技术的引入,将并行数据转换为串行,通过串行链路传送数据,从而有效的克服了以上问题。 SerDes 技术是解决高速芯片之间通信的有效方式,它使芯片之间的通信速率提高了几个数量级。同时 SerDes 技术传输距离更远、抗干扰性更强,这使得它在高速芯片之间的连接中更具有竞争力。 除了并行总线接口,减小 PCB 板 trace 相互干扰是 SerDes 的另一个很重要的应用,如:图1.2(PCB 板总线串扰)。 同理在系统内部芯片间通信过程中,信号与信号之间的串扰同样是我们需要考虑的问题之一。在板上、芯片内复杂的信号传输结构也使得芯片设计工程师需要借助SerDes 技术来克服这些问题。" SerDes技术在现代芯片通信领域起着至关重要的作用。在使用SerDes技术之前,芯片之间的互联主要依赖系统同步或源同步的并行接口传输数据。然而,随着接口频率的提高,出现了一系列问题,如时钟传播延时不相等、并行数据传播延时不相等以及时钟和数据的传播延时不一致等。尽管可以在目的芯片上重新同步时钟和数据信号来解决这些问题,但一旦信号再次变得异步,问题就会重新出现。因此,SerDes技术的引入成为解决高速芯片之间通信问题的有效方式。通过将并行数据转换为串行,SerDes技术通过串行链路传送数据,从而有效地克服了并行接口传输数据时出现的问题。SerDes技术不仅使芯片之间的通信速率提高了几个数量级,而且传输距离更远、抗干扰性更强,使得其在高速芯片之间的连接中更具有竞争力。除了在并行总线接口中的应用外,SerDes技术还在减小PCB板trace相互干扰以及在系统内部芯片间信号传输过程中的串扰问题中具有重要作用,使得芯片设计工程师能够更好地克服这些问题,提高系统性能。因此,SerDes技术的应用不仅在现代芯片通信领域中具有重要意义,而且在解决高速芯片通信问题中有着广泛的应用前景。