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

/ 7,853评论 / 30385阅读 / 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. Josephjer说道:

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

  2. Josephjer说道:

    eski oyunlarД± oynama sitesi: yasal kumar oyunlarД± – bet casino

  3. TravisCange说道:

    slot tr online: slot tr online – slot siteleri

  4. click this说道:

    Great site you have here.. It’s hard to find excellent writing like yours nowadays. I honestly appreciate people like you! Take care!!

  5. JustinEurok说道:

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

  6. Robertfer说道:

    internet kumar oyunu tl casino casino bonanza gГјncel giriЕџ

  7. Edwardidomo说道:

    https://casinositeleri2025.pro/# yeni+deneme+bonusu

  8. Within the latter position, he spent 1991-1992 as a Particular Assistant to the Director of the Federal Bureau of Investigation.

  9. JustinEurok说道:

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

  10. Some of Agora’s excellent shares can be found for trading, while others are topic to numerous restrictions.

  11. Josephjer说道:

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

  12. Robertfer说道:

    caxino casino maxi gГјvenilir bahis siteleri 2025

  13. Josephjer说道:

    en cok kazand?ran slot oyunlar?: en kazancl? slot oyunlar? – slot oyunlar? puf noktalar?

  14. JustinEurok说道:

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

  15. Though he’s initially unsure that he will even be capable of appropriately function the pc, he later buys numerous further devices that were not essential for his work, resembling switches to control family appliances like the blender, a speech synthesizer, and a microphone.

  16. It was titled “Twenty Years of Worry”, and it featured Worry as the event’s icon.

  17. The location of Hugh West’s tobacco warehouse, on the western banks of the Potomac close to the mouth of (Nice) Looking Creek, was deemed a suitable location because its deep water entry allowed ships from London to sail on to the wharf.

  18. Edwardidomo说道:

    http://pinup2025.com/# пин ап казино официальный сайт

  19. Paradox actively encourages modding, and the builders usually tweaked the game with a view to make modding simpler, moreover there exist in-depth guides on how to mod within the Crusader Kings II wiki.

  20. JustinEurok说道:

    http://slottr.top/# en kazancl? slot oyunlar?

  21. Robertfer说道:

    tГјrkiye casino siteleri bet siteler bonus veren siteler

  22. TravisCange说道:

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

  23. Josephjer说道:

    slot oyunlar?: en cok kazand?ran slot oyunlar? – slot siteleri

  24. Robertfer说道:

    пин ап пин ап зеркало пин ап казино официальный сайт

  25. Josephjer说道:

    en cok kazand?ran slot oyunlar?: slot siteleri – slot tr online

  26. JustinEurok说道:

    http://casinositeleri2025.pro/# tГјm casino siteleri

  27. Edwardidomo说道:

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

  28. Robertfer说道:

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

  29. JustinEurok说道:

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

  30. Josephjer说道:

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

  31. Robertfer说道:

    bet bahis giriЕџ tГјrkiye casino siteleri deneme bonusu veren siteler casino

  32. Josephjer说道:

    deneme bonusu veren siteler casino: gГјvenilir oyun alma siteleri – deneme bonusu veren bГјtГјn siteler

  33. official website说道:

    Spot on with this write-up, I seriously believe that this website needs a lot more attention. I’ll probably be back again to see more, thanks for the advice.

  34. JustinEurok说道:

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

  35. TravisCange说道:

    пин ап: пин ап казино – пин ап казино официальный сайт

  36. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем: сервис центры бытовой техники москва
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  37. Edwardidomo说道:

    http://casinositeleri2025.pro/# tГјm bet siteleri

  38. JustinEurok说道:

    http://slottr.top/# slot siteleri

  39. You’ll be working up a tremendous sweat after we tackle moving cargo over to the Star.’ ‘Rigelians don’t sweat!

  40. He’s survived by his wife Fannie; two sons, O.E.

  41. Robertfer说道:

    en yeni kaçak bahis siteleri para kazandiran kumar oyunları canlı casino bahis siteleri

  42. 259. United States Census Bureau, 1872.

  43. This could cause a dislocating impact within the shoulder space and likewise restricts the airways and is not good for the spine.

  44. You will have to leave out somebody you don’t want to, so it is usually a bit of a rock and a tough place.

  45. Agon’s CEO Ilya Merenzon attended, and the two main sponsors (EG Capital Advisors and PhosAgro) had representatives, with each players and the chief arbiter rounding out the principals.

  46. Seating in the stadium is various with the relatively low cost fixed extension aspect seats which can be contrasted by the additional seats which can be positioned at the center of the motion, allowing sports lovers a wide range of choices.

  47. The city has completely different names in local Native languages.

  48. Waite, Thomas L. (April 24, 1988).

  49. vixen porn pics说道:

    Good info. Lucky me I recently found your website by chance (stumbleupon). I’ve book-marked it for later.

发表回复

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