基于Vue和axios的音乐播放器——悦听音乐效果展示及代码分享

接口还是网易的，毕竟它家的公开，也就搜搜网易云音乐的歌了。不想敲的，可以用下面的
gitee地址: link.
https://gitee.com/lyh1999/enjoy-listening-music

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><link rel="stylesheet" href="./index.css"><script src="./index.js"></script>
</head><body><!-- 歌曲搜索 1按下回车v-on.enter2查询数据axios接口 v-model3渲染数据v-for 数组 图哈特 歌曲播放 切换audio src地址1点击播放v-on自定义参数2歌曲地址获取（接口歌曲id3歌曲地址设置（v-bind）歌曲封面1点击播放2歌曲封面获取3歌曲封面设置歌曲评论1点击播放2歌曲评论获取3歌曲评论渲染歌曲动画1监听音乐播放 v-on play2监听音乐暂停 v-on pause3操纵类名 v-bind 对象MV 播放1mv图标显示 v-if2mv地址获取 mvid3遮罩层 v-show v-on4mv地址设置 v-bind--><div id="app"><!-- 播放器主体区域 --><div class="play_wrap" id="player"><div class="search_bar"><img src="data:images/player_title.png" alt="" /><!-- 搜索歌曲 --><input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic" /></div><div class="center_con"><!-- 搜索歌曲列表 --><div class='song_wrapper'><ul class="song_list"><li v-for="(item,index) in musicList"><a href="javascript:;" @click="playMusic(item.id)"></a><b>{{item.name}}</b><span v-if="item.mvid!=0" @click="playMv(item.mvid)"><i></i></span></li></ul><img src="data:images/line.png" class="switch_btn" alt=""></div><!-- 歌曲信息容器 --><div class="player_con" :class="{playing:isPlaying}"><img src="data:images/player_bar.png" class="play_bar" /><!-- 黑胶碟片 --><img src="data:images/disc.png" class="disc autoRotate" /><img :src="musicCover" class="cover autoRotate" /></div><!-- 评论容器 --><div class="comment_wrapper"><h5 class='title'>热门留言</h5><div class='comment_list'><dl v-for="item in hotComments"><dt><img :src="item.user.avatarUrl" alt="" /></dt><dd class="name">{{item.user.nickname}}</dd><dd class="detail">{{item.content}}</dd></dl></div><img src="data:images/line.png" class="right_line"></div></div><div class="audio_con"><audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio></div><div class="video_con" style="display: none;" v-show="isShow"><video controls="controls" :src="mvUrl"></video><div class="mask" @click="hide"></div></div></div></div>
</body></html>

window.onload = function() {var app = new Vue({el: '#app',data: {query: '任贤齐',musicList: [],musicUrl: '',musicCover: '',hotComments: [],isPlaying: false,isShow: false,mvUrl: ''},methods: {searchMusic() {var that = thisaxios.get('https://autumnfish.cn/search?keywords=' + this.query).then(function(res) {// console.log(res);that.musicList = res.data.result.songs}, function(err) {console.log(err);})},playMusic(musicId) {// console.log(musicId);var that = thisaxios.get("https://autumnfish.cn/song/url?id=" + musicId).then(function(res) {// console.log(res.data.data[0].url);// console.log(res);that.musicUrl = res.data.data[0].url}, function(err) {console.log(err);})// 歌曲详情获取axios.get('https://autumnfish.cn/song/detail?ids=' + musicId).then(function(res) {that.musicCover = res.data.songs[0].al.picUrl// console.log(res.data.songs[0].al.picUrl);}, function(err) {console.log(err);})// 歌曲评论获取axios.get('https://autumnfish.cn/comment/hot?type=0&id=' + musicId).then(function(res) {that.hotComments = res.data.hotComments}, function(err) {console.log(err);})},play() {this.isPlaying = true},pause() {this.isPlaying = false},playMv(mvid) {var that = this;axios.get("https://autumnfish.cn/mv/url?id=" + mvid).then(function(response) {// console.log(response);console.log(response.data.data.url);that.isShow = true;that.mvUrl = response.data.data.url;},function(err) {});},hide() {this.isShow = false}}})
}

body,
ul,
dl,
dd {margin: 0px;padding: 0px;
}.wrap {position: fixed;left: 0;top: 0;width: 100%;height: 100%;background: url("../images/bg.jpg") no-repeat;background-size: 100% 100%;
}.play_wrap {width: 800px;height: 544px;position: fixed;left: 50%;top: 50%;margin-left: -400px;margin-top: -272px;/* background-color: #f9f9f9; */
}.search_bar {height: 60px;background-color: #1eacda;border-top-left-radius: 4px;border-top-right-radius: 4px;display: flex;align-items: center;justify-content: space-between;position: relative;z-index: 11;
}.search_bar img {margin-left: 23px;
}.search_bar input {margin-right: 23px;width: 296px;height: 34px;border-radius: 17px;border: 0px;background: url("./images/zoom.png") 265px center no-repeat rgba(255, 255, 255, 0.45);text-indent: 15px;outline: none;
}.center_con {height: 435px;background-color: rgba(255, 255, 255, 0.5);display: flex;position: relative;
}.song_wrapper {width: 200px;height: 435px;box-sizing: border-box;padding: 10px;list-style: none;position: absolute;left: 0px;top: 0px;z-index: 1;
}.song_stretch {width: 600px;
}.song_list {width: 100%;overflow-y: auto;overflow-x: hidden;height: 100%;
}.song_list::-webkit-scrollbar {display: none;
}.song_list li {font-size: 12px;color: #333;height: 40px;display: flex;flex-wrap: wrap;align-items: center;width: 580px;padding-left: 10px;
}.song_list li:nth-child(odd) {background-color: rgba(240, 240, 240, 0.3);
}.song_list li a {display: block;width: 17px;height: 17px;background-image: url("./images/play.png");background-size: 100%;margin-right: 5px;box-sizing: border-box;
}.song_list li b {font-weight: normal;width: 122px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}.song_stretch .song_list li b {width: 200px;
}.song_stretch .song_list li em {width: 150px;
}.song_list li span {width: 23px;height: 17px;margin-right: 50px;
}.song_list li span i {display: block;width: 100%;height: 100%;cursor: pointer;background: url("./images/table.png") left -48px no-repeat;
}.song_list li em,
.song_list li i {font-style: normal;width: 100px;
}.player_con {width: 400px;height: 435px;position: absolute;left: 200px;top: 0px;
}.player_con2 {width: 400px;height: 435px;position: absolute;left: 200px;top: 0px;
}.player_con2 video {position: absolute;left: 20px;top: 30px;width: 355px;height: 265px;
}.disc {position: absolute;left: 73px;top: 60px;z-index: 9;
}.cover {position: absolute;left: 125px;top: 112px;width: 150px;height: 150px;border-radius: 75px;z-index: 8;
}.comment_wrapper {width: 180px;height: 435px;list-style: none;position: absolute;left: 600px;top: 0px;padding: 25px 10px;
}.comment_wrapper .title {position: absolute;top: 0;margin-top: 10px;
}.comment_wrapper .comment_list {overflow: auto;height: 410px;
}.comment_wrapper .comment_list::-webkit-scrollbar {display: none;
}.comment_wrapper dl {padding-top: 10px;padding-left: 55px;position: relative;margin-bottom: 20px;
}.comment_wrapper dt {position: absolute;left: 4px;top: 10px;
}.comment_wrapper dt img {width: 40px;height: 40px;border-radius: 20px;
}.comment_wrapper dd {font-size: 12px;
}.comment_wrapper .name {font-weight: bold;color: #333;padding-top: 5px;
}.comment_wrapper .detail {color: #666;margin-top: 5px;line-height: 18px;
}.audio_con {height: 50px;background-color: #f1f3f4;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;
}.myaudio {width: 800px;height: 40px;margin-top: 5px;outline: none;background-color: #f1f3f4;
}/* 旋转的动画 */@keyframes Rotate {from {transform: rotateZ(0);}to {transform: rotateZ(360deg);}
}/* 旋转的类名 */.autoRotate {animation-name: Rotate;animation-iteration-count: infinite;animation-play-state: paused;animation-timing-function: linear;animation-duration: 5s;
}/* 是否正在播放 */.player_con.playing .disc,
.player_con.playing .cover {animation-play-state: running;
}.play_bar {position: absolute;left: 200px;top: -10px;z-index: 10;transform: rotate(-25deg);transform-origin: 12px 12px;transition: 1s;
}/* 播放杆 转回去 */.player_con.playing .play_bar {transform: rotate(0);
}/* 搜索历史列表 */.search_history {position: absolute;width: 296px;overflow: hidden;background-color: rgba(255, 255, 255, 0.3);list-style: none;right: 23px;top: 50px;box-sizing: border-box;padding: 10px 20px;border-radius: 17px;
}.search_history li {line-height: 24px;font-size: 12px;cursor: pointer;
}.switch_btn {position: absolute;right: 0;top: 0;cursor: pointer;
}.right_line {position: absolute;left: 0;top: 0;
}.video_con video {position: fixed;width: 800px;height: 546px;left: 50%;top: 50%;margin-top: -273px;transform: translateX(-50%);z-index: 990;
}.video_con .mask {position: fixed;width: 100%;height: 100%;left: 0;top: 0;z-index: 980;background-color: rgba(0, 0, 0, 0.8);
}.video_con .shutoff {position: fixed;width: 40px;height: 40px;background: url("./images/shutoff.png") no-repeat;left: 50%;margin-left: 400px;margin-top: -273px;top: 50%;z-index: 995;
}

基于Vue和axios的音乐播放器——悦听音乐效果展示及代码分享相关推荐

2020 零基础 Vue综合应用教开发音乐播放器—悦听（激发编程乐趣）【整理+源码】
文章目录 1.引言 2.音乐播放器完整版效果图如下: 3.接口引用 4.示例代码 5.结束语点击进入Vue❤学习专栏~ 1.引言这是Vue学习的综合应用篇,教你开发一个音乐播放器,能听歌,能看热门 ...
iOS之基于FreeStreamer的简单音乐播放器(模仿QQ音乐)
代码地址如下: http://www.demodashi.com/demo/11944.html 天道酬勤前言作为一名iOS开发者,每当使用APP的时候,总难免会情不自禁的去想想,这个怎么做的?该 ...
linux安装深度播放器,分享|Ubuntu 14.04 用户如何安装深度音乐播放器和百度音乐插件...
播放本地音乐或者收听国外的音乐电台,Ubuntu 14.04 自带的音乐播放器 Rhythmbox 完全能够满足,但是如果你想有像酷狗那样的国内播放器就需要折腾一下,还好有深度音乐播放器,这是一款完全 ...
java制作音乐播放器教程_Java音乐播放器的实现实例
这篇文章主要介绍了java 实现音乐播放器的简单实例的相关资料,希望通过本文能帮助到大家,实现这样的功能,需要的朋友可以参考下 java 实现音乐播放器的简单实例实现效果图: 代码如下 packag ...
android音乐播放器git,Android音乐播放器
Android音乐播放器介绍 Android音乐播放器开发进度算是全部完成了,后续只会改进了. 如何使用按这篇博客修改一下gradle相关文件,匹配自己的开发环境日志 2020.12.15 ...
Android开发本地及网络Mp3音乐播放器(十三)网络音乐搜索功能实现,歌名歌手专辑名搜索
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/51298411 觉得博文有用,请点赞,请留言,请关注,谢谢!~ 实现功能: 实现网络音乐 ...
Vue介绍以及练手案例——音乐播放器（搜索音乐、听歌、看评论、看mv等）（持续更新）
Vue概述它是一种 javascript框架可以简化DOM操作进行响应式数据驱动 el: 挂载点 vue实例的作用范围:vue会管理 el 选项所命中的元素及其内部的后代元素. 可以使用其他选择 ...
android 收藏歌曲功能,基于android的网络音乐播放器-回调实现音乐播放及音乐收藏的实现（三）...
作为android初学者,最近把疯狂android讲义和疯狂Java讲义看了一遍,看到书中介绍的知识点非常多,很难全部记住,为了更好的掌握基础知识点,我将开发一个网络音乐播放器-EasyMusic来巩 ...
基于android的网络音乐播放器-回调实现音乐播放及音乐收藏的实现（三）
作为android初学者,最近把疯狂android讲义和疯狂Java讲义看了一遍,看到书中介绍的知识点非常多,很难全部记住,为了更好的掌握基础知识点,我将开发一个网络音乐播放器-EasyMusic来巩 ...

基于Vue和axios的音乐播放器——悦听音乐效果展示及代码分享

基于Vue和axios的音乐播放器——悦听音乐效果展示及代码分享相关推荐

最新文章

热门文章