2. 程式人生 > 其它 >vue簡單的音樂播放器

vue簡單的音樂播放器

阿新 • • 發佈：2021-07-21 
效果圖：

html頁面：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>悅聽player</title>
    <!-- 樣式 -->
    <link href="
 
css/index.css" rel="stylesheet" />
</head>

<body>
    <div class="wrap">
        <!-- 播放器主體區域 -->
        <div class="play_wrap" id="player">
            <div class="search_bar">
                <img src="/悅聽黑馬Bili/img/player_title.png" alt="" />
                <!-- 搜尋歌曲 -->
                <input type="
 
text" autocomplete="off" v-model="query" @keyup.enter="searchMusic" />
            </div>
            <div class="center_con">
                 <!--搜尋歌曲列表--> 
                <div class='song_wrapper'>
                    <ul class="song_list">
                        <li v-for
 
="item in musicList">
                            <a href="javascript:;"@click="playMusic(item.id)"></a>
                            <b>{{item.name}}</b>
                            <span v-if="item.mvid!=0" @click="playMV(item.mvid)"><i></i></span>
                        </li>
                    </ul>
                    <img src="/悅聽黑馬Bili/img/line.png" class="switch_btn" alt="">
                </div>
                 <!--歌曲資訊容器--> 
                <div class="player_con" :class="{playing:isPlaying}">
                    <img src="/悅聽黑馬Bili/img/player_bar.png" class="play_bar" />
                     <!--黑膠碟片--> 
                    <img src="/悅聽黑馬Bili/img/disc.png" class="disc autoRotate" />
                    <img :src="musicCover" class="cover autoRotate" />
                </div>
                 <!--評論容器--> 
                <div class="comment_wrapper">
                    <h5 class='title'>熱門留言</h5>
                    <div class='comment_list'>
                        <dl v-for="item in hotComments">
                            <dt><img :src="item.user.avatarUrl" alt=""></dt>
                            <dd class="name">{{item.nickname}}</dd>
                            <dd class="detail">
                               {{item.content}}
                            </dd>
                        </dl>
                    </div>
                    <img src="/悅聽黑馬Bili/img/line.png" class="right_line">
                </div>
            </div>
            <div class="audio_con">
                <audio ref='audio'  @play="play" @pause="pause" :src="musicUrl"  controls autoplay loop class="myaudio"></audio>
            </div>
            <div class="video_con" v-show="isShow" style="display: none;">
                <video :src="mvUrl" controls="controls"></video>
                <div class="mask" @click="hide"></div>
            </div>
        </div>
    </div>
    <!-- 開發環境版本，包含了有幫助的命令列警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 官網提供的 axios 線上地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="css/main.js"></script>
</body>

</html>

js程式碼：

var vue = new Vue({
    el: "#player",
    data: {
        query: "",//查詢關鍵字
        musicList: [],//歌曲陣列
        musicUrl: "",//歌曲地址
        musicCover: "",//歌曲封面
        hotComments: [],//歌曲評論
        isPlaying: false,//動畫播放狀態
        isShow: false,//遮罩層的顯示狀態
        mvUrl:""//mv的地址
    },
    methods: {
        //歌曲搜尋
        searchMusic: function () {
            var that = this;
            axios.get("https://autumnfish.cn/search?keywords=" + this.query)//歌曲搜尋連結
                .then(function (response) {
                    //console.log(response);
                    that.musicList = response.data.result.songs;
                }, function (err) { })
        },
        //歌曲播放
        playMusic: function (musicId) {
            var that = this;
            //console.log(musicId)
            //獲取歌曲地址
            axios.get("https://autumnfish.cn/song/url?id=" + musicId)
                .then(function (response) {
                    //console.log(response.data.data[0].url);
                    that.musicUrl = response.data.data[0].url;
                }, function (err) {
                })
            //歌曲詳細資訊
            axios.get("https://autumnfish.cn/song/detail?ids="+musicId)
                .then(function (response) {
                    //console.log(response.data.songs[0].al.picUrl);
                    that.musicCover = response.data.songs[0].al.picUrl;
                }, function (err) { })
            //歌曲評論
            axios.get("https://autumnfish.cn/comment/hot?type=0&id="+ musicId)
                .then(function (response) {
                    //console.log(response.data.hotComments);
                    that.hotComments = response.data.hotComments
                }, function (err) { })
        },
        //動畫播放
        play: function () {
            this.isPlaying = true;
        },
        //暫停動畫
        pause: function () {
            this.isPlaying = false;
        },
        //mv獲取
        playMV: function (mvId) {
            var that = this;
            axios.get("https://autumnfish.cn/mv/url?id=" + mvId)
                .then(function (response) {
                    // console.log(response.data.data.url);
                    that.isShow = true;
                    that.mvUrl = response.data.data.url;
                }, function (err) { })
        },
        //隱藏
        hide: function () {
            this.isShow = false;
        }
    }
})

css部分：

body,
ul,
dl,
dd {
margin: 0px;
padding: 0px;
}

.wrap {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("../img/bg.jpg") no-repeat;
background-size: 100% 100%;
}

.play_wrap {
width: 800px;
height: 544px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -272px;
/* background-color: #f9f9f9; */
}

.search_bar {
height: 60px;
background-color: #1eacda;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 11;
}

.search_bar img {
margin-left: 23px;
}

.search_bar input {
margin-right: 23px;
width: 296px;
height: 34px;
border-radius: 17px;
border: 0px;
background: url("../img/zoom.png") 265px center no-repeat
rgba(255, 255, 255, 0.45);
text-indent: 15px;
outline: none;
}

.center_con {
height: 435px;
background-color: rgba(255, 255, 255, 0.5);
display: flex;
position: relative;
}

.song_wrapper {
width: 200px;
height: 435px;
box-sizing: border-box;
padding: 10px;
list-style: none;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}

.song_stretch {
width: 600px;
}

.song_list {
width: 100%;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
}
.song_list::-webkit-scrollbar {
display: none;
}

.song_list li {
font-size: 12px;
color: #333;
height: 40px;
display: flex;
flex-wrap: wrap;
align-items: center;
width: 580px;
padding-left: 10px;
}

.song_list li:nth-child(odd) {
background-color: rgba(240, 240, 240, 0.3);
}

.song_list li a {
display: block;
width: 17px;
height: 17px;
background-image: url("../img/play.png");
background-size: 100%;
margin-right: 5px;
box-sizing: border-box;
}

.song_list li b {
font-weight: normal;
width: 122px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.song_stretch .song_list li b {
width: 200px;
}

.song_stretch .song_list li em {
width: 150px;
}

.song_list li span {
width: 23px;
height: 17px;
margin-right: 50px;
}
.song_list li span i {
display: block;
width: 100%;
height: 100%;
cursor: pointer;
background: url("../img/table.png") left -48px no-repeat;
}

.song_list li em,
.song_list li i {
font-style: normal;
width: 100px;
}

.player_con {
width: 400px;
height: 435px;
position: absolute;
left: 200px;
top: 0px;
}

.player_con2 {
width: 400px;
height: 435px;
position: absolute;
left: 200px;
top: 0px;
}

.player_con2 video {
position: absolute;
left: 20px;
top: 30px;
width: 355px;
height: 265px;
}

.disc {
position: absolute;
left: 73px;
top: 60px;
z-index: 9;
}
.cover {
position: absolute;
left: 125px;
top: 112px;
width: 150px;
height: 150px;
border-radius: 75px;
z-index: 8;
}
.comment_wrapper {
width: 180px;
height: 435px;
list-style: none;
position: absolute;
left: 600px;
top: 0px;
padding: 25px 10px;
}
.comment_wrapper .title {
position: absolute;
top: 0;
margin-top: 10px;
}
.comment_wrapper .comment_list {
overflow: auto;
height: 410px;
}
.comment_wrapper .comment_list::-webkit-scrollbar {
display: none;
}
.comment_wrapper dl {
padding-top: 10px;
padding-left: 55px;
position: relative;
margin-bottom: 20px;
}

.comment_wrapper dt {
position: absolute;
left: 4px;
top: 10px;
}

.comment_wrapper dt img {
width: 40px;
height: 40px;
border-radius: 20px;
}

.comment_wrapper dd {
font-size: 12px;
}

.comment_wrapper .name {
font-weight: bold;
color: #333;
padding-top: 5px;
}

.comment_wrapper .detail {
color: #666;
margin-top: 5px;
line-height: 18px;
}
.audio_con {
height: 50px;
background-color: #f1f3f4;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.myaudio {
width: 800px;
height: 40px;
margin-top: 5px;
outline: none;
background-color: #f1f3f4;
}
/* 旋轉的動畫 */
@keyframes Rotate {
from {
transform: rotateZ(0);
}
to {
transform: rotateZ(360deg);
}
}
/* 旋轉的類名 */
.autoRotate {
animation-name: Rotate;
animation-iteration-count: infinite;
animation-play-state: paused;
animation-timing-function: linear;
animation-duration: 5s;
}
/* 是否正在播放 */
.player_con.playing .disc,
.player_con.playing .cover {
animation-play-state: running;
}

.play_bar {
position: absolute;
left: 200px;
top: -10px;
z-index: 10;
transform: rotate(-25deg);
transform-origin: 12px 12px;
transition: 1s;
}
/* 播放杆 轉回去 */
.player_con.playing .play_bar {
transform: rotate(0);
}
/* 搜尋歷史列表 */
.search_history {
position: absolute;
width: 296px;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.3);
list-style: none;
right: 23px;
top: 50px;
box-sizing: border-box;
padding: 10px 20px;
border-radius: 17px;
}
.search_history li {
line-height: 24px;
font-size: 12px;
cursor: pointer;
}
.switch_btn {
position: absolute;
right: 0;
top: 0;
cursor: pointer;
}
.right_line {
position: absolute;
left: 0;
top: 0;
}
.video_con video {
position: fixed;
width: 800px;
height: 546px;
left: 50%;
top: 50%;
margin-top: -273px;
transform: translateX(-50%);
z-index: 990;
}
.video_con .mask {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 980;
background-color: rgba(0, 0, 0, 0.8);
}
.video_con .shutoff {
position: fixed;
width: 40px;
height: 40px;
background: url("../img/shutoff.png") no-repeat;
left: 50%;
margin-left: 400px;
margin-top: -273px;
top: 50%;
z-index: 995;
}

相關推薦

android實現簡單音樂播放器

本文例項為大家分享了android音樂播放器的具體程式碼，供大家參考，具體內容如下

js實現簡單音樂播放器

本文例項為大家分享了js實現音樂播放器的具體程式碼，供大家參考，具體內容如下

QT實現簡單音樂播放器

基於QT實現一個多功能媒體播放器，它能播放音訊（如mp3），視訊 媒體播放器介面，有進度條，可展示總播放時間、當前播放時間，進度條可拖動，有播放、暫停鍵，有快進、快退鍵，上一曲下一曲，靜音，調節音量，雙擊播

vue簡單的音樂播放器

效果圖： html頁面： <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\" />

vue仿網易雲音樂播放器介面的簡單實現過程

由於工作專案的需要，需要使用到歌曲播放，參考多方資料，寫了一個仿網易雲音樂播放介面，能完整的實現音樂播放功能。

利用vue做一個簡易的音樂播放器

一.近來做了一些花裡胡哨的小功能,僅供參考 <!DOCTYPE html> <html lang=\"en\">

python 製作簡單的音樂播放器

如你所見，功能很簡單。只有基本的播放，停止，甚至只針對一首歌曲，僅供初學者參考學習用。

vue+element製作音樂播放器播放進度條bug(滑鼠拖拽slider滑塊滑動到指定位置無效)

技術標籤：vuebugjavascriptjselementui 最開始bug還沒解決時的效果圖 bug解決後的效果圖

Vue.js實現音樂播放器

本文例項為大家分享了.實現音樂播放器的具體程式碼，供大家參考，具體內容如下

開發一個簡單實用的 本地音樂播放器

先看錯誤： Android stduio 3.5.2 SDK 32 android 12 在 AS 中直接 執行報錯： Installation did not succeed.The application could not be installed: INSTALL_PARSE_FAILED_MANIFEST_MALFORMED

Android開發簡易音樂播放器

這裡介紹一個簡易的音樂播放器，供大家參考，具體內容如下 效果圖如下： 但是，由於這是一個簡易版的音樂播放器，所播放的音樂只有一首，且被寫死，但，操作卻十分簡單，方便理解！

Android實現音樂播放器鎖屏頁

本文例項為大家分享了Android音樂播放器鎖屏頁的具體程式碼，供大家參考，具體內容如下

Python呼叫Windows API函式編寫錄音機和音樂播放器

功能描述： 1）使用tkinter設計程式介面； 2）呼叫Windows API函式實現錄音機和音樂播放器。

pygame編寫音樂播放器的實現程式碼示例

1、準備工作 ide：pycharm python：3.7 三方包：pygame、pyinstaller、mutagen 幾首mp3格式的歌

Python使用PyQt5/PySide2編寫一個極簡的音樂播放器功能

疫情肆虐，憋在家實在無聊，索性寫點東西，於是就有了這個極極極極極簡的音樂播放器。

python實現音樂播放器 python實現花框音樂盒子

本文例項為大家分享了python實現音樂播放器的具體程式碼，供大家參考，具體內容如下

python實現可下載音樂的音樂播放器

本文例項為大家分享了tkinter+pygame+spider實現音樂播放器，供大家參考，具體內容如下

win10系統自帶音樂播放器怎麼用|正確使用win10自帶音樂播放器

win10系統自帶有一個Groove音樂播放器，可以直接聽本地和線上音樂、電臺、看繁星直播，無需下載其他第三方音樂播放器。預設情況下，win10自帶播放器是關閉的，如果要使用需要自己手動開啟。那麼win10系統自帶音樂播放

win10系統下groove音樂播放器無法播放如何解決

win10系統中自帶有groove音樂播放器，可以讓使用者們播放音樂，但是有不少win10系統使用者在使用groove音樂播放器的時候，卻發現無法正常播放，接下來給大家講解一下win10系統下groove音樂播放器無法播放的具體解決步

基於python實現音樂播放器程式碼例項

核心播放模組（pygame核心） import time import pygame import easygui as gui file = r\'D:\\CloudMusic\\G.E.M.鄧紫棋,艾熱 - 光年之外 (熱愛版).mp3\' #這裡為音樂檔案路徑