avatar
文章
46
标签
47
分类
9
首页
时间轴
关于&留言
更多
洁癖Man
首页
时间轴
关于&留言
更多
Vue-网页版音乐播放器实现（网易云音乐源）
|网页
字数总计:1.3k|阅读时长: 7 分钟
|阅读量:|评论数:

一、页面展示（后续还会完善功能）

image.png

二、已完成功能

1、搜索功能

2、音乐列表展示

3、歌曲图片展示和图片背景虚化效果

4、音乐播放动态效果

5、音乐暂停以及上下首切换

6、音乐时长获取及格式化

三、未完成功能

1、歌曲正在播放标识

2、播放模式

3、歌曲播放进度

4、音量调整

5、歌曲评论

四、页面代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>音乐播放器</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="fonts/iconfont.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/player.css" />

</head>
<body>

<div style="text-align:center;clear:both;">
</div>

<!-- 播放器 -->
<div class="music-player" id="player">
	<div class="col-lg-6" style="margin-bottom: 20px;float: none;width:100%;align:center">
		<div class="input-group">
		  <input v-model="query" @keyup.enter="searchMusic" type="text" class="form-control" placeholder="查找歌曲">
		  <span class="input-group-btn">
			<button class="btn btn-default" type="button" @click="searchMusic">搜索</button>
		  </span>
		</div><!-- /input-group -->
	  </div><!-- /.col-lg-6 -->
	<!-- audio标签 -->
	<audio ref="audio" class="music-player__audio" :src="musicUrl" autoplay="autoplay"></audio>
	<!-- 播放器主体 -->
	<div class="music-player__main">
		<!-- 模糊背景 -->
		<div class="music-player__blur" :style="{'backgroundImage':'url('+picUrl+')'}"></div>
		<!-- 唱片 -->
		<div class="music-player__disc">
			<!-- 唱片图片 -->
			<div class="music-player__image">
				<img width="100%" :src="picUrl" alt="">
			</div>
			<!-- 指针 -->
			<div  class="music-player__pointer" :class="play"><img width="100%" src="./images/cd_tou.png" alt=""></div>
		</div>
		<!-- 控件主体 -->
		<div class="music-player__controls">
			<!-- 歌曲信息 -->
			<div class="music__info">
				<h3 class="music__info--title" v-text="musicName"></h3>
				<p class="music__info--singer" v-text="artist"></p>
			</div>
			<!-- 控件... -->
			<div class="player-control">
				<div class="player-control__content">
					<div class="player-control__btns">
						<div class="player-control__btn player-control__btn--prev"><i class="iconfont icon-prev" @click="musicChange('pre')"></i></div>
						<div class="player-control__btn player-control__btn--play"><i  @click="musiccl" :class="pause"></i></div>
						<div class="player-control__btn player-control__btn--next"><i class="iconfont icon-next" @click="musicChange('next')"></i></div>
						<div class="player-control__btn player-control__btn--mode"><i class="iconfont icon-loop"></i></div>
					</div>
					<div class="player-control__volume">
						<div class="control__volume--icon player-control__btn"><i class="iconfont icon-volume"></i></div>
						<div class="control__volume--progress progress"></div>
					</div>
				</div>

				<!-- 歌曲播放进度 -->
				<div class="player-control__content">
					<div class="player__song--progress progress"></div>
					<div class="player__song--timeProgess nowTime">00:00</div>
					<div class="player__song--timeProgess totalTime"><span v-text="totalTime"></span></div>
				</div>

			</div>

		</div>
	</div>
	<!-- 歌曲列表 -->
	<div class="music-player__list">
		<ul class="music__list_content">
			<li class="music__list__item" :class="playing" v-for="(item,index) in musicList" @click="playMusic(item.id,item.name,item.artists[0].name,index)"><span style="color:aliceblue;">{{ item.name }}</span>&nbsp;&nbsp;&nbsp;&nbsp;{{ item.artists[0].name }}</li>
		</ul>
	</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

五、Js 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
var app = new Vue({
    el:"#player",
    data:{
        //查询关键字
        query:"",
        //歌曲数组
        musicList:[],
        //歌曲地址
        musicUrl:"",
        //歌曲播放图标切换
        pause:"iconfont icon-play",
        playing:"music__list__item",
        //歌曲名
        musicName:"...",
        //作者
        artist:"...",
        //图片路径
        picUrl:"",
        //指针状态
        play:"",
        //歌曲在数组中的位置
        musicIndex:0,
        totalTime:"00:00"
    },
    methods:{
        //歌曲搜索
        searchMusic:function(){
            var that=this;
            axios.get("https://autumnfish.cn/search?keywords="+this.query)
            .then(function(response){
                that.musicList=response.data.result.songs;
                console.log(response)
            },function(err){})
        },
        //歌曲播放
        playMusic:function(musicId,musicname,artist,index){
            this.play="play";
            this.musicIndex=index;

            //获取点击歌曲url并播放
            var that=this;
            axios.get("https://autumnfish.cn/song/url?id="+musicId)
            .then(function(response){
                that.musicUrl=response.data.data[0].url;
                that.pause="iconfont icon-pause";
                that.playing="music__list__item play";
                that.musicName=musicname;
                that.artist=artist;
                console.log(response)
            },function(err){})

            //获取时长
            totalMinute = parseInt(this.$refs.audio.duration / 60) < 10 ? "0" + parseInt(this.$refs.audio.duration / 60) : parseInt(this.$refs.audio.duration / 60);
            totalSecond = parseInt(this.$refs.audio.duration % 60) < 10 ? "0" + parseInt(this.$refs.audio.duration % 60) : parseInt(this.$refs.audio.duration % 60);
            this.totalTime = totalMinute +":"+ totalSecond;
            console.log(this.totalTime)
            

            //歌曲详情获取
            axios.get("https://autumnfish.cn/song/detail?ids="+musicId)
            .then(function(response){
                console.log(response.data.songs[0].al.picUrl)
                that.picUrl=response.data.songs[0].al.picUrl;
            },function(err){})
        },
        //歌曲播放与暂停切换
        musiccl:function(){
            if(this.pause=="iconfont icon-pause"){
                this.$refs.audio.pause();
                this.pause="iconfont icon-play";
                this.play=""
            }else{
                this.$refs.audio.play();
                this.pause="iconfont icon-pause";
                this.play="play"
            }
        },
        //歌曲切换
        musicChange:function(changeid){
            index=this.musicIndex;
            if( index>=0 && index<=this.musicList.length){
                //上一首
                if(changeid=="pre" && index>0){
                    musicId=this.musicList[index-1].id;
                    musicname=this.musicList[index-1].name;
                    artist=this.musicList[index-1].artists[0].name;
                    this.playMusic(musicId,musicname,artist,index-1);
                }
                //下一首
                if(changeid=="next" && index<this.musicList.length){
                    musicId=this.musicList[index+1].id;
                    musicname=this.musicList[index+1].name;
                    artist=this.musicList[index+1].artists[0].name;
                    this.playMusic(musicId,musicname,artist,index+1);
                }
            }
        }
    }
})

六、项目完整代码

完善后会上传GitHub

VueAxios
相关推荐
2020-04-12
Vue+Axios 实现天气查询
2020-04-12
Vue+BootStrap实现简单网页记事本
评论
繁