Wincer's Blog
·
QQ 音乐外链解析
内容提要
文章讨论了网易云音乐接口更换后，作者尝试使用QQ音乐的API获取歌曲链接。通过构建请求地址和解析返回的JSON数据，成功获取了歌曲的真实链接。由于跨域问题，作者使用JSONP进行客户端解析，并封装了相关接口。最后，分享了项目的开源代码，并反思了学习JavaScript的过程。
关键要点
-
网易云音乐接口更换导致旧接口返回403，作者决定使用QQ音乐的API。
-
QQ音乐的请求地址和参数包括songmid、filename和guid，构建请求后可获取JSON格式的数据。
-
从返回的数据中提取vkey字段，可以解析出歌曲的真实链接。
-
由于接口请求地址只支持国内，作者尝试使用JavaScript在客户端解析，解决跨域问题。
-
使用JSONP进行跨域请求，封装了getJSONP()接口以配合getMusic()使用。
-
项目已开源，使用ES7的async和await特性，需注意浏览器兼容性。
-
学习JavaScript过程中，作者反思了实战学习的重要性，并分享了个人学习体验。
延伸解读
跨域请求的解决方案
在处理跨域请求时，作者选择了使用JSONP而非CORS。这是因为CORS需要服务器端的支持，而JSONP则可以通过动态创建script标签来实现。读者在实现类似功能时，应注意JSONP的返回格式必须符合特定的模式，以确保数据能够正确解析。
接口的有效性与过期问题
文章提到获取的vkey有有效期，过期后将无法使用。这意味着在实际应用中，需要定期更新请求以获取新的vkey，或者将请求部署在支持国内访问的服务器上，以确保持续获取有效的歌曲链接。
学习JavaScript的实战经验
作者在学习JavaScript过程中强调了实战的重要性。通过解决实际问题，学习者能够更快掌握知识并避免理论学习中的空洞感。这一经验对初学者尤其重要，建议在学习新技术时结合项目实践。
延伸问答
为什么网易云音乐的接口无法使用？
因为网易云音乐更换了新的接口，旧接口返回403错误。
如何使用QQ音乐的API获取歌曲链接？
通过构建请求地址，使用songmid、filename和guid参数请求QQ音乐的API，解析返回的JSON数据中的vkey字段即可获取真实链接。
跨域请求的问题如何解决？
可以使用JSONP进行跨域请求，因为CORS需要服务器端设置，而JSONP不需要。
项目的开源代码在哪里可以找到？
项目的开源代码可以在作者提供的链接中找到，包含详细注释。
使用async和await特性有什么注意事项？
使用async和await时，调用getMusic()时必须加上await关键字，否则返回的是Promise对象。
作者在学习JavaScript过程中有什么反思？
作者认为实战学习的重要性，解决问题的目的学习比单纯学习更有效。
