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

/ 5,988评论 / 24308阅读 / 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. Matthewnouts说道:

    buy cytotec over the counter: purchase cytotec – buy cytotec over the counter

  2. Robertperma说道:

    buy generic propecia prices buying propecia online buying generic propecia for sale

  3. LewisToite说道:

    https://prednisonebestprice.pro/# how to buy prednisone

  4. LewisToite说道:

    https://zithromaxbestprice.pro/# zithromax canadian pharmacy

  5. LewisToite说道:

    http://propeciabestprice.pro/# cheap propecia without prescription

  6. PatrickHindy说道:

    https://cytotecbestprice.pro/# cytotec pills buy online

  7. Matthewnouts说道:

    order cheap propecia: generic propecia without dr prescription – propecia prices

  8. PatrickHindy说道:

    https://cytotecbestprice.pro/# cytotec buy online usa

  9. PatrickHindy说道:

    https://zithromaxbestprice.pro/# cost of generic zithromax

  10. Matthewnouts说道:

    nolvadex pct: tamoxifen generic – tamoxifen and grapefruit

  11. Robertperma说道:

    can i buy zithromax over the counter order zithromax over the counter zithromax for sale us

  12. Matthewnouts说道:

    buying generic propecia price: cost of cheap propecia without dr prescription – how cЙ‘n i get cheap propecia pills

  13. Robertperma说道:

    cytotec buy online usa п»їcytotec pills online buy cytotec online fast delivery

  14. Robertperma说道:

    prednisone 54 prednisone pills cost prednisone over the counter south africa

  15. LewisToite说道:

    https://nolvadexbestprice.pro/# tamoxifen citrate pct

  16. PatrickHindy说道:

    http://zithromaxbestprice.pro/# zithromax capsules price

  17. Matthewnouts说道:

    buy zithromax online: zithromax cost – zithromax tablets

  18. Robertperma说道:

    tamoxifen effectiveness nolvadex 10mg tamoxifen hormone therapy

  19. CASINO5588说道:

    It’s nearly impossible to find well-informed people in this particular subject, however, you sound like you know what you’re talking about! Thanks

  20. PH POP CASINO说道:

    Aw, this was an incredibly good post. Taking a few minutes and actual effort to create a top notch article… but what can I say… I procrastinate a whole lot and never seem to get nearly anything done.

  21. Arnoldscava说道:

    mexican rx online buying from online mexican pharmacy п»їbest mexican online pharmacies

  22. Waynetar说道:

    mexico drug stores pharmacies: buying prescription drugs in mexico – mexican rx online

  23. Arnoldscava说道:

    medication from mexico pharmacy buying prescription drugs in mexico online mexican border pharmacies shipping to usa

  24. Waynetar说道:

    medication from mexico pharmacy: п»їbest mexican online pharmacies – buying prescription drugs in mexico online

  25. Waynetar说道:

    mexican border pharmacies shipping to usa: medicine in mexico pharmacies – mexico pharmacies prescription drugs

  26. NelsonSaIlk说道:

    mexican pharmaceuticals online: buying prescription drugs in mexico online – reputable mexican pharmacies online

  27. NelsonSaIlk说道:

    mexican online pharmacies prescription drugs: pharmacies in mexico that ship to usa – mexican border pharmacies shipping to usa

  28. NelsonSaIlk说道:

    mexico drug stores pharmacies: buying prescription drugs in mexico online – buying from online mexican pharmacy

  29. DominicHOr说道:

    purple pharmacy mexico price list: best online pharmacies in mexico – medicine in mexico pharmacies

  30. DominicHOr说道:

    mexican online pharmacies prescription drugs: purple pharmacy mexico price list – mexico pharmacies prescription drugs

  31. Waynetar说道:

    reputable mexican pharmacies online: mexico pharmacies prescription drugs – pharmacies in mexico that ship to usa

  32. NelsonSaIlk说道:

    mexico pharmacies prescription drugs: purple pharmacy mexico price list – mexico pharmacies prescription drugs

  33. DominicHOr说道:

    mexican drugstore online: pharmacies in mexico that ship to usa – buying prescription drugs in mexico online

  34. Arnoldscava说道:

    purple pharmacy mexico price list mexican online pharmacies prescription drugs mexican pharmaceuticals online

  35. Arnoldscava说道:

    buying from online mexican pharmacy mexican pharmaceuticals online purple pharmacy mexico price list

  36. Arnoldscava说道:

    п»їbest mexican online pharmacies mexican rx online mexican pharmacy

  37. company website说道:

    I love it whenever people come together and share thoughts. Great blog, keep it up!

  38. Waynetar说道:

    mexican mail order pharmacies: best online pharmacies in mexico – best online pharmacies in mexico

  39. Waynetar说道:

    buying prescription drugs in mexico online: purple pharmacy mexico price list – mexico drug stores pharmacies

  40. Waynetar说道:

    mexico drug stores pharmacies: mexican drugstore online – buying from online mexican pharmacy

  41. NelsonSaIlk说道:

    п»їbest mexican online pharmacies: mexican pharmaceuticals online – pharmacies in mexico that ship to usa

  42. NelsonSaIlk说道:

    mexico pharmacies prescription drugs: medicine in mexico pharmacies – buying prescription drugs in mexico online

  43. NelsonSaIlk说道:

    buying from online mexican pharmacy: best online pharmacies in mexico – mexican mail order pharmacies

  44. DominicHOr说道:

    pharmacies in mexico that ship to usa: mexican mail order pharmacies – purple pharmacy mexico price list

  45. DominicHOr说道:

    mexican border pharmacies shipping to usa: buying prescription drugs in mexico – mexican drugstore online

  46. Waynetar说道:

    п»їbest mexican online pharmacies: mexican pharmaceuticals online – mexico pharmacies prescription drugs

  47. NelsonSaIlk说道:

    mexican mail order pharmacies: best online pharmacies in mexico – mexican rx online

发表回复

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