- 💻 Love the Front-end
- 🏢 Living in Shanghai
- 🎧 Like to listen to music
- 🎮 Like playing game
mluminary / chickenmusic Goto Github PK
View Code? Open in Web Editor NEW:baby_chick: ChickenMusic
Home Page: https://music.haoqinzz.cn/#/
:baby_chick: ChickenMusic
Home Page: https://music.haoqinzz.cn/#/
chicken music 项目我已经完成,项目可以正常运行,音乐播放路径也已经接通。需要源代码可以找我:WeChat:13751817115,或者使用私人电邮联系我:[email protected]
https://y.qq.com/portal/player.html
在开发者工具的 network
中找到 type
为 media
的请求
参数
继续找会发现此请求, 此请求的返回结果为下图
进一步查看此请求的 headers
,除了 songmid
和 filename
都是常量
这里需要注意,获取 vkey
的请求不能直接发起,因为此网站设置了 referer
,因此需要用后台代理伪造设定的 referer
网址发起请求
前台代码
// config.js
export const commonParams = {
g_tk: 5381,
inCharset: 'utf-8',
outCharset: 'utf-8',
notice: 0,
format: 'jsonp'
}
// name of callback
export const options = {
param: 'jsonpCallback'
}
export const ERR_OK = 0
// song.js
// 获取歌曲来源
import axios from 'axios'
import { commonParams } from './config'
export function getMusicSource(mid) {
// 前台请求的本地 url
const url = '/api/getSongVkey'
const data = Object.assign({}, commonParams, {
songmid: mid,
filename: 'C400' + mid + '.m4a',
guid: 2180150330,
platform: 'yqq',
loginUin: 0,
hostUin: 0,
needNewCode: 0,
format: 'json',
cid: 205361747,
uin: 0
})
return axios
.get(url, {
params: data
})
.then(res => {
return Promise.resolve(res.data)
})
}
后台代理
const ReqHeader = {
referer: 'https://c.y.qq.com/',
host: 'c.y.qq.com'
}
app.get('/api/getSongVkey', function(req, res) {
// qq 音乐获取 vkey
const url =
'https://c.y.qq.com/base/fcgi-bin/fcg_music_express_mobile3.fcg'
// 修改请求头去获取数据
axios
.get(url, {
headers: {
referer: ReqHeader.referer,
host: ReqHeader.host
},
params: req.query // 将发送过来的数据接收再当参数传递
})
.then(response => {
res.json(response.data)
})
.catch(e => {
console.log(e)
})
})
}
在前台页面中调用 getMusicSource(songmid)
即可获得 vkey
, songmid
的获取在这就不详细说明,只需用 jsonp
方式获取就可以了,然后歌曲源 url 的拼接为
url: `http://dl.stream.qqmusic.qq.com/C400${
musicData.songmid
}.m4a?vkey=${songVkey}&guid=2180150330&uin=0&fromtag=66`
解决方案:
1、注册处理函数时,用如下方式,明确声明为不是被动的
window.addEventListener('touchmove', func, { passive: false })
2、应用 CSS 属性 touch-action: none;
这样任何触摸事件都不会产生默认行为,但是 touch
事件照样触发。
touch-action 还有很多选项,详细请参考touch-action
前几天发现自己搜索页面出了点问题,搜索结果无法获取,发现好像做了跨域处理,于是还是用老方法修改请求头去获取到对应数据,但是返回的是 jsonp 格式的数据。然后 jsonp 转 json 便如下
let num1 = res.indexOf('(')
let num2 = res.lastIndexOf(')')
let resultData = JSON.parse(res.substring(num1 + 1, num2))
<ul v-for="item in sequenceList">
<li ref="listItem">{{item}}</li>
</ul>
当动态向 sequenceList
插入内容时,即使你插入的数据在 sequenceList
的前面或者中间,用 this.$refs.listItem
获取的时候,你都会发现你插入的数据在最后
对于限制 referer 的 api 接口,我们可以伪造
app.get('/api/getDiscList', function(req, res) {
axios
.get(url, {
headers: {
referer: ReqHeader.referer,
host: ReqHeader.host
},
params: req.query
})
.then(response => {
res.json(response.data)
})
.catch(e => {
console.log(e)
})
})
})
添加其 url , 然后设置它期望的 referer 和 host 进行访问获取数据, 这样访问 本地链接/api/getDiscList
就被添加请求头并代理到受限的网址获取其数据
error in ./src/App.vue
Module build failed: Error: No parser and no file path given, couldn't infer a parser.
at normalize (D:\haoqin\workspace\gitMaster\HamsterMusic\node_modules\prettier\index.js:7051:13)
at formatWithCursor (D:\haoqin\workspace\gitMaster\HamsterMusic\node_modules\prettier\index.js:10370:12)
at D:\haoqin\workspace\gitMaster\HamsterMusic\node_modules\prettier\index.js:31115:15
at Object.format (D:\haoqin\workspace\gitMaster\HamsterMusic\node_modules\prettier\index.js:31134:12)
at Object.module.exports (D:\haoqin\workspace\gitMaster\HamsterMusic\node_modules\vue-loader\lib\template-compiler\index.js:80:23)
@ ./src/App.vue 11:0-354
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
error in ./src/components/HelloWorld.vue
Module build failed: Error: No parser and no file path given, couldn't infer a parser.
at normalize (D:\haoqin\workspace\gitMaster\HamsterMusic\node_modules\prettier\index.js:7051:13)
at formatWithCursor (D:\haoqin\workspace\gitMaster\HamsterMusic\node_modules\prettier\index.js:10370:12)
at D:\haoqin\workspace\gitMaster\HamsterMusic\node_modules\prettier\index.js:31115:15
at Object.format (D:\haoqin\workspace\gitMaster\HamsterMusic\node_modules\prettier\index.js:31134:12)
at Object.module.exports (D:\haoqin\workspace\gitMaster\HamsterMusic\node_modules\vue-loader\lib\template-compiler\index.js:80:23)
@ ./src/components/HelloWorld.vue 11:0-366
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
npm i prettier@~1.12.0
重新运行:
npm run dev
原因是prettier 更新到1.13.0导致的
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.