千峰商城-springboot项目搭建-32-vue案例练习-音乐播放器
很多同学没有这个播放器文件，可以加我QQ1226371240，记得备注播放器~
找到music-1.0.0.jar所在的文件夹，在地址栏直接输入cmd，回车。
在cmd中输入： "java -jar music-1.0.0.jar"，回车，启动项目。
在浏览器地址栏输入："http://localhost:9999/music/search?s=张杰"，测试是否启动成功。
在HBuilder中编写音乐播放器显示效果。
音乐搜索：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.css" /> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="container"> <input type="text" placeholder="歌曲名、歌手名" v-model="keyword" /><button type="button" @click="doSearch">搜索</button> <table class="table table-bordered table-condensed"> <tr> <th>序号</th> <th>歌曲ID</th> <th>歌曲名</th> <th>歌手</th> <th>专辑</th> <th>时长</th> <th>操作</th> </tr> <tr v-for="song,index in songs"> <td>{{index+1}}</td> <td>{{song.id}}</td> <td>{{song.name}}</td> <td> <span v-for="artist in song.artists"> {{artist.name}}</span> </td> <td>{{song.album.name}}</td> <td> {{ Math.floor ( Math.round(song.duration/1000)/60 ) <10 ? '0'+Math.floor ( Math.round(song.duration/1000)/60 ) : Math.floor ( Math.round(song.duration/1000)/60 ) }} : {{ Math.round(song.duration/1000)%60 <10 ? '0'+ Math.round(song.duration/1000)%60 : Math.round(song.duration/1000)%60 }} </td> <td> <span class="glyphicon glyphicon-play-circle" style="color: deepskyblue;"></span> </td> </tr> </table> </div> <script type="text/javascript"> var vm = new Vue({ el:"#container", data:{ keyword:"", songs:[] },methods:{ doSearch:function(){ console.log(vm.keyword); $.get("http://localhost:9999/music/search",{s:vm.keyword,limit:15,offset:0},function(res){ console.log(res); if(res.code==200){ //获取此关键词搜索的总记录数 var count = res.result.songCount; //获取音乐集合 var arr = res.result.songs; vm.songs = arr; } },"json"); } } }); </script> </body> </html>
测试：
给有mv的歌曲名后添加MV按钮：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.css" /> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="container"> <input type="text" placeholder="歌曲名、歌手名" v-model="keyword" /><button type="button" @click="doSearch">搜索</button> <table class="table table-bordered table-condensed"> <tr> <th>序号</th> <th>歌曲ID</th> <th>歌曲名</th> <th>歌手</th> <th>专辑</th> <th>时长</th> <th>操作</th> </tr> <tr v-for="song,index in songs"> <td>{{index+1}}</td> <td>{{song.id}}</td> <td> {{song.name}} <button type="button" v-if="song.mvid != 0" class="btn btn-primary btn-xs">MV</button> </td> <td> <span v-for="artist in song.artists"> {{artist.name}}</span> </td> <td>{{song.album.name}}</td> <td> {{ Math.floor ( Math.round(song.duration/1000)/60 ) <10 ? '0'+Math.floor ( Math.round(song.duration/1000)/60 ) : Math.floor ( Math.round(song.duration/1000)/60 ) }} : {{ Math.round(song.duration/1000)%60 <10 ? '0'+ Math.round(song.duration/1000)%60 : Math.round(song.duration/1000)%60 }} </td> <td> <span class="glyphicon glyphicon-play-circle" style="color: deepskyblue;"></span> </td> </tr> </table> </div> <script type="text/javascript"> var vm = new Vue({ el:"#container", data:{ keyword:"", songs:[] },methods:{ doSearch:function(){ console.log(vm.keyword); $.get("http://localhost:9999/music/search",{s:vm.keyword,limit:15,offset:0},function(res){ console.log(res); if(res.code==200){ //获取此关键词搜索的总记录数 var count = res.result.songCount; //获取音乐集合 var arr = res.result.songs; vm.songs = arr; } },"json"); } } }); </script> </body> </html>
音乐播放：
在HTML中建立音频播放器。
给播放按钮绑定点击事件触发的函数doPlay。
在doPlay中执行播放。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.css" /> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="container"> <input type="text" placeholder="歌曲名、歌手名" v-model="keyword" /><button type="button" @click="doSearch">搜索</button> <table class="table table-bordered table-condensed"> <tr> <th>序号</th> <th>歌曲ID</th> <th>歌曲名</th> <th>歌手</th> <th>专辑</th> <th>时长</th> <th>操作</th> </tr> <tr v-for="song,index in songs"> <td>{{index+1}}</td> <td>{{song.id}}</td> <td> {{song.name}} </td> <td> <span v-for="artist in song.artists"> {{artist.name}}</span> </td> <td>{{song.album.name}}</td> <td width="8%"> {{ Math.floor ( Math.round(song.duration/1000)/60 ) <10 ? '0'+Math.floor ( Math.round(song.duration/1000)/60 ) : Math.floor ( Math.round(song.duration/1000)/60 ) }} : {{ Math.round(song.duration/1000)%60 <10 ? '0'+ Math.round(song.duration/1000)%60 : Math.round(song.duration/1000)%60 }} </td> <td width="18%"> <button type="button" class="btn btn-success btn-xs" @click="doPlay" :data-mid="song.id">播放</button> <button type="button" v-if="song.mvid != 0" class="btn btn-primary btn-xs">播放MV</button> </td> </tr> </table> </div> <audio controls style="width: 100%;" src="" id="player"></audio> <script type="text/javascript" src="js/music.js"></script> <script type="text/javascript"> var player = document.getElementById("player"); var vm = new Vue({ el:"#container", data:{ keyword:"", songs:[], currentid:0 }, // computed:{ // musicurl:function(){ // //网易云音乐播放地址：http://music.163.com/song/media/outer/url?id=songId // return "http://music.163.com/song/media/outer/url?id="+this.currentid; // } // }, methods:{ doSearch:function(){ console.log(vm.keyword); $.get("http://localhost:9999/music/search",{s:vm.keyword,limit:15,offset:0},function(res){ console.log(res); if(res.code==200){ //获取此关键词搜索的总记录数 var count = res.result.songCount; //获取音乐集合 var arr = res.result.songs; vm.songs = arr; } },"json"); }, doPlay:function(event){ vm.currentid = event.srcElement.dataset.mid; player.src = "http://music.163.com/song/media/outer/url?id="+vm.currentid; player.play(); } } }); </script> </body> </html>
播放暂停切换：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.css" /> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="container"> <input type="text" placeholder="歌曲名、歌手名" v-model="keyword" /><button type="button" @click="doSearch">搜索</button> <table class="table table-bordered table-condensed"> <tr> <th>序号</th> <th>歌曲ID</th> <th>歌曲名</th> <th>歌手</th> <th>专辑</th> <th>时长</th> <th>操作</th> </tr> <tr v-for="song,index in songs"> <td>{{index+1}}</td> <td>{{song.id}}</td> <td> {{song.name}} </td> <td> <span v-for="artist in song.artists"> {{artist.name}}</span> </td> <td>{{song.album.name}}</td> <td width="8%"> {{ Math.floor ( Math.round(song.duration/1000)/60 ) <10 ? '0'+Math.floor ( Math.round(song.duration/1000)/60 ) : Math.floor ( Math.round(song.duration/1000)/60 ) }} : {{ Math.round(song.duration/1000)%60 <10 ? '0'+ Math.round(song.duration/1000)%60 : Math.round(song.duration/1000)%60 }} </td> <td width="18%"> <button type="button" v-if="song.id == currentid && status==1" class="btn btn-warning btn-xs" @click="doPause" :data-mid="song.id">暂停</button> <button type="button" v-else-if="song.id == currentid && status==0" class="btn btn-danger btn-xs" @click="doContinue" :data-mid="song.id">继续播放</button> <button type="button" v-else class="btn btn-success btn-xs" @click="doPlay" :data-mid="song.id">播放</button> <button type="button" v-if="song.mvid != 0" class="btn btn-primary btn-xs">播放MV</button> </td> </tr> </table> </div> <audio controls style="width: 100%;" src="" id="player"></audio> <script type="text/javascript" src="js/music.js"></script> <script type="text/javascript"> var player = document.getElementById("player"); var vm = new Vue({ el:"#container", data:{ keyword:"", songs:[], currentid:0, status:0 }, // computed:{ // musicurl:function(){ // //网易云音乐播放地址：http://music.163.com/song/media/outer/url?id=songId // return "http://music.163.com/song/media/outer/url?id="+this.currentid; // } // }, methods:{ doSearch:function(){ console.log(vm.keyword); $.get("http://localhost:9999/music/search",{s:vm.keyword,limit:15,offset:0},function(res){ console.log(res); if(res.code==200){ //获取此关键词搜索的总记录数 var count = res.result.songCount; //获取音乐集合 var arr = res.result.songs; vm.songs = arr; } },"json"); }, doPlay:function(event){ vm.currentid = event.srcElement.dataset.mid; player.src = "http://music.163.com/song/media/outer/url?id="+vm.currentid; player.play(); vm.status = 1; }, doPause:function(){ player.pause(); vm.status = 0; }, doContinue:function(){ player.play(); vm.status = 1; } } }); </script> </body> </html>
