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

/ 2,749评论 / 11334阅读 / 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. AllenTal说道:

    acheter mГ©dicament en ligne sans ordonnance: kamagra gel – pharmacie en ligne france fiable

  2. AllenTal说道:

    pharmacie en ligne france livraison internationale: cialis sans ordonnance – trouver un mГ©dicament en pharmacie

  3. IgnacioGinia说道:

    pharmacie en ligne france livraison belgique: Medicaments en ligne livres en 24h – pharmacie en ligne france livraison belgique

  4. Edwardcit说道:

    Viagra sans ordonnance pharmacie France: Viagra generique en pharmacie – Viagra vente libre pays

  5. Edwardcit说道:

    Pharmacie sans ordonnance: Achat mГ©dicament en ligne fiable – Pharmacie sans ordonnance

  6. Edwardcit说道:

    Pharmacie en ligne livraison Europe: pharmacie en ligne pas cher – pharmacie en ligne pas cher

  7. AllenTal说道:

    Viagra 100mg prix: Viagra generique en pharmacie – Viagra homme sans ordonnance belgique

  8. Keithhak说道:

    Sildenafil teva 100 mg sans ordonnance viagra en ligne Viagra sans ordonnance pharmacie France

  9. AllenTal说道:

    vente de mГ©dicament en ligne: Pharmacie Internationale en ligne – pharmacie en ligne france livraison internationale

  10. RobertDer说道:

    https://phenligne.shop/# pharmacie en ligne fiable

  11. AllenTal说道:

    Pharmacie sans ordonnance: pharmacie en ligne france pas cher – pharmacie en ligne france livraison internationale

  12. Edwardcit说道:

    pharmacie en ligne: levitra generique sites surs – trouver un mГ©dicament en pharmacie

  13. Edwardcit说道:

    pharmacie en ligne fiable: acheter kamagra site fiable – pharmacie en ligne france livraison belgique

  14. Edwardcit说道:

    pharmacie en ligne fiable: acheter mГ©dicament en ligne sans ordonnance – pharmacie en ligne france livraison belgique

  15. IgnacioGinia说道:

    Pharmacie sans ordonnance: kamagra 100mg prix – pharmacie en ligne livraison europe

  16. IgnacioelOrb说道:

    Prix du Viagra 100mg en France: Acheter du Viagra sans ordonnance – Viagra gГ©nГ©rique sans ordonnance en pharmacie

  17. AllenTal说道:

    vente de mГ©dicament en ligne: Levitra 20mg prix en pharmacie – vente de mГ©dicament en ligne

  18. IgnacioGinia说道:

    Viagra vente libre allemagne: Meilleur Viagra sans ordonnance 24h – п»їViagra sans ordonnance 24h

  19. AllenTal说道:

    pharmacie en ligne france fiable: cialis generique – Achat mГ©dicament en ligne fiable

  20. RobertDer说道:

    https://kamagraenligne.shop/# Pharmacie en ligne livraison Europe

  21. Keithhak说道:

    pharmacie en ligne livraison europe pharmacie en ligne pharmacie en ligne

  22. Keithhak说道:

    pharmacie en ligne avec ordonnance pharmacie en ligne livraison europe pharmacie en ligne avec ordonnance

  23. Edwardcit说道:

    pharmacies en ligne certifiГ©es: Pharmacie en ligne livraison Europe – Pharmacie sans ordonnance

  24. AllenTal说道:

    Achat mГ©dicament en ligne fiable: kamagra pas cher – pharmacie en ligne france livraison internationale

  25. Edwardcit说道:

    Viagra sans ordonnance 24h Amazon: Acheter du Viagra sans ordonnance – Viagra vente libre allemagne

  26. Edwardcit说道:

    Pharmacie Internationale en ligne: Acheter Cialis – п»їpharmacie en ligne france

  27. RalphRef说道:

    п»їpharmacie en ligne france: acheter mГ©dicament en ligne sans ordonnance – п»їpharmacie en ligne france

  28. RobertindUp说道:

    pharmacie en ligne livraison europe Achat mГ©dicament en ligne fiable pharmacie en ligne sans ordonnance

  29. Antoniadat说道:

    farmacias online seguras en espa̱a: farmacias online seguras en espa̱a Рfarmacias online seguras

  30. VernonJaf说道:

    https://eumedicamentenligne.shop/# Pharmacie Internationale en ligne

  31. RalphRef说道:

    pharmacie en ligne: vente de mГ©dicament en ligne – Pharmacie sans ordonnance

  32. RobertindUp说道:

    п»їpharmacie en ligne france pharmacie en ligne france livraison internationale pharmacie en ligne france pas cher

  33. RobertindUp说道:

    online apotheke versandkostenfrei eu apotheke ohne rezept online apotheke deutschland

  34. Donaldfub说道:

    online apotheke: ohne rezept apotheke – ohne rezept apotheke

  35. Antoniadat说道:

    Farmacia online miglior prezzo: Farmacie on line spedizione gratuita – farmacie online autorizzate elenco

  36. Williamjes说道:

    gГјnstige online apotheke: online apotheke preisvergleich – medikament ohne rezept notfall

  37. Williamjes说道:

    migliori farmacie online 2024: farmacie online sicure – Farmacia online piГ№ conveniente

  38. Antoniadat说道:

    farmaci senza ricetta elenco: top farmacia online – Farmacia online migliore

  39. Antoniadat说道:

    shop apotheke gutschein: online apotheke deutschland – online apotheke rezept

  40. Donaldfub说道:

    online apotheke deutschland: gГјnstigste online apotheke – internet apotheke

  41. RobertindUp说道:

    pharmacie en ligne avec ordonnance pharmacie en ligne sans ordonnance Pharmacie sans ordonnance

  42. Antoniadat说道:

    farmacia online barata: farmacias online baratas – farmacia online barcelona

  43. Williamjes说道:

    vente de mГ©dicament en ligne: pharmacie en ligne – pharmacies en ligne certifiГ©es

  44. Williamjes说道:

    pharmacie en ligne avec ordonnance: trouver un mГ©dicament en pharmacie – Pharmacie Internationale en ligne

  45. Antoniadat说道:

    apotheke online: online apotheke – medikamente rezeptfrei

  46. Donaldfub说道:

    pharmacie en ligne: pharmacie en ligne livraison europe – pharmacie en ligne pas cher

发表回复

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