vue..js 編寫的簡單音樂播放器

可樂加冰發表於2019-12-03
VueJS播放器

閒暇之餘寫了一個音樂小應用

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

相關文章