vue..js 编写的简单音乐播放器

闲暇之余写了一个音乐小应用

vue..js编写的简单音乐播放器

项目目录

vue..js编写的简单音乐播放器

代码开始 index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>每日推荐音乐</title>
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="./css/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
    <div id="app" class="r-music" v-clock>
        <div class="header">
            <div class="music-info flex">
                <img class="img" :src="music.image">
                <div>
                    <h2 class="name">{{ music.title }}</h2>
                    <p class="author">{{ music.author }}</p>
                </div>
            </div>
        </div>
        <music-list id="music-list" :musicId="music.id" v-on:change-music="changeMusic"></music-list>
        <r-player :music="music"></r-player>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
    <script type="text/javascript" src="./js/request.js"></script>
    <script type="text/javascript" src="./js/api/music.js"></script>
    <script type="text/javascript" src="./js/components/player.js"></script>
    <script type="text/javascript" src="./js/components/musicList.js"></script>
    <script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            music: {
                id: 3,
                thumb: '',
                author: '',
                title: '',
            },
            musicList: [
            ]
        },
        methods: {
            changeMusic (music) {
                this.music = music;
                console.log(music.id)
            }
        },
        created () {
            let height = window.screen.height - 200 - 60 - 50;
            document.getElementById('music-list').style.height = height + 'px';
        }
    });
    </script>
</body>
</html>

/js/request.js

const baseUrl = 'http://xxxxx.com';
axios.defaults.baseURL = baseUrl
axios.interceptors.response.use(function (response) {
    if (response.status == 200) {
        return response.data
    }
    return response.data
})
function request (url, data, method = 'get') {
    return axios.get(url)
}

/js/components/musicList.js

Vue.component('music-list', {
    data: function () {
        return {
            musicList: []
        }
    },
    props: ['musicId'],
    template: `
    <div class="music-list">
        <div v-for="(item, key) in musicList" class="music-item  flex" :class="item.id == musicId ? 'active' : ''" @click="handeClickMusic(item)" >
            <span class="key">{{ key + 1 }}</span>
            <div style="flex: 1">
                <h4 class="name">{{ item.title }}</h4>
                <p class="author">{{ item.author }}</p>
            </div>
            <div class="time-long">
                {{ item.time }}
            </div>
        </div>
    </div>
    `,
    created () {
        var _self = this;
        perDayRecommand().then(res => {
            if (res.code == 1) {
                res.data.map(v => {
                    var tmp = {
                        title: v.title,
                        author: v.author,
                        image: v.pic_small,
                        id: v.song_id
                    }
                    _self.musicList.push(tmp)
                })
            }
        })
    },
    methods: {
        handeClickMusic (item) {
            this.$emit('change-music', item);
        }
    }
});

/js/components/player.js

Vue.component('r-player', {
    props: ['music'],
    template: `        
        <div style="position: fixed;bottom: 0;width: 100%">
            <div class="footer flex-between">
                <dic class="music-info flex">
                    <img class="img" :src="music.image">
                    <div>
                        <div>
                            <h4 class="name">{{ music.title }}</h4>
                            <p class="author">{{ music.author }}</p>
                        </div>
                    </div>
                </dic>
                <div class="actions">
                    <i class="fa fa-step-backward normal"></i>
                    <i class="fa fa-play center" @click="getMusicInfo"></i>
                    <i class="fa fa-step-forward normal"></i>
                </div>
            </div>
        </div>`,
    methods: {
        getMusicInfo () {
            getMusicInfo(this.music.id).then(res => {
                console.log(res)
            })
        }
    }
})

/js/api/music.js

const perDayRecommand = function () {
    return request('?r=recommand')
}

const getMusicInfo = function (id) {
    return request('?r=info&id=' + id)
}

以上算是全部代码,简单的使用了vue.js并没有使用前端构建工具. 个人小玩具这样写起来也挺方便的不用修改一点点就build
体验地址 http://xsand.cn/music/
功能并不是很完善(尝鲜)
持续更新...
接口使用了https://github.com/MZCretin/RollToolsApi. 哈哈并没有广告. 挺好用的, 方便

TODO

  • 完善弹窗,loading,播放等细节功能
  • 歌词
  • 进度条
  • 有时间再弄成webapp试试感觉
本作品采用《CC 协议》,转载必须注明作者和本文链接
t-bag, JUST DO IT
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 1

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!