前端Java音乐

阅读: 评论:0

前端Java音乐

前端Java音乐

前言:自己学习VUEJS也一段时间,但一直没有做出来一东西。我自己一直喜欢用网易云音乐app,于是乎就做了这个app。

技术栈

vue全家桶 (vue vue-router vuex)

axios

Muse-UI(一个基于Vue2.x的material design 风格UI框架)

功能与思路分析

我之前学习JS的时候对Html5 audio研究过,也写过一些例子,那时的功能并不是很全面。在写这个程序之前,我好好的查阅了当前的HTML5中的audio标签,发现园子上一位园友总结的很不错(这里)。于是就先把网易云音乐最基本的功能实现,歌单部分(这也是我喜欢网易云音乐的原因这一),然后实现音乐的上一曲、下一曲,播放、暂停。列表功能。

后台

后台采用做为后台提供系统请求所用的API(源码),原理很简单就是用伪装成一个客户端去访问网易云音乐的API然后,把返回的json数据转发出来。同时服务端做下跨域处理。

核心代码:

///

/// 请求网易云音乐接口

///

/// 要请求的接口类型

/// 要请求的接口类型的对象

/// 请求结果(JSON)

public static string Request(T config) where T : RequestData, new()

{

// 请求URL

string requestURL = config.Url;

// 将数据包对象转换成QueryString形式的字符串

string @params = config.FormData.ParseQueryString();

bool isPost = config.Method.Equals("post", StringComparison.CurrentCultureIgnoreCase);

if (!isPost)

{

// get方式 拼接请求url

string sep = requestURL.Contains('?') ? "&" : "?";

requestURL += sep + @params;

}

HttpWebRequest req = (HttpWebRequest)WebRequest.Create(requestURL);

req.Accept = "*/*";

req.Headers.Add("Accept-Language", "zh-CN,zh;q=0.8,gl;q=0.6,zh-TW;q=0.4");

// 如果服务端启用了GZIP,那么下面必须解压,否则一直乱码。

// 参见:/

req.Headers.Add("Accept-Encoding", "gzip,deflate,sdch");

req.ContentType = "application/x-www-form-urlencoded";

req.KeepAlive = true;

req.Host = "music.163";

req.Referer = "/";

req.UserAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.152 Safari/537";

// 设置cookies

req.Headers["Cookie"] = "appver=1.5.2";

req.Method = config.Method;

req.AutomaticDecompression = DecompressionMethods.GZip;

if (isPost)

{

// 写入post请求包

byte[] formData = Encoding.UTF8.GetBytes(@params);

// 设置HTTP请求头 参考:.py

req.GetRequestStream().Write(formData, 0, formData.Length);

}

// 发送http请求 并读取响应内容返回

return new StreamReader(req.GetResponse().GetResponseStream(), Encoding.GetEncoding("UTF-8")).ReadToEnd();

}

vuejs部分

项目结构

├── index.html

├── main.js

├── api

│ └── ... # 抽取出API请求

├── components

│ ├── playBar.vue

│ └── ...

└── store

│ └── index.js # 整个项目的vuex部分

└── router

│ └── router.js # 整个项目的路由

└── utils # 一些工具类模块

└── views # 项目中的一些route-view

说项目的路由之前,先来看一张效果图

对于整个项目来说:视图区别在于顶部导航,下面的bar的是否出来取决于,当前系统列表中是否有歌曲,如果有就会出现。

router.js核心部分

const router = new VueRouter({

mode: 'history',

routes: [{

path: '/index',

component: require('../views/index'),

children: [

{

path: 'rage',

component: require('../views/rage')

},

{

path: 'songList',

component: require('../views/songList')

},

{

path: 'leaderBoard',

component: require('../views/leaderBoard')

},

{

path: 'hotSinger',

component: require('../views/hotSinger')

}

]

}, {

name: 'playerDetail',

path: '/playerDetail/:id',

component: require('../views/playerDetail')

}, {

path: '/playListDetail/:id',

name: 'playListDetail',

component: require('../views/playListDetail')

}, {

path: '*', redirect: '/index/rage'

}],

// 让每个页面都滚动到顶部,改变模式为mode: history

scrollBehavior (to, from, savedPosition) {

if (savedPosition) {

return savedPosition

} else {

return { x: 0, y: 0 }

}

}

})

vuex部分

这部分,主要是歌曲这一块,因为不同的页面有不同的使用到了歌曲信息,把把这部分数据放到vuex中做统一的数据处理!

sotre/index.js

const store = new Vuex.Store({

state: {

audio: {

'id': 0,

'name': '歌曲名称',

'singer': '演唱者',

'albumPic': '/static/player-bar.png',

'location': '',

'album': ''

},

lyric: '正在加载中。。',

currentIndex: 0, // 当前播放的歌曲位置

playing: false, // 是否正在播放

loading: false, // 是否正在加载中

showDetail: false,

songList: [], // 播放列表

currentTime: 0,

tmpCurrentTime: 0,

durationTime: 0,

bufferedTime: 0,

change: false // 判断是更改的时间还是播放的时间

},

getters: {

audio: state => state.audio,

playing: state => state.playing,

loading: state => state.loading,

showDetail: state => state.showDetail,

durationTime: state => state.durationTime,

currentIndex: state => state.currentIndex,

bufferedTime: state => state.bufferedTime,

tmpCurrentTime: state => pCurrentTime,

songList: state => state.songList,

change: state => state.change,

currentTime: state => state.currentTime,

prCurrentTime: state => {

return state.currentTime / state.durationTime * 100

},

prBufferedTime: state => {

return state.bufferedTime / state.durationTime * 100

}

},

mutations: {

play (state) {

state.playing = true

},

pause (state) {

state.playing = false

},

toggleDetail (state) {

state.showDetail = !state.showDetail

},

setAudio (state) {

state.audio = state.songList[state.currentIndex - 1]

},

setAudioIndex (state, index) {

state.audio = state.songList[index]

state.currentIndex = index + 1

},

removeAudio (state, index) {

state.songList.splice(index, 1)

state.audio = state.songList[index - 1]

state.currentIndex = state.currentIndex - 1

if (state.songList.length === 0) {

state.audio = {

'id': 0,

'name': '歌曲名称',

'singer': '演唱者',

'albumPic': '/static/player-bar.png',

'location': '',

'album': ''

}

state.playing = false

}

},

setChange (state, flag) {

state.change = flag

},

setLocation (state, location) {

state.audio.location = location

},

updateCurrentTime (state, time) {

state.currentTime = time

},

updateDurationTime (state, time) {

state.durationTime = time

},

updateBufferedTime (state, time) {

state.bufferedTime = time

},

changeTime (state, time) {

},

openLoading (state) {

state.loading = true

},

closeLoading (state) {

state.loading = false

},

resetAudio (state) {

state.currentTime = 0

},

playNext (state) { // 播放下一曲

state.currentIndex++

if (state.currentIndex > state.songList.length) {

state.currentIndex = 1

}

state.audio = state.songList[state.currentIndex - 1]

},

playPrev (state) { // 播放上一曲

state.currentIndex--

if (state.currentIndex < 1) {

state.currentIndex = state.songList.length

}

state.audio = state.songList[state.currentIndex - 1]

},

addToList (state, item) {

var flag = false

state.songList.forEach(function (element, index) { // 检测歌曲重复

if (element.id === item.id) {

flag = true

state.currentIndex = index + 1

}

})

if (!flag) {

state.songList.push(item)

state.currentIndex = state.songList.length

}

},

setLrc (state, lrc) {

state.lyric = lrc

}

},

// 异步的数据操作

actions: {

getSong ({commit, state}, id) {

commit('openLoading')

<(Song(id)).then(res => {

// 统一数据模型,方便后台接口的改变

var url = res.data.data[0].url

commit('setAudio')

commit('setLocation', url)

})

},

getLrc ({commit, state}, id) {

commit('setLrc', '[txt](加载中。。。')

<(Lrc(id)).then(res => {

// 1、先判断是否有歌词

if (lyric) {

commit('setLrc', '[txt](⊙0⊙) 暂无歌词')

} else {

console.log(res.data.lrc.lyric)

commit('setLrc', res.data.lrc.lyric)

}

})

}

}

})

最后上点项目截图

目前只完成app歌单部分,也是最核心的部分。这个项目会一直更新!如果觉的不错就给个star吧

本文发布于:2024-01-28 06:16:38,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/17063938045399.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:音乐   Java
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23