今天我们一起来看用vue编写的h5端周杰伦音乐播放器
我是听着jay的歌，看的这个项目哦
先放上作者大大的地址
https://github.com/osuuu/jay_music
接下来我们看看这个项目里面有哪些效果
接下来我们看看代码
首先是main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import './assets/js/remScale' //适配尺寸
import './assets/css/reset.css'
//引入Vant-ui
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)
import axios from 'axios'
Vue.prototype.$axios = axios
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
接下来入口文件app.vue
<template>
<div id="app">
<router-view v-wechat-title="$route.meta.title" />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
router.js中定义了对应的组件
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'
import Album from '@/components/Album'
import Seach from '@/components/Seach'
import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)
Vue.use(Router)
export default new Router({
// mode:'history',
routes: [
{
path: '/',
name: 'Index',
component: Index,
meta: {
title: '首页 - JAY粉丝俱乐部'
}
},
{
path: '/album',
name: 'Album',
component: Album,
meta: {
title: '专辑 - JAY粉丝俱乐部'
}
},
{
path: '/seach',
name: 'Seach',
component: Seach,
meta: {
title: '搜索 - JAY粉丝俱乐部'
}
},
{
path: '*',
redirect: '/'
}
]
})
// JavaScript Document
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth; //获取设备尺寸
if (!clientWidth) return;
if(clientWidth>=750){ //设计稿宽度
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false); //绑定事件
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
这个是对应的单位的转换的
接下来我们看首页
首页中有轮播，列表，还有一个搜索以及刷新的功能
比较干净的请求
<template>
<div>
<div class="car">
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
<van-swipe-item v-for="(item,index) in imgs" :key="index">
<a :href="item.url?item.url:'#'" >
<img :src="item.img" class="imgs" alt />
</a>
</van-swipe-item>
</van-swipe>
</div>
<div style="margin-bottom:60px">
<div class="contain">
<div class="title">
随机推荐
<van-icon
name="replay"
size="20"
style="float:right;margin-top:4px"
color="#777"
@click="replay"
/>
</div>
<div class="song" v-for="(item,index) in song" :key="index" @click="play(item.id)">
<img :src="item.images" class="song_img" alt />
<div class="song_name">{{item.name}}</div>
<div class="sq">{{item.sound}}</div>
<div class="song_detail">{{item.details}}</div>
<van-icon name="arrow" class="song_enter" size="26" color="#777" />
</div>
</div>
<div class="contain">
<div class="title">
热门专辑
<van-icon name="replay" size="20" style="float:right" color="#777" @click="reAlbum" />
</div>
<div class="album_list">
<div
class="album_one"
v-for="(item,index) in album"
:key="index"
@click="Album(item.id,item.images,item.album)"
>
<img :src="item.images" class="album_img" alt />
<div class="album_name">{{item.album}}</div>
</div>
</div>
</div>
</div>
<div class="nav1" @click="seach">
<van-icon name="search" size="40" color="#fff" />
</div>
<play :song="play_id"></play>
</div>
</template>
<script>
import { Toast } from "vant";
import play from "@/components/play";
export default {
data() {
return {
imgs: [],
song: [],
album: [],
play_id: ""
};
},
components: {
play
},
methods: {
//获取轮播图
_getImgs() {
this.$axios({
url: "https://api.h234.cn/music/swiper.php"
})
.then(res => {
this.imgs = res.data.data;
})
.catch(err => {});
},
//获取随机推荐
_getSong() {
this.$axios({
url: "https://api.h234.cn/music/jay.html"
})
.then(res => {
this.song = res.data.data;
})
.catch(err => {});
},
//获取专辑列表
_getAlbum() {
this.$axios({
url: "https://api.h234.cn/music/jay.html?list=all"
})
.then(res => {
var newAlbum = [];
for (let i = 0; i < res.data.data.length; ) {
let j = Math.random() * res.data.data.length; // 获取随机的下标值
j = ~~j; // 取整
let item = res.data.data.splice(j, 1)[0]; // 从原数组中剔除选中的元素
newAlbum.push(item);
}
this.album = newAlbum.splice(0, 6);
})
.catch(err => {});
},
//传值播放
play(id) {
this.play_id = id;
Toast.loading({
message: "加载中...",
forbidClick: true
});
},
//刷新列表
replay() {
Toast.loading({
message: "加载中...",
forbidClick: true
});
this._getSong();
},
//刷新专辑
reAlbum() {
Toast.loading({
message: "加载中...",
forbidClick: true
});
this._getAlbum();
},
//跳转专辑列表
Album(id, img, name) {
this.$router.push("/album?id=" + id + "&img=" + img + "&name=" + name);
},
//搜索效果
seach() {
this.$router.push("/seach");
}
},
mounted() {
this._getImgs();
this._getSong();
this._getAlbum();
}
};
</script>
<style scoped>
.my-swipe .van-swipe-item {
color: #fff;
font-size: 20px;
border-radius: 10px;
text-align: center;
}
.car {
height: 200px;
padding: 10px;
}
.imgs {
100%;
height: 200px;
border-radius: 10px;
}
.contain {
background: #fff;
padding: 20px 15px 10px 15px;
}
.title {
font-size: 20px;
font-weight: 600;
display: block;
margin-bottom: 10px;
}
.song {
margin: 10px 0;
position: relative;
}
.song_img {
60px;
height: 60px;
border-radius: 10px;
margin-right: 10px;
}
.song_name {
80%;
position: absolute;
top: 5px;
left: 70px;
font-size: 18px;
color: black;
white-space: nowrap; /* 一行 */
overflow: hidden; /* 溢出隐藏 */
text-overflow: ellipsis; /* 超出内容显示省略号 */
}
.sq {
position: absolute;
bottom: 10px;
left: 70px;
padding: 0 4px;
font-size: 11px;
border-radius: 4px;
border: 1px solid orange;
color: orange;
}
.song_detail {
position: absolute;
bottom: 10px;
left: 108px;
font-size: 12px;
color: #888;
}
.song_enter {
position: absolute;
top: 14px;
right: 0;
}
.album_list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.album_one {
30%;
height: 130px;
margin-bottom: 20px;
}
.album_img {
100%;
height: 110px;
border-radius: 10px;
}
.album_name {
font-size: 18px;
color: #888;
white-space: nowrap; /* 一行 */
overflow: hidden; /* 溢出隐藏 */
text-overflow: ellipsis; /* 超出内容显示省略号 */
}
.nav1 {
position: fixed;
right: 30px;
bottom: 80px;
40px;
height: 40px;
border-radius: 50%;
text-align: center;
background: #5dade2;
box-shadow: 1px 1px 5px #888888;
padding: 5px;
}
.nav {
position: fixed;
right: 30px;
bottom: 80px;
50px;
height: 50px;
border-radius: 50%;
text-align: center;
background: #5dade2;
box-shadow: 1px 1px 5px #888888;
/* padding: 5px; */
}
.seach {
position: fixed;
bottom: 210px;
0;
margin: 0 5%;
background: #5dade2;
color: #fff;
border-radius: 30px;
box-shadow: 1px 1px 5px #888888;
transition: width 0.5s;
}
.shows {
90%;
}
.seach input {
/* 100%; */
height: 50px;
margin-left: 48px;
font-size: 17px;
}
.ico {
position: absolute;
top: 7px;
left: 10px;
}
.hide {
display: none;
}
</style>
里面还封装了一个播放组件
我们看看播放组件的内容
播放组件里面还有播放下一曲的功能
//play.vue
<template>
<div class="play">
<img :src="music.images" class="play_img" :class="plays?'animation':''" alt />
<div class="play_name">{{music.name}}</div>
<div class="play_detail">{{music.details}}</div>
<div class="play_ico" :class="plays?'playImg':'stopImg'" @click="stop"></div>
<div class="play_next" @click="next"></div>
<audio ref="audio">
<source :src="music.music" type="audio/mpeg" />
</audio>
</div>
</template>
<script>
import { Toast } from "vant";
export default {
props: ["song"],
data() {
return {
music: {
images: "http://q2.qlogo.cn/headimg_dl?dst_uin=1750754503&spec=100",
name: "听见好音乐",
details: "我偷看着这万物世态炎凉"
},
plays: false
};
},
methods: {
_getSong(id) {
this.$axios({
url: "https://api.h234.cn/music/jay.html?id=" + id
})
.then(res => {
this.music = res.data.data[0];
let audio = this.$refs.audio;
audio.load();
audio.play();
this.plays = true;
//监听播放结束 执行下一曲
audio.addEventListener(
"ended",
function() {
this.plays = false;
this.next()
},
false
);
})
.catch(err => {});
},
//播放与暂停按钮
stop() {
if (this.plays) {
let audio = this.$refs.audio;
audio.pause();
this.plays = false;
} else if (!this.music.music) {
Toast.fail("还没有选择歌曲哦");
} else {
let audio = this.$refs.audio;
audio.play();
this.plays = true;
}
},
//下一曲
next() {
let j = Math.random() * (191 - 30) + 30;
j = ~~j; // 取整
this._getSong(j);
}
},
watch: {
song(newVal) {
this._getSong(newVal);
}
}
};
</script>
<style scoped>
.play {
92%;
height: 60px;
padding: 0 4%;
position: fixed;
bottom: 0;
background: #fff;
box-shadow: 1px 1px 5px #888888;
}
.play_img {
46px;
height: 46px;
border-radius: 50%;
margin: 7px 0;
}
.animation {
-webkit-animation: circle 10s infinite linear;
animation: circle 10s infinite linear;
}
@-webkit-keyframes circle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.play_name {
position: absolute;
top: 8px;
left: 80px;
font-size: 16px;
}
.play_detail {
position: absolute;
bottom: 8px;
left: 80px;
color: #777;
font-size: 14px;
}
.play_ico {
position: absolute;
right: 70px;
top: 15px;
30px;
height: 30px;
}
.playImg {
background: url(../assets/img/play.png);
background-size: 30px 30px;
}
.stopImg {
background: url(../assets/img/stop.png);
background-size: 30px 30px;
}
.play_next {
position: absolute;
right: 20px;
top: 13px;
34px;
height: 34px;
background: url(../assets/img/next.png);
background-size: 34px 34px;
}
</style>
里面还有Album组件，不过可能还没有做这个
//Alum
**<template>
<div>
<div style="margin-bottom:60px">
<div class="album_head">
<div class="bg">
<img :src="album_img" class="imgs" alt />
<div class="album_name">{{album_name}}</div>
<div class="album_auth">周杰伦</div>
<div class="album_details">未知信息 ></div>
</div>
<div class="mask"></div>
</div>
<div class="song_list" v-for="(item,index) in song" :key="index" @click="play(item.id)">
<div class="song_name">{{item.name}}</div>
<div class="song_sq">{{item.sound}}</div>
<div class="song_detail">{{item.details}}</div>
<van-icon name="arrow" class="song_enter" size="26" color="#777" />
</div>
</div>
<play :song="play_id"></play>
</div>
</template>
<script>
import { Toast } from "vant";
import play from "@/components/play";
export default {
data() {
return {
album_img: "",
album_name: "",
song: [],
play_id: ""
};
},
components: {
play
},
mounted() {
this.album_img = this.$route.query.img;
this.album_name = this.$route.query.name;
this._getSong(this.$route.query.id);
},
methods: {
//获取专辑音乐
_getSong(value) {
this.$axios({
url: "https://api.h234.cn/music/jay.html?album=" + value
})
.then(res => {
this.song = res.data.data;
})
.catch(err => {});
},
play(id) {
Toast.loading({
message: "加载中...",
forbidClick: true
});
this.play_id = id;
}
}
};
</script>
<style scoped>
.album_head {
position: relative;
height: 200px;
}
.bg {
position: absolute;
top: 0;
100%;
background: linear-gradient(#3b5870, #696568);
}
.imgs {
margin: 30px 30px 40px 30px;
120px;
height: 120px;
border-radius: 10px;
}
.album_name {
position: absolute;
top: 30px;
left: 180px;
color: #fff;
font-size: 20px;
font-weight: 600;
}
.album_details {
position: absolute;
top: 120px;
left: 180px;
color: #fff;
font-size: 14px;
}
.album_auth {
position: absolute;
top: 70px;
left: 180px;
color: #fff;
font-size: 14px;
}
.mask {
position: absolute;
top: 176px;
100%;
height: 40px;
background: #fff;
border-radius: 20px;
}
.song_list {
margin: 10px 15px;
position: relative;
}
.song_name {
80%;
font-size: 18px;
color: black;
white-space: nowrap; /* 一行 */
overflow: hidden; /* 溢出隐藏 */
text-overflow: ellipsis; /* 超出内容显示省略号 */
margin-bottom: 5px;
}
.song_sq {
display: inline-block;
padding: 0 4px;
font-size: 10px;
border-radius: 4px;
border: 1px solid orange;
color: orange;
}
.song_detail {
display: inline-block;
margin-left: 16px;
font-size: 14px;
color: #888;
}
.song_enter {
position: absolute;
top: 14px;
right: 0;
}
</style>
接下来是search页面的
接下来看代码
<template>
<div>
<div class="song_seach">
<van-icon name="search" class="ico" size="30" color="#777" />
<input
placeholder="歌曲名(只能周总的哦)"
v-model="seach"
@keyup.enter="startSeach"
/>
</div>
<div style="margin-bottom:80px">
<div class="song_list" v-for="(item,index) in song" :key="index" @click="play(item.id)">
<div class="song_name">{{item.name}}</div>
<div class="song_sq">{{item.sound}}</div>
<div class="song_detail">{{item.details}}</div>
<van-icon name="arrow" class="song_enter" size="26" color="#777" />
</div>
</div>
<play :song="play_id"></play>
</div>
</template>
<script>
import { Toast } from "vant";
import play from "@/components/play";
export default {
data() {
return {
seach: "",
play_id: "",
song: []
};
},
components: {
play
},
methods: {
_getSong(value) {
this.$axios({
url: "https://api.h234.cn/music/jay.html?query=" + this.seach
})
.then(res => {
this.song = res.data.data;
})
.catch(err => {});
},
//搜索音乐
startSeach() {
this._getSong(this.seach);
this.seach = ""
},
play(id) {
Toast.loading({
message: "加载中...",
forbidClick: true
});
this.play_id = id;
}
}
};
</script>
<style scoped>
.song_seach {
position: relative;
margin: 0 3%;
background: #f5f5f5;
border-radius: 36px;
margin-top: 10px;
}
.ico {
position: absolute;
top: 5px;
left: 10px;
}
.song_seach input {
50%;
height: 40px;
margin-left: 48px;
font-size: 17px;
color: #777;
background: #f5f5f5;
}
.song_list {
margin: 10px 15px;
position: relative;
}
.song_name {
80%;
font-size: 18px;
color: black;
white-space: nowrap; /* 一行 */
overflow: hidden; /* 溢出隐藏 */
text-overflow: ellipsis; /* 超出内容显示省略号 */
margin-bottom: 5px;
}
.song_sq {
display: inline-block;
padding: 0 4px;
font-size: 10px;
border-radius: 4px;
border: 1px solid orange;
color: orange;
}
.song_detail {
display: inline-block;
margin-left: 16px;
font-size: 14px;
color: #888;
}
.song_enter {
position: absolute;
top: 14px;
right: 0;
}
</style>
这个项目的功能虽然不太多，也很简单，不过很完整，没有多余的代码，感觉看着很优雅
也许是因为在单曲Jay的歌曲呢~~
后记：听着Jay的歌曲，看着功能的实现，觉得很幸福