[vue3]audio音乐进度条(二)跟随播放进度

/ 7,850评论 / 30363阅读 / 2点赞

上一期我们介绍了外观设计,这把我们聊聊让进度条跟随播放进度走

预期效果


准备


实现

<div id="root_div" class="cmusic_displayFlex_class" style="height:150px;justify-content:space-between;align-items: center;">
    <!-- 音频 -->
    <audio id="cmusic_audio" ref="cmusic_audio" controls muted
        @timeupdate="audio_lengthChange()" :src="url_audio">
    </audio>

    <span id="cmusic_control_span_progressBar">
        <div class="cmusic_displayFlex_class cmusic_control_progress_div" style="flex-direction: row;">
            <span id="cmusic_control_span_loadProgress" :style="cmusic_control_loadProgress_style"></span>
            <span id="cmusic_control_span_progress" :style="cmusic_control_progress_style"></span>
        </div>
    </span>
<div>
<style>
/*外框*/
#cmusic_control_span_progressBar{
    border-radius: 50px;
    height: 20px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    position: relative;
    background: transparent;
    box-shadow: inset 2px 2px 4px #bcc5d6,
        inset -2px -2px 5px #feffff;
    border: 2px solid #d0f4ff;
    justify-content: center;
    transition: all 0.8s ease;
}
/*布局类*/
.cmusic_displayFlex_class {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
}
.cmusic_control_progress_div {
    position:absolute;
    width:94% !important;
    height:100%;
    align-items: center;
}
/*进度条*/
#cmusic_control_span_progress,
#cmusic_control_span_loadProgress{
    background: linear-gradient(90deg, #c4f4fe, #66ccff);
    border-radius: 50px;
    position: absolute;
    width:100%;
    height: 60%;
    pointer-events: none;
    transition: width 0.5s ease;
    box-shadow: 2px 2px 10px #ccd3ff,
    -2px -2px 10px #ccd3ff;
}
/*加载进度条*/
#cmusic_control_span_loadProgress {
    background: linear-gradient(90deg, #abecd6, #fff9d2);
}
</style>
<!-- 引入vue -->
<script src="https://unpkg.com/vue@3.2.33"></script>
<script>
const { createApp } = Vue

var cmusic_json = {
    //数据
    data() {
        return {
            url_audio:"https://blog.coolight.cool/wp-content/uploads/2022/05/大喜_洛天依.m4a",
            cmusic_control_loadProgress_style:"width:80%",
            cmusic_control_progress_style:"width:50%"
        }
    },
    //函数
    methods:{
        //监听播放时长,修改进度条长度
        audio_lengthChange:function(){
            let caudio = this.$refs.cmusic_audio;
            //duration是音频总时长
            //如果音频元数据加载完成,才能获得其总时长,后续才能进行计算
            if (!isNaN(caudio.duration)){
                this.cmusic_control_progress_style = "width:" + (parseInt(caudio.currentTime / caudio.duration * 100)).toString() + "%;";
            }else{
                this.cmusic_control_progress_style = "width:0%;";
            }
        }
    }
};

var cmusic_app = Vue.createApp(cmusic_json);
var cmusic_vue = cmusic_app.mount("#root_div");
</script>
  1. TravisCange说道:

    para kazandД±ran sohbet siteleri: cazinomaxi – bahis siteleri isimleri

  2. JustinEurok说道:

    https://casinositeleri2025.pro/# yabancД± Еџans oyunlarД± siteleri

  3. So for those who carrying matching earring with it, then it will probably easily be used as a necklace set.

  4. Combined with 16 other photo voltaic energy locations in Arizona, the system supplies over 5 MW of electricity statewide.

  5. Robertfer说道:

    en cok kazand?ran slot oyunlar? slot oyunlar? puf noktalar? az parayla cok kazandiran slot oyunlar?

  6. There’s a point to this query however, since it is very much helpful to check of languages’ constructions and form, to grasp and be ready to use as many as doable languages from differen households.

  7. JustinEurok说道:

    https://casinositeleri2025.pro/# casino bonanza gГјncel giriЕџ

  8. Rileyaromi说道:

    Viagra * Cialis * Levitra

    All the products you are looking for are currently at one’s disposal for the duration of 1+1.

    4 more tablets of identical of the following services: Viagra * Cialis * Levitra

    https://xn--2i0bm4p0sf2wh7vdmsy.kr

  9. Josephjer说道:

    slot tr online: slot oyunlar? puf noktalar? – en kazancl? slot oyunlar?

  10. Josephjer说道:

    slot oyunlar? puf noktalar?: en cok kazand?ran slot oyunlar? – slot tr online

  11. Robertfer说道:

    slot oyunlar? puf noktalar? az parayla cok kazandiran slot oyunlar? en kazancl? slot oyunlar?

  12. JustinEurok说道:

    http://slottr.top/# slot oyunlar? puf noktalar?

  13. JustinEurok说道:

    https://pinup2025.com/# пин ап вход

  14. Robertfer说道:

    пин ап pinup 2025 пин ап вход

  15. Edwardidomo说道:

    http://casinositeleri2025.pro/# casino bahis siteleri

  16. Josephjer说道:

    rcasino: en iyi bahis siteleri 2024 – casino bonus

  17. TravisCange说道:

    casino turkey: betnoo – casinoda en Г§ok kazandД±ran oyun

  18. Josephjer说道:

    deneme+bonusu+yeni: gГјvenilir casino bahis siteleri – saglam siteler

  19. Robertfer说道:

    пин ап зеркало пин ап казино пин ап зеркало

  20. JustinEurok说道:

    https://slottr.top/# slot oyunlar? puf noktalar?

  21. Edwardidomo说道:

    http://slottr.top/# slot siteleri

  22. JustinEurok说道:

    https://slottr.top/# en cok kazand?ran slot oyunlar?

  23. Robertfer说道:

    pinup 2025 пин ап казино пин ап казино официальный сайт

  24. Only a few gamers in history have been as successful as Andersson at each forms of chess.

  25. Josephjer说道:

    pinup2025.com: пинап казино – pinup 2025

  26. Josephjer说道:

    пин ап: пинап казино – pinup 2025

  27. Robertfer说道:

    пин ап казино официальный сайт pinup2025.com pinup 2025

  28. Usually when i write a song, there’s not much fluffing left to do – it just about comes out whole.

  29. JustinEurok说道:

    http://slottr.top/# az parayla cok kazandiran slot oyunlar?

  30. What is it about Altrincham when they play clubs at the bottom finish of the table?

  31. Edwardidomo说道:

    https://casinositeleri2025.pro/# deneme bonusu beren siteler

  32. めった刺し说道:

    Use a washcloth with shampoo to clean his face and wrinkles.

  33. So we offer a modern designed gold item collection on this identical inspiration and thought of modern lifestyle.

  34. 2024-06-01 Charlie Puth feat.

  35. TravisCange说道:

    slot siteleri: az parayla cok kazandiran slot oyunlar? – en cok kazand?ran slot oyunlar?

  36. Robertfer说道:

    пин ап казино зеркало пинап казино pinup 2025

  37. Ancient design components include partitions hand troweled with ocher-tinted plaster and a handsome sink with a fluted-column pedestal.

  38. JustinEurok说道:

    https://casinositeleri2025.pro/# gГјvenilir oyun siteleri

  39. Josephjer说道:

    gГјncel bahis siteleri: betboo plus – casino site

  40. Robertfer说道:

    пин ап казино зеркало пин ап вход pinup 2025

  41. Josephjer说道:

    slot tr online: az parayla cok kazandiran slot oyunlar? – en cok kazand?ran slot oyunlar?

  42. Edwardidomo说道:

    https://slottr.top/# slot oyunlar?

  43. JustinEurok说道:

    http://slottr.top/# slot tr online

  44. tubidy说道:

    I blog frequently and I really appreciate your information. The article has truly peaked my interest. I am going to bookmark your blog and keep checking for new information about once a week. I subscribed to your RSS feed too.

  45. JustinEurok说道:

    https://pinup2025.com/# пинап казино

  46. Robertfer说道:

    pinup 2025 пин ап казино пин ап вход

  47. Edwardidomo说道:

    https://slottr.top/# slot siteleri

  48. JustinEurok说道:

    https://casinositeleri2025.pro/# bonusu veren siteler

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注