Vue+axio实现在线音乐播放器

概述：本教程仅实现了功能逻辑代码，不包含前端CSS样式。
工具：IntelliJ IDEA 2018

一，导入开发必要的环境

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 官网提供的在线axios地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

二，设计页面展示效果

<div id="app"><input type="text" v-model="name" placeholder="请输入歌手或者歌曲名" @keyup.enter="searchAll"><button @click="searchAll">搜索</button><br><audio ref="audio" v-bind:src="musicUrl" controls autoplay loop></audio><ul><li v-for="item in songs">{{item.name}}<a href="javascript:;" @click="playMusic(item.id)">播放</a></li></ul>
</div>

三，填写点击响应事件

<script>var app = new Vue({el:"#app",data:{name:"",songs:[],musicUrl:""},methods:{searchAll:function () {var that = this;axios.get("https://autumnfish.cn/search?keywords="+this.name).then(function (response) {console.log(response.data.result.songs);that.songs = response.data.result.songs;}).catch(function (err) {  })},playMusic:function (musicId) {var that = this;axios.get("https://autumnfish.cn/song/url?id="+musicId).then(function (response) {console.log(response);that.musicUrl = response.data.data[0].url;}).catch(function (err) {  })}}})
</script>

四，效果展示：

Vue+axio实现在线音乐播放器相关推荐

java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署本源码技 ...
java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署本源 ...
JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库本源码技术栈: 项目 ...
android 带记忆功能的播放器源码,【全开源可二开】带后台管理面板的在线音乐播放器Android应用APP源码...
这是一款带后台管理面板的在线音乐播放器Android应用APP源码,可让您更快地构建在线和离线android音频播放器,代码全开源适合二次开发.该源码自带2个紫色和橙色主题(允许您添加更多主题),多语 ...
python播放在线音乐_Python实现在线音乐播放器
最近这几天,学习了一下python,对于爬虫比较感兴趣,就做了一个简单的爬虫项目,使用Python的库Tkinsert做了一个界面,感觉这个库使用起来还是挺方便的,音乐的数据来自网易云音乐的一个接口, ...
python播放网络音乐_python使用Tkinter实现在线音乐播放器
本文实例使用Tkinter实现在线音乐播放器的具体代码,供大家参考,具体内容如下 1.先使用Tkinter库写界面 2.写点击按钮触发的事件 (1).使用网易音乐的api,返回数据包装成json格式数 ...
【简短测评】在线音乐播放器，哪一款适合写代码时候使用
在线音乐播放器简短测评如果写代码时总想听听音乐如果写代码时总想听听音乐我是个写代码时候不想让耳朵闲下来的人.听英语练听力,占用了脑子,代码也写不好,所以只能听歌,不用往脑子里进的那种. 一直以来 ...
java计算机毕业设计vue开发一个简单音乐播放器（附源码、数据库）
java计算机毕业设计vue开发一个简单音乐播放器(附源码.数据库) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ec ...
非常简洁的vsPlayAudio在线音乐播放器插件
非常简洁的vsPlayAudio在线音乐播放器插件. 简介 1.暂时只支持网易云音乐之后添加本地音频 2.暂时不支持手机端(未测试) 3.版本初期可能会有BUG 使用方法 <head> & ...
MKOnlinePlayer在线音乐播放器
文章目录[隐藏] 简介界面欣赏注意事项常见问题简介 MKOnlineMusicPlayer 是一款开源的基于 Meting 的在线音乐播放器.具有音乐搜索.播放.下载.歌词同步显示.个人网易云 ...

Vue+axio实现在线音乐播放器

Vue+axio实现在线音乐播放器相关推荐

最新文章

热门文章