2021-7-6 vue音乐播放器 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div  id="app" >
<div style="align-item:top">
<input type="text" placeholder="歌曲名称" v-model="musicName">
<input type="button" value="搜索" @click="getMusic">
</div>
    <div><audio controls>  
<source src="horse.mp3" >
</audio></div>
<div>
<ul>
    <li v-for="i in musicList" style="list-style:none">
    <input type="button" value="播放" @click="playMusic(i.id)">    
        {{i.name}}<div style="margin-top:10px"></div></li>
</ul> 
</div>
</div>
    
<script>
new Vue({
el: '#app',
data: {
musicName:'六月',
musicList:[]
},
methods:{
getMusic:function(){
 var t=this;
axios.get("https://autumnfish.cn/search?keywords="+t.musicName)
     .then(function(response){
     t.musicList=response.data.result.songs;
     console.log(t.musicList[0]);
     },function(err){});
   },
playMusic:function(musicId){
axios.get("https://music.liuzhijin.cn/?id="+musicId+"&type=netease")
     .then(function(response){
     console.log(response);
     },function(err){});
   }
  }
})
</script>
</body>
</html>

 

posted @ 2021-07-02 09:59  月长生  阅读(41)  评论(0)    收藏  举报