综合应用（播放歌曲）

播放器

• 由于黑马程序员给的接口部分已经用不了。所有只实现了可以播放歌曲的功能
• 说实话五月天的《温柔》好好听呀。。。
• 原理大概就是请求接口后获取到数据，展示到前端页面就行了，没学过html所以一切就以实现功能为主了。
• 《温柔》-五月天

main.js文件

var app = new Vue({
    el:'#app',
    data:{
        query:'',
        musicList:[],
        musciUrl:[],
    },
    methods:{
        getImg:function(){
            axios.get("https://api.imjad.cn/cloudmusic/?type=detail&id=1897964065")
            .then(function(response){
                console.log(response);
            },function(err){
                console.log(err);
            })
        },
        searchMusic:function(){
            var that = this;
            axios.get("https://autumnfish.cn/search?keywords="+this.query)
            .then(function(response){
                that.musicList = response.data.result.songs;
                for (let index = 0; index < that.musicList.length; index++) {
                    that.musciUrl.push("https://music.163.com/song/media/outer/url?id="+that.musicList[index].id)
                }
                console.log(that.musicList);
            },function(err){
                console.log(err);
            })
            console.log(that.musciUrl);
        },
    }
})

html文件

<div id="app" >
        <div>
            <input type="text" v-model='query' autocomplete="off" @keyup.enter='searchMusic'>
        </div>
        <div style="display: flex;" v-for='(item,index) in musicList'>
            <div @click='getImg(musciUrl[index])'>
                <audio ref='audio' :src="musciUrl[index]"
                controls
                loop>
               </audio>
            </div>
            
            {{item.name}}
            <div>
                <img src="" alt="">
            </div>
            <div>

            </div>
        </div>
    </div>
    <script src="./main.js"></script>

• 效果图