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

最新推荐文章于 2024-08-09 09:32:19 发布

野人小哥哥

最新推荐文章于 2024-08-09 09:32:19 发布

阅读量321

点赞数 1

分类专栏： Vue 文章标签： vue javascript js html

本文链接：https://blog.csdn.net/pf6668/article/details/108931064

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

概述：本教程仅实现了功能逻辑代码，不包含前端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>