記錄--Vue開發歷程---音樂播放器

来源:https://www.cnblogs.com/smileZAZ/archive/2023/01/12/17047009.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 一、audio標簽的使用 1、Audio 對象屬性 2、對象方法 二、效果 效果如下： 三、代碼 代碼如下： MusicPlayer.vue <template> <div class="music"> <!-- 占位 --> <div ...


這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

一、audio標簽的使用

1、Audio 對象屬性

 2、對象方法

二、效果

效果如下：

三、代碼

代碼如下： MusicPlayer.vue

<template>
    <div class="music">
        <!-- 占位 -->
        <div class="m_hold">

        </div>
        <div class="m_img">
            <img :src="this.$parent.songNames[this.$parent.index].png" width="90px" :class="this.$parent.isRun">
        </div>
        <!-- 歌曲信息 -->
        <div class="m_text">
            {{ this.$parent.songNames[this.$parent.index].name }}
            <div class="block" style="margin-top:5px">
                <el-slider :v-model="value1"></el-slider>
            </div>
        </div>
        <!-- 按鈕 -->
        <div class="m_btn">
            <a href="#" class="m_prev" @click="playLastSong()"></a>
            <a href="#" class="m_play" @click="changeState()" v-show="this.$parent.isShow"></a>
            <a href="#" class="m_pause" @click="changeState()" v-show="!this.$parent.isShow"></a>
            <a href="#" class="m_next" @click="playNextSong()"></a>
        </div>
        <!-- 摺疊功能 -->
        <div class="m_close" @click="changeCloseState()">
            <a href=""></a>
        </div>

    </div>
</template>

<script>
export default {
    name: 'MusicPlayer',
    data() {
        return {
            songName: '',
            value1:0

        }
    },
    methods: {
        changeState() {

            this.$emit("play")
        },
        changeCloseState() {
            this.$emit("hello");
        },
        playNextSong() {
            this.$emit("nextSongs");
            this.songName = this.$parent.songNames[this.$parent.index].name
        },
        playLastSong() {
            this.$emit("lastSongs");
            this.songName = this.$parent.songNames[this.$parent.index].name
        }
    },
    watch:
    {
       

    }, mounted() {
        this.songName = this.$parent.songNames[this.$parent.index].name
    }

}
</script>

<style scoped>
/* 關於播放器的樣式 */
.music {
    width: 100%;
    height: 120px;
    background: black;
    /* 相對瀏覽器定位 */
    position: absolute;
    left: 0px;
    bottom: 100px;
    border-bottom: 50px;
    /* 透明度 */
    opacity: 0.8;
    /* 陰影值 */
    box-shadow: 10px 15px 15px 1px black
}

.music .m_hold {
    float: left;
    width: 90px;
    height: 90px;
}

/* 調整音樂盒圖片 */
.music .m_img {
    margin-top: 15px;
    margin-left: 10px;
    margin-right: 10px;
    /* 左浮動 */
    float: left;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;

}

/* 修改文字 */
.music .m_text {
    /* 左浮動 */
    float: left;
    color: white;
    font-size: 20px;
    /* 字體加粗 */
    font-weight: bold;
    margin-top: 25px;
    margin-left: 20px;
    margin-bottom: 10px;
    width: 25%;

}

/* 使得所有a標簽一起移動 */
.music .m_btn {
    float: left;
    position: absolute;
    /* 絕對定位：防止歌曲名稱過長，擠出div */
    left: 40%;
}

/* 修改a標簽 */
.music .m_btn a {
    width: 32px;
    height: 32px;
    float: left;
    margin-top: 50px;
    margin-left: 20px;
    background: url(@/assets/player_bg.png);

}

.music .m_btn .m_prev {
    background-position: -69px 0px;
}

.music .m_btn .m_next {
    background-position: -150px 0px;
}

.music .m_btn .m_play {
    background-position: -107px -5px;
}

.music .m_btn .m_prev:hover {
    background-position: -69px -32px;
}

.music .m_btn .m_next:hover {
    background-position: -150px -32px;
}

.music .m_btn .m_play:hover {
    background-position: -107px -47px;
}

.music .m_btn .m_pause {
    background-position: -292px -94px;
}

.music .m_btn .m_pause:hover {
    background-position: -334px -94px;
}

/* 還有一個懸停 沒寫 */
/* 設置最右邊的關閉樣式 */
.music .m_close {
    float: right;
    background: white;
    cursor: pointer;
    width: 23px;
    height: 100px;
    margin-top: 10px;
    background: url(@/assets/player_bg.png);

}

/* 設置最右邊的關閉樣式 */
.music_hide {
    float: left;
    background: white;
    cursor: pointer;
    width: 23px;
    height: 100px;
    margin-top: 2px;
}

.go {
    animation: bounce-in 2s linear infinite;
}

.come {
    animation: none;
}

@keyframes bounce-in {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.open-enter-active {
    animation: slide-in linear 0.5s;
}

.open-leave-active {
    animation: slide-in reverse linear 0.5s;
}

@keyframes slide-in {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0%);
    }
}
</style>

HideMusic.vue

<template>
    <div class="music_hide" @click="changeCloseState()"><a href="#" class="m_open"></a></div>
</template>

<script>
export default {
    name:'HidePlayer',
    methods:{
        changeCloseState()
        {
            this.$emit("hello");
        }
    }
}
</script>

<style scoped>
.music_hide {
    float: left;
    background: url(@/assets/player_bg.png);
    cursor: pointer;
    width: 23px;
    height: 100px;
    margin-top: 10px;
    bottom: 100px;
    position: absolute;
    background-position-x: -45px;
}
</style>

MyPlayer.vue

<template>
    <div>
        <transition name="open" mode="out-in">
            <component v-bind:is="view" @hello="changeSlideState" @play="changePlayState" @lastSongs="lastSongs"
                @nextSongs="nextSongs"></component>
        </transition>
        <audio class="m_mp3" id="m_mp3" :src="this.songNames[this.index].Url" autoplay loop>

        </audio>
    </div>

</template>

<script>
import HidePlayer from '@/part/HidePlayer'
import MusicPlayer from '@/part/MusicPlayer'
export default {
    name: 'MyPlayer',
    data() {
        return {
            view: MusicPlayer,
            isClose: false,
            isShow: true,
            isRun: 'come',
            index: 0,
            songNum: 2,
            currentTime: '0:00',
            duration: '0:00',
            songNames: [
                {
                    id: 1,
                    name: '張韶涵-篇章',
                    Url: require('@/assets/張韶涵-篇章.mp3'),
                    png: require('@/assets/篇章.png'),
                },
                {
                    id: 2,
                    name: '愛就一個字 抒情版',
                    Url: require('@/assets/愛就一個字 抒情版.mp3'),
                    png: require('@/assets/愛就一個字.png'),
                },
                {
                    id: 3,
                    name: '最偉大的作品-周傑倫',
                    Url: require('@/assets/最偉大的作品-周傑倫.mp3'),
                    png: require('@/assets/周傑倫.jpg'),
                },
                {
                    id: 4,
                    name: '等你下課 (with 楊瑞代)-周傑倫',
                    Url: require('@/assets/等你下課 (with 楊瑞代)-周傑倫.mp3'),
                    png: require('@/assets/等你下課.png'),
                },
                {
                    id: 5,
                    name: '告白氣球-周傑倫',
                    Url: require('@/assets/告白氣球-周傑倫.mp3'),
                    png: require('@/assets/告白氣球.png'),
                },
                {
                    id: 6,
                    name: '還在流浪-周傑倫',
                    Url: require('@/assets/還在流浪-周傑倫.mp3'),
                    png: require('@/assets/還在流浪.png'),
                },
            ]
        }
    },
    components: {
        HidePlayer,
        MusicPlayer
    },
    methods: {
        changeSlideState() {
            this.isClose = !this.isClose;
            if (this.isClose) {
                this.view = HidePlayer;
            } else {
                this.view = MusicPlayer;
            }
        },
        changePlayState() {
            if (!this.isShow) {
                this.isShow = true;
                this.isRun = "come";
                document.getElementById("m_mp3").pause();
            } else {
                this.isShow = false;
                this.isRun = "go";
                var my_mp3 = document.getElementById("m_mp3");
                my_mp3.play();


            }
        },
        nextSongs() {
            if (this.isShow) {
                this.isShow = false;
                this.isRun = "go";
            }
            this.index = (this.index + 1) % this.songNum;
        },
        lastSongs() {
            if (this.isShow) {
                this.isShow = false;
                this.isRun = "go";
            }
            if (this.index == 0) {
                this.index = this.songNum - 1;
            } else {
                this.index = this.index - 1;
            }

        }
    }, mounted() {
        this.songNum = this.songNames.length;
        
    }

}
</script>

<style scoped>
.open-enter-active {
    animation: slide-in linear 0.5s;
}

.open-leave-active {
    animation: slide-in reverse linear 0.5s;
}

@keyframes slide-in {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0%);
    }
}
</style>

四、難點解析

1、過渡動畫的實現

 參考了vue文檔過渡&動畫中多個組件的過渡（下麵三份代碼）

<transition name="component-fade" mode="out-in">
  <component v-bind:is="view"></component>
</transition>
new Vue({
  el: '#transition-components-demo',
  data: {
    view: 'v-a'
  },
  components: {
    'v-a': {
      template: '<div>Component A</div>'
    },
    'v-b': {
      template: '<div>Component B</div>'
    }
  }
})
.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
  opacity: 0;
}

因此分化出MusicPlayer.vue 和 HideMusic.vue，由此又產生了組件內通信的問題。

2、組件內通信

為什麼會產生組件內的通信？原因在於：MusicPlayer組件和HidePlayer組件，只能有一個展示，但是在不展示的過程中，他的數據應該也是實時改變的。例如MusicPlayer組件上有播放按鈕，如果不採用組件通信，那麼MusicPlayer重新渲染的時候，播放按鈕會回到最初的設定，是不符合邏輯的。所以需要採用組件內通信的方式。實現的方式也比較簡單，子組件直接訪問父組件的數據，子組件通過$emit調用父組件的方法，修改父組件的數據。

3、旋轉動畫的實現

 首先，編寫動畫。

.go {
    animation: bounce-in 2s linear infinite;
}

.come {
    animation: none;
}

@keyframes bounce-in {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

然後，動態綁定class，isRun兩個值即為"go"，"come"。

<div class="m_img">
   <img :src="this.$parent.songNames[this.$parent.index].png" width="90px" :class="this.$parent.isRun">
</div>

本文轉載於：

https://blog.51cto.com/u_15807146/5807883

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • element上傳圖片組件使用方法|圖片回顯|格式轉換base64
    upload上傳組件的使用方法 上傳圖片後自動上傳（也可以手動上傳），圖片上傳成功後由後端返回特定圖片地址，在表單提交後將表單數據同圖片地址一併返回即可完成圖片上傳功能。 組件HTML <!-- 上傳圖片 --> <div style="margin: 4px 0">圖片上傳（僅支持jpg、png格 ...
  • 如何自定義sapui5 TreeTable控制項的可展開列
    參考sapui5 TreeTable控制項的示例，我們發現所有的可展開列（即所謂的hierarchical data column）預設都在第一列，而且API中並沒有給出對應的屬性或方法來重新指定可展開列在table中的位置。 我們可以編寫一個自定義控制項，使其繼承sapui5的TreeTable控制項， ...
  • Angularjs——初識AngularJS
    AngularJS——初識AngularJS AngularJS是什麼 AngularJS是Google開源的一款前端JS結構化框架，它通過對前端開發進行分層，極好地規範了前端開發的風格——它將前端開發分為Controller層、Service層、DAO層和Model層。其中，Model對象與HTM ...
  • JavaScript 面向切麵編程（AOP，裝飾者模式）
    JavaScript 面向切麵編程 (AOP) 是一種編程思想和實現方式，它將一些關註點（例如日誌記錄、安全性檢查、性能監控等）從主題對象中分離出來，通過“橫切關註點”的方式在程式中動態地織入這些關註點。這樣可以避免在主題對象中嵌入大量的關註點代碼，使得代碼更加簡潔和可維護。 ...
  • CSS 網格(Grid)佈局
    CSS Grid 佈局是一種二維佈局方式，可以將頁面分成行和列，併在其中放置元素。使用 Grid 佈局時，需要定義網格容器和網格項目。 ...
  • day08-Axios
    Axios 1.基本說明 Axios是一個基於promise的網路請求庫，作用於node.js和瀏覽器中。它是 isomorphic 的 (即同一套代碼可以運行在瀏覽器和node.js中)。在服務端它使用原生node.js http 模塊, 而在客戶端 (瀏覽端) 則使用XMLHttpRequest ...
  • JavaScript 原型和原型鏈
    JavaScript 是一種基於原型繼承的語言。在 JavaScript 中，對象是通過原型鏈來繼承屬性和方法的。 一、原型 每一個對象都有一個 proto 屬性，該屬性指向該對象的原型。原型本質上也是一個對象，所有的對象都擁有一個原型，除了 Object.prototype。 JavaScript ...
  • 雲間玉兔,自出機抒,從零開始製作Web插件網頁特效小兔子組件(小掛件widget),基於原生CSS/NPM
    著意登樓瞻玉兔，何人張幕遮銀闕？又到了一年一度的網頁小掛件環節，以往我們都是集成別人開源的組件，但所謂熟讀唐詩三百首，不會做詩也會吟，熟讀了別人的東西，做幾首打油詩也是可以的，但若不能自出機抒，卻也成不了大事，所以本次我們從零開始製作屬於自己的網頁小掛件，博君一曬。 玉兔主題元素繪製 成本最低的繪製 ...
一周排行
    -Advertisement-
    Play Games
  • Dapr Outbox 執行流程
    Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程，Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor，topic=orders 本文前提知識：熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • Advanced .Net Debugging 7：托管堆與垃圾收集
    引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識，這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示，用於衡量代碼被測試覆蓋的程度，幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率（Line Coverage）、分支覆蓋率（Bra ...
  • C#S7.NET實現西門子PLCDB塊數據採集的完整步驟
    前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫，記錄了使用電腦模擬，模擬PLC，自至完成測試的詳細流程，並重點介紹了在這個過程中的易錯點，供參考。 用到的軟體： 1.Windows環境下鏈路層網路訪問的行業標準工具（WinPcap_4_1_3.exe）下載鏈接：http ...
  • WPF控制項：密碼框綁定MVVM
    從依賴倒置原則（Dependency Inversion Principle, DIP）到控制反轉（Inversion of Control, IoC）再到依賴註入（Dependency Injection, DI）的演進過程，我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • Python中的私有屬性與私有方法
    關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制，這與其他面相對對象語言有區別。關於私有屬性和私有方法，有如下要點： 1、通常我們約定，兩個下劃線開頭的屬性是私有的（private）。其他為公共的（public）； 2、類內部可以訪問私有屬性（方法）； 3、類外 ...
  • C++ 訪問說明符詳解：封裝數據，控制訪問，提升安全性
    C++ 訪問說明符 訪問說明符是 C++ 中控制類成員（屬性和方法）可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符： public：允許從類外部的任何地方訪問成員。 private：僅允許在類內部訪問成員。 protected：允許在類內部及其派生類中訪問成員。 示 ...
  • static_cast與dynamic_cast到底是什麼？
    寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先，【static_cast，dynamic_cast】【父類指針，子類指針】，兩兩一組，共有4種組合：用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • C語言數據結構：雙向鏈表的增刪操作
    /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • @ComponentScan註解的實現，Spring掃描包的過程
    相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage，將包下的類按照一定規則註冊成Be ...
  • opensips開啟python支持
    操作系統 ：CentOS 7.6_x64 opensips版本： 2.4.9 python版本：2.7.5 python作為腳本語言，使用起來很方便，查了下opensips的文檔，支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...
所有分類