基于 Vue 和 axios 的音乐查询和播放器的案例

最新推荐文章于 2025-05-04 15:57:50 发布

原创

最新推荐文章于 2025-05-04 15:57:50 发布 · 594 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #js #css #html

本文展示了如何使用Vue.js和axios构建一个音乐查询和播放器应用。通过输入歌手或歌名进行搜索，展示歌曲列表，带有播放/暂停功能的封面，以及MV播放器。点击MV播放器会弹出遮罩层，点击任意位置可关闭。同时，介绍了HTML、CSS和JS的实现细节，包括axios库的引入。

基于 Vue 和 axios 的音乐查询和播放器的案例

1、先看效果

在这里插入图片描述
在搜索框输入要查询的歌手或歌名，按回车键出来结果，左边是歌曲的列表，前面的播放器是歌曲的播放器，后面的播放器是该歌曲恶的mv播放器，没有mv则没有mv播放器。中间是歌曲的封面，点击播放，封面会动，点击暂停就会暂停，鼠标经过也会暂停。右边是播放歌曲的热评，有评论者的头像、昵称和评论内容。
在这里插入图片描述
点击mv播放器，显示遮罩层播放mv，点击遮罩层的任何一个地方都可以关闭mv。
下面我们来看代码吧~

2、html

        <div id="app">
			<header>
				<h2>悦听</h2>
				<input type="text" placeholder="请输入要搜索的歌星" autofocus="autofocus" v-model="query" @keyup.enter="searchMusic"/>
			</header>
			<section>
				<ul>
					<li class="list">
						<dl>
							<dd v-for="item in musicList">
								<div class="name">
									<i class="iconfont icon-bofang3" @click="playMusic(item.id)"></i>
									<span>{
   
   {
   
    item.name }}</span>
								</div>
								<i class="iconfont icon-bofang6" v-show="item.mvid != 0" @click="playMv(item.mvid)"></i>
							</dd>
						</dl>
					</li>
					<li class="img">
						<h1>正在播放：{
   
   {
   
    musicName }}</h1>
						<div class="tx" :class="{play:isPlaying}">
							<img :src="musicCover" >
						</div>
					</li>
					<li class="message">
						<h3>热门留言</h3>
						<dl>
							<dd v-for="item in hotComments">
								<div class="pic">
									<img :src="item.user.avatarUrl" >
								</div>
								<div class="text">
									<span>{
   
   {
   
    item.nikename }}</span><br>
									<em>{
   
   {
   
    item.content }}</em>
								</div>
							</dd>
						</dl>
					</li>
				</ul>
			</section>
			<footer

最低0.47元/天解锁文章