使用vue简单实现音乐播放器

音乐播放器实战

实现效果

在搜索框中搜索歌曲，可以点击“搜索”按钮或者摁下回车键开始搜索
返回的结果会在左边显示，点击“播放”按钮开始播放，有MV的歌曲将会显示“播放MV”的按钮
选择一首歌曲开始播放时，右边会出现该歌曲的热门评论，有评论者的id，头像和内容
音乐在播放时，歌曲封面会360度转动，点击暂停后，封面也会停止

项目准备

音乐数据的axios接口：

使用axios返回response数据时，可以先使用console.log(response)在控制台打印输出，需要在页面展示的数据可以在如下对象中获取，比如：

获取歌曲名：

获取音乐地址：

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>音乐播放器</title><style>li {list-style: none;}.main {float: left;width: 600px;margin: 0 auto;text-align: center;position: relative;left: 400px;}.reviews {float: right;width: 400px;}.right {float: left;width: 400px;position: relative;right: 400px;}.playing {transform: rotate(360deg);animation: rotation 20s linear infinite;}@keyframes rotation {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}.mv {width: 800px;height: 450px;position: absolute;left: 367.5px;top: 167px;}</style>
</head><body>
<div id="app"><div class="main"><h1>音乐播放器</h1>请输入你查询的歌手或者歌曲：<input type="text" v-model="name" @keyup.enter="getSongs"><button @click="getSongs()">搜索</button><br><br>（搜索慢，请稍等两秒）<br> <br><audio v-bind:src="url" controls autoplay @play="play" @pause="pause"></audio><br> <br> <br> <br> <br><img v-bind:src="data:imageUrl" width="300px" height="300px"style="border-radius: 50%" :class="{playing:isplaying}"></div><div class="right"><p>音乐列表</p><ul><li v-for="item in songList">{{item.name}}<button @click="getSing(item.id)">播放</button><button @click="getMv(item.mvid)" v-if="item.mvid!==0">播放MV</button></li></ul></div><div class="mv" v-if="isshow"><video :src="mvUrl" controls width="800px" height="450px"></video></div><ul class="reviews"><p>热门评论：</p><li v-for="review in reviewList"><img v-bind:src="review.user.avatarUrl" width="20px" height="20px">{{review.user.nickname}}:{{review.content}}</li></ul>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="http://unpkg.com/axios/dist/axios.min.js"></script><script>var vm = new Vue({el: "#app",data: {name: "",songList: [],url: "",imageUrl: "",reviewList: [],isplaying: "",mvUrl: "",isshow: false},methods: {//获得歌曲的名字getSongs: function () {//回调函数需要使用that来传递thislet that = this;axios.get("https://autumnfish.cn/search?keywords=" + this.name).then(function (response) {that.songList = response.data.result.songs;}, function (error) {console.log(error)});},//获得歌曲的在线url地址getSing: function (id) {let that = this;axios.get("https://autumnfish.cn/song/url?id=" + id).then(function (response) {//注意返回的是数据数组，需要data[0]that.url = response.data.data[0].url;}, function (error) {console.log(error);})this.getImage(id);this.getReviews(id);},//获取歌曲封面getImage: function (id) {let that = this;axios.get("https://autumnfish.cn/song/detail?ids=" + id).then(function (response) {that.imageUrl = response.data.songs[0].al.picUrl;}, function (error) {console.log(error);})},//获取歌曲评论getReviews: function (id) {let that = this;axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + id).then(function (response) {that.reviewList = response.data.hotComments;}, function (error) {console.log(error);})},//控制封面旋转play: function () {this.isplaying = true;},pause: function () {this.isplaying = false;},//获取MVgetMv: function (id) {let that = this;axios.get("https://autumnfish.cn/mv/url?id=" + id).then(function (response) {that.isshow = true;that.mvUrl = response.data.data.url;}, function (error) {console.log(error);});}}});
</script>
</body>
</html>

注意点

在函数中赋值给data数据时，不要忘记加上this
在回调函数中不要忘记定义that来传递this
注意response返回的是对象还是数组，数组需要加上data[0]
给img属性赋值时，要使用v-bind:src=""来进行属性绑定，而不是用<img src="{{xxx}}">
audio音频监听播放和暂停可以使用@play和@pause方法

使用vue简单实现音乐播放器相关推荐

uniapp实现简单的音乐播放器功能
uniapp实现简单的音乐播放器功能问题描述: 创建并返回内部audio上下文来控制音乐播放我是直接用scroll-into-view来实现的这个 <scroll-view scroll-y ...
vue+express实现音乐播放器
vue+express实现音乐播放器效果图因为html中的audio的样式不能更改,所以我们自己制作UI,做成自己想要的样子,这样要实现滑动条跟audio的双向绑定,滑动条使用了vant的组件sl ...
Vue实现仿音乐播放器项目总述以及阶段目录
Github地址 https://github.com/badaoliumang/vuemusicplayer Vue实现仿音乐播放器各阶段代码 https://download.csdn.net/d ...
Vue实现仿音乐播放器6-实现新歌速递与swiper轮播图切换
前言前面在首页已经完成今日推荐以及访问百度API获取数据,现在继续来完善home主页. 效果新歌速递 swiper实现轮播图实现实现新歌速递在components下新建新歌速递组件News_ ...
Vue实现仿音乐播放器3-将项目托管到git以及github
Github新建项目 1.登录github,点击右上角新建仓库 2.输入仓库名以及描述等,点击Create resposity 3.新建仓库完成后,右边有个clone or download,复制SS ...
android 简单的音乐播放器实现播放模式的切换
以前写过一篇简单的音乐播放器,但是这个播放器没有实现播放模式的切换,在项目中要实现两个播放模式,循环播放和随机播放,经过这两天的努力搞定了,界面比较粗糙.可以先看一下前面的简单音乐播放器,详细的就不说 ...
android 简单的音乐播放器
在项目开发过程中需要一个简单的音频播放的功能,需求很简单,只需要能够播放一个指定文件夹的全部mp3和wav音频文件就可以,谷歌给我们提供了一套比较完整的API,使得我们可以很简单的写出一个简易的音乐播 ...
好程序员前端分享使用JS开发简单的音乐播放器
好程序员前端分享使用JS开发简单的音乐播放器,最近,我们在教学生使用JavaScript,今天就带大家开发一款简单的音乐播放器.首先,最终效果如图所示: 首先,我们来编写html界面index.htm ...
自制一个简单的音乐播放器
这两天刚学完了contentprovider和service组件,就综合下所学的,自制了一个简单的音乐播放器. 代码如下: 主activity代码 public class MainActivity ...
用Qt写一个简单的音乐播放器（三）：增加界面（播放跳转与音量控制）
一.前言在用Qt写一个简单的音乐播放器(一):使用QMediaPlayer播放音乐中,我们已经知道如何去使用QMediaPlayer播放音乐. 在用Qt写一个简单的音乐播放器(二):增加界面(开始和 ...

使用vue简单实现音乐播放器

音乐播放器实战

实现效果

项目准备

代码

注意点

使用vue简单实现音乐播放器相关推荐

最新文章

热门文章