超喜欢边听歌边开心到飞起来的感觉对不对?想不想亲手做个独一无二的音乐盒？不要着急，我马上教你如何利用Vue framework和网易云API轻松搞定这个超级好玩的小东西。
1. 开始前的准备工作
先安个Node.js，玩vue项目要用！然后，麻溜儿地在命令行输入个指令，就搞定全新的vue项目！
bash vue create my-music-playervue create music-player不用着急直接找个默认配置，电脑会自动帮你搞定项目。就像建音乐播放器一样，地基稳了才能保证后续工程不倒
2. 安装必要的库
cd music-player npm install axios --Save太棒了！快来下载这些神奇的软件！比如那个叫Axios的工具，能帮助咱们轻易地发出HTTP请求获得海量歌曲资源。直接进入你的文件夹，按照我说的步骤做就行啦：
npm install axios
这一步就像是给你的房子添砖加瓦，每块砖都很重要。
3. 获取网易云API的访问密钥
import axios from 'axios'; const API_BASE_URL = 'https://api.music.163.com'; export default { async searchSongs(keyword) { const response = await axios.get( `${API_BASE_URL}/search?keywords=${encodeURIComponent(keyword)}` ); return response.data; }, async getSongUrl(id) { const response = await axios.get(`${API_BASE_URL}/song/url?id=${id}`); return response.data; }, };想用网易云API？首先得搞定密码。别急，去网易云的官网注册个开发者账号，接着创建个应用，然后就能获得一串密码！这个叫做你和网易云互动的“身份证”，没了它，网易云的功能可就没法用
4. 封装API请求
搞定我新建了个叫api.js的文件，用来连网易云API。这样就能帮你搞点好玩的事，比如在小程序里搜歌，给歌曲找播放链接什么的。用起来方便得很，就好像有超能力似的，信息处理分分钟完成。
5. 创建音乐播放器组件
来，我们就来搞一个叫做 “player.vue” 的小东西，它可是个好用的音乐播放器。这个家伙能帮你找到心仪的歌曲，还能看到你收藏的歌单。只需要在搜索框输入关键词，选好想听的曲子再点开歌单就行，操作简单得像玩手机音乐播放器那样，毫无难度！
import api from '@/api'; export default { data() { return { searchKeyword: '', // 搜索关键字 songs: [], // 搜索结果 currentSongUrl: '', // 当前播放音乐的URL }; }, methods: { async searchSongs() { const response = await api.searchSongs(this.searchKeyword); this.songs = response.result.songs; }, async playSong(id) { const response = await api.getSongUrl(id); this.currentSongUrl = response.data[0].url; }, }, }; .player { max-width: 600px; margin: auto; padding: 20px; text-align: center; } input { width: 100%; height: 40px; margin-bottom: 10px; padding: 0 10px; } ul { list-style: none; padding: 0; } li { cursor: pointer; margin-bottom: 10px; } audio { width: 100%; margin-top: 20px; }
- {{ song.name }}
6. 绑定播放功能
别忘记了，这个Player.vue能看着HTML5音频标签放歌。把你喜欢的歌网址丢到 src 里，音乐马上就响起来，感觉就像给播放器续上一大口能量！
7. 注册组件并运行项目
搞定在Main.js加个‘start.Vue’就行了，一启动项目就能跑起来。上网页，输地址，看看效果！立马就弹出播放器界面，像是接上电似的，爽的不行，赶紧听听歌！
import Vue from 'vue'; import App from './App.vue'; import Player from './Player.vue'; Vue.component('Player', Player); new Vue({ render: h => h(App), }).$mount('#app');8. 进一步扩展功能
这个播放器挺好用的，自己开来去修复修复也是没问题的。比如，往里面添加歌单、换封面啥的都是随心所欲！对了，还有网易云音乐上的各种API接口可用，找找歌名看看歌词这些小事儿，统统都可以搞定！这番操作下来后，你的播放器肯定焕然一新，更加厉害了？
npm run serve9. 总结与展望
搞定！我用Vue和网易云API搞出了个简单的音乐播放器，虽然功能还有点弱，但是以后还能增色不少！希望你们也试试看，搞出自己的播放器来！
10. 互动环节
小伙伴们，你们想要变得更厉害吗？快来评论区跟我聊聊！别忘了订阅和分享哈~
原文链接：https://www.icz.com/technicalinformation/web/2024/07/19177.html，转载请注明出处~~~
评论0