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

/ 13评论 / 614阅读 / 0点赞

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

预期效果


准备


实现

<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. gum说道:

    Kaikki pikakasinot tai ainakin melkein kaikki, sillä tämä on se tarjonta jonka me tiedämme löytyvän maailmalta. Joskus harvoin jätämme jonkin ehkä tietämäsi pikakasinon pois listoiltamme, mutta vain mikäli olemme todenneet räikeitä rikkeitä pelaajia kohtaan tai muita merkittäviä syitä jättää kyseinen kasino pois listoilta. Joten jos näet mainoksen muualla, niin kannattaa ehkä pysähtyä tarkistamaan taustat entistä tarkemmin tai käydä meidän chatissa kyselemässä muiden pelaajien kokemuksia. Läheskään jokainen pikakasino ei tarjoa näin laajaa pelivalikoimaa, mutta nytpä on kyseessä monella mittapuulla ensiluokkainen pikakasino. 100% BONUS 200€ ASTI + 100 ilmaiskierrosta Tuo yllä oleva lista ei ollut mikään “kaikki uudet pikakasinot” ultimaattinen lista, vaan siitä löytyy ainoastaan minun kokeilemat uudet pikakasinot.
    https://www.daebudotour.com/bbs/board.php?bo_table=free&wr_id=7323
    Green Gaming on palkintoja niittänyt tapamme tukea pelaajiemme tervettä ja myönteistä suhdetta pelaamiseen. Kekseliään Green Gaming -työkalumme avulla pelaajat voivat arvioida omaa pelaamistaan ja määrittää, onko se tervettä vai riskialtista. Työkalu koostuu yksinkertaisesta, monivalintamuotoisesta itsearviointitestistä, josta saatu tieto yhdistetään käyttäytymisprofiilin laskemiseksi pelaajan henkilökohtaiseen pelikäyttäytymiseen. Saatua tietoa käytetään pelaajalle räätälöityjen suositusten tekemisessä. Mr Green on toiminut alun perin kasinona vuodesta 2007 lähtien. Tilanne kuitenkin muuttui, kun Mr Green vedonlyöntisivusto aukesi vuonna 2016. Tämä toi koko Mr Greenin toiminnan aivan uudelle tasolle. Heti Mr Green vedonlyöntisivuston aukeamisesta lähtien heidän suosionsa on valtavaa.

  2. maw说道:

    While some skincare waters can leave a sticky residue, this one by HERA does not, Chung shared. She recommends this product because “it has great absorption, leaves no residue and leaves skin looking even and bright.” Made with extracts of narcissus flower, leaf and root, the product provides deep hydration for glowy skin, according to the brand. To apply, start with a clean face, and then Chung advised to “put a few drops on your face and pat it .” Korean sunscreens work as well as any other brand. K-beauty sunscreens come in a range of SPF ratings, and many are broad-spectrum, which means they protect against UVA and UVB rays. Korean skincare begins with the proper cleansing of the skin—specifically the double cleanse—which forms the foundation of the daily Korean skincare regimen. This entails washing your face with both an oil-based cleanser and a water-based one before layering on a series of products.
    http://miraeins.co.kr/bbs/board.php?bo_table=free&wr_id=213693
    I have tried several of your other eye creams and nothing compares with Progress .Listen all of the other fans of Progress and stop giving “ form letter responses “ Not all change is good ! If it isn’t broke don’t try to fix it!Gel creams do not hydrate as long as a true cream Have been using Lancme creams and makeup for 5 years. Everyone thinks Im 10 years youngerthan my actual 75 years. Love, love these products. Despite my initial hesitation about adding more steps to my skin-care routine, I find myself actually looking forward to applying this eye cream. The texture is mega rich with a faint floral scent and feels refreshingly cooling for a few minutes after I tap it on. A tiny dab goes a long way, which I found out the hard way the first time I used it, but it also absorbs in seconds.

  3. bag说道:

    Scotland – League One Get sure 2 – 3 odds every day and earn continuously. There is no automatic renewal of subscriptions. Please extend it when it expires. Real Betis vs Real Sociedad Prediction, Odds and Betting Tips 25 04 2023 There’s so many different factors to take into consideration in this difficult world of making predictions. Whether it be form, the importance of the game or team news, all have to be considered. The more you know about a game, the better the chance of getting a win. Hopefully, our experts will provide you with plenty of winning bets so check out this page on a regular basis. At Livetipsportal you will always get a betting tip and recommendation from us for every match that is scheduled to play tomorrow. Are we doing guesswork? Nope. We know our stuff. We use an array of statistics from all the matches over the past few weeks to get an analysis of the results, the trends and the likely outcome of the matches in question. You will also find the corresponding odds offered by all the leading betting sites in Africa that you can place your bets with.
    https://blast-wiki.win/index.php?title=My_bet_prediction_tips
    If you are interested in betting on a game and you’re looking to pick a straight-up winner, you’ll first need to identify which of the listed options is the moneyline. In most cases, you’ll see a line for the point spread, an Over Under line, and a moneyline. The sportsbook will indicate what kind of bet it is above or beside the lines. Moneyline betting is the most common and straightforward way to wager on the NHL — all we need to do is pick the winner of the game. The beauty of the moneyline (ML) bet is that we are wagering on the same outcome that teams are playing for: a victory.  A money line bet is a wager on the outcome of an event. It is a bet on which team or competitor the bettor expects to win. The favorite in a game has a negative moneyline (example: -150). The underdog has a positive moneyline (example: +135). The odds represent the payouts on a $100 wager. So for a favorite at -150 the bettor would wager $150 to win $100. For an underdog at +135 the bettor would wager $100 to win $135.

  4. abats说道:

    Tilley, un británico de 50 años que ha estado en el negocio de los casinos durante 30 años, se llevará parte de su personal a Montenegro donde se reestablecerá después de abandonar Moscú. Sus sociedades en el sector de la hostelería de lujo en Rusia también sufrirán. Sí, lo sabemos, tu favorito no está entre ellos, pero hemos tenido que elegir y 100, teniendo en cuenta toda la historia del cine y todos los países, se hace una cifra corta. Estos son, según Esquire, los mejores, los más importantes, los fundamentales actores masculinos de la historia del cine. Para ayudarte en esta tarea de aprendizaje, MecaNet está organizado en una serie de lecciones, con indicaciones posturales sobre cómo debes colocar tus dedos, una gran variedad de ejercicios y muchos juegos que harán que escribamos a mayor velocidad. MecaNet es un software de gran ayuda para aquellos profesionales que se dediquen al sector de la administración, formación, educación, comunicación u otros. También tenemos la posibilidad de guardar diferentes perfiles mientras estamos haciendo uso del programa, dando la opción a que varias personas disfruten de una experiencia adaptada a su ritmo de aprendizaje.
    https://blend.io/ruletacasinojue
    ESports Máquinas De Casino Gratis Spelen | Jugar bonos gratis para móviles 2020 La vinculación de MercadoPago a los casinos se presenta como una opción muy atractiva para los jugadores de Argentina por su rapidez y funcionamiento confiable, a pesar de no llevar muchos años en el mercado de las apuestas. ¿Amás las tarjetas rasca y gana, la lotería, los craps, las tragamonedas y los juegos de cartas? Debes saber que usando Mercado Pago podrás jugar a todos estos títulos en los mejores casinos del momento. La acción ejecutada se ha realizado correctamente. ¡Coge tus monedas y diviértete! Una buena forma de jugar a tragaperras gratis, pero de gran calidad, es a través de applets de redes sociales. Podrás acceder a aplicaciones gratis en sitios como Google Play para Android, el App Store de Apple o la tienda Ovi de Nokia, pero hay muchas más tiendas en las que los desarrolladores suben sus juegos. Algunos usuarios también los comparten a través de sitios de descarga. Simplemente asegúrate de usar un enlace de descarga que no tenga cookies. Las mejores aplicaciones de juegos tragamonedas gratis están basadas en navegadores Flash o HTML5.

  5. Tax说道:

    Social casinos are some of the most popular iGaming websites that allow gamers to play for free and interact with friends. Players can choose to play lots of casino games and access them via mobile or PC. Social casinos like Big Fish Games can also be found and accessed through popular social media networks like Facebook. Before we get stuck into the Big Fish Games review, it’s important to understand the differences between regular online casino sites and social casinos. Basically, social casinos are focused on providing games for free, rather than real money. If you play an online social casino game, for instance, you’re not allowed to win real money in the game if you live in the U.S. You can pay real money for virtual currency, but you can’t win real money because you are physically in a location that does not allow it. The problem for most online casino game companies is that it is hard to verify someone’s location. As a result, most of those companies don’t try to skirt the law and simply avoid real-money online gambling altogether.
    http://www.field-holdings.co.kr/g5/bbs/board.php?bo_table=free&wr_id=536978
    Jason Mercier made his debut in the professional poker world back in 2007 and quickly made a name for himself. In fact, he’s won five WSOP bracelets and a European Poker Tour Title. What’s more, the Global Poker Index (GPI) named him the number one poker player worldwide for 80 straight weeks. The top nine will walk away with at least $1.1 million: With the amount of money poker players can earn essentially being endless, the amount of money a poker player can make ranges from a little to a lot! All 10 players in August retained their spots in September, but that wouldn’t be the case in October. Daniel Alaei dropped from the middle of the pack to become unranked this month, but one small score should bring him back at any time. Also falling out is Sorel Mizzi, despite finishing fifth in the High Roller Turbo at EPT London. Taking their spots are two new stars: Dwyte Pilgrim and Tom Marchese. Both have proved over the year that they have what it takes and their recent success put them over the top and placed them into the bottom two spots.

  6. Tax说道:

    Probably the best poker player to come out of Argentina, Jose ‘Nacho’ Barbero is a hugely talented operator than has the uncanny ability to close out big events. The Team PokerStars Pro is a two-time title winner on the Latin American Poker Tour. In 2007, he started his live tournament career with his first live tournament cash. He has since won more than $300,000 in total. In 2014, he became a bracelet winner at the World Series of Poker. In 2017, he won almost $2 million at the PokerStars Championship in Barcelona. He has also had multiple top-five finishes in the event. Prior to the unofficial birth of the current era of poker in 2003 even the top poker players were relatively unknown except to their peers and niche cultists. Qualifying tournaments are events with 21 or more players and a buy-in of $1,500, or other currency equivalent, or higher that are open to the public, and are not specialty or selected audience events.
    https://erickefec741852.ttblogs.com/23544333/no-deposit-bonus-slot-casino
    Sweepstakes casinos, also called social casinos, sweeps casinos, or sweeps cash casinos provide games that don’t use real money. They instead use sweeps coins and gold coins that can be redeemed for free, and therefore not classified as gambling. However, sweeps coins can be redeemed for cash prizes without having to place a real money bet. Sweep Coins are a virtual currency that can only be won in free games or redeemed as part of a welcome bonus, promotion, or sweepstakes entry. Sweepstakes casinos are one of the most popular forms of gaming online in the US. You can play at all the best online casinos and enjoy New York casino games from your home and choose from the best casino bonuses and free bets when it is legal in NY. Visit the casino product on a sports betting website, or physical casino site, or download a casino app on iOS or Android to play online casino games. Transfer funds into your casino wallet if required. You will be prompted to do this.

  7. Naw说道:

    Avtorska pravica 2009 FULLTILT-POKER-REFERRAL-CODE.NET – Casino Online. Sitemap Sitemap The essence strikes you from the very start thanks to the aroma of basil complemented by the fruity citrus note. So igre na online slots igralnih avtomatih legalne? DescărcaÈ›i jocuri slot machine Sitemap Güncellenmiş: 2023-04-27 Sitemap Güncellenmiş: 2023-04-27 Avtorska pravica 2009 FULLTILT-POKER-REFERRAL-CODE.NET – Casino Online. Avtorska pravica 2009 FULLTILT-POKER-REFERRAL-CODE.NET – Casino Online. Güncellenmiş: 2023-04-27 Avtorska pravica 2009 FULLTILT-POKER-REFERRAL-CODE.NET – Casino Online. Sitemap Sitemap Avtorska pravica 2009 FULLTILT-POKER-REFERRAL-CODE.NET – Casino Online. Güncellenmiş: 2023-04-27 Güncellenmiş: 2023-04-27
    https://www.generate-bookmark.win/poker-avtomati-bonus-no-deposit-za-resnicen-denar
    Kanada ponovno dokazuje preostalemu svetu, zakaj je še naprej velika država. Danes se zdi prihodnost spletnih igralnic in iger, kot so brezplačni igralni avtomati, zelo pozitivna, zlasti za podjetja in sisteme, ki lahko obravnavajo transakcije stavnikov in druge informacije, se zdi precej pozitivna. Nedavno poročilo v Want to buy pyrotechnics? Visit pyro.ultras-tifo.net Večina spletnih igralnic ponuja svojim igralcem bonus dobrodošlice, ki ni namenjen le temu, da bi jih zvabil, ampak tudi prvič razširi igralno izkušnjo. To je mogoče z Instant Pay Bonusom 100% do 100 evrov, ki ga prejmete ob prvem pologu v višini najmanj 20 evrov. Dodanih je 100 brezplačnih vrtljajev, ki so razdeljeni na 20 dni s po 5 vrtljaji in se samodejno rezervirajo vsak dan. Za aktivacijo ponudbe ni potrebna bonusna koda Instant Pay Casino. Aktivacija se izvede s prvim pologom, ko sprejmete bonus. Tudi tisti, ki želijo igrati brez bonusa, lahko to storijo in začnejo brez brezplačnega denarja. Ponudbo je mogoče deaktivirati v blagajni ali prek podpore v živo, tako da ni treba izpolnjevati pogojev bonusa.

  8. doK说道:

    Zaregistrujte sa na eTIPOS a stavte svoju prvú stávku na ľubovoľnú udalosť ktoréhokoľvek zápasu anglickej futbalovej súťaže Premier League. Ak bude vaša prvá stávka nevýherná, stávková kancelária eTIPOS vám vráti celý váš vklad v podobe bonusu až do 50 € (pri 20 € vklade vrátia 20 €, pri vklade 100 € vrátia maximálne 50 €). Vklad na 1. stávku musí spĺňať podmienku minimálneho vkladu aspoň 20 €. Ponuka platí iba pre predzápasovú SÓLO stávku (LIVE nie) aj pre odvodené stávky (počet gólov, handicap, 1. polčas a pod.) Ponuka je platná pre registrácie po 1. auguste tohto roku. Bonus bude pripísaný do 5 pracovných dní na váš hráčsky účet. Hry so živým krupiérom nie sú v súčasnosti na webovej stránke Tipos Casino k dispozícii. Na blogu kasína sa však objavili informácie o tom, že sa v blízkej budúcnosti bude na stránke pracovať na zavedení tejto kategórie zábavy.
    http://www.meceng.co.kr/mec/bbs/board.php?bo_table=free&wr_id=22143
    Teraz budete prvý, kto bude vedieť aktualizácie od Schneider Electric. Čoskoro dostanete uvítaciu správu. Užite si to! Vaše Hodnotenie Keď pred týždňom jeho tím v prvom zápase prehral na ihrisku Feyenoordu Rotterdam 0:1, jeden holandský novinár sa ho spýtal, čo musí v odvete spraviť inak. Mini PCI-E USB Karty MINI PCI-Express USB3.0 Adaptér 19Pin Hlavičke USB3.0 5 gb SATA Napájania Pol Vysoké Full hd Vhodný pre PC V jeho „polčase“ sa radoval, ale nakoniec preňho dopadol nešťastne: vo štvrtok večer vypadol z Európskej ligy. V odvete štvrťfinále proti AS Rím prehral po predĺžení 1:4. Mini PCI-E slot karty PCI Express PCI-E 1x Rada USB 2.0 Pol Full Mini PCIE Karty Adaptéra 4Pin Napájanie Počítača, Komponentov pre PC

  9. casinocommunity说道:

    Looking at this article, I miss the time when I didn’t wear a mask. casinocommunity Hopefully this corona will end soon. My blog is a blog that mainly posts pictures of daily life before Corona and landscapes at that time. If you want to remember that time again, please visit us.

  10. VORVOSESK说道:

    2b and CEE MPA not shown treated animals Table 3 priligy amazon uk A comparative clinical trial designed to evaluate Kisqali in combination with hormone therapy consisting of tamoxifen or a non steroidal aromatase inhibitor plus goserelin compared to treatment with tamoxifen or an aromatase inhibitor plus goserelin alone, in premenopausal or perimenopausal women with HR HER2 advanced breast cancer in women who had not previously received endocrine therapy for advanced disease

  11. VORVOSESK说道:

    Moreover, the spatiotemporal distribution of drought events was found to be variable between and within AEZs in the basin so that more localized drought adaptation strategies could help to alleviate potential impacts nolvadex reduce puffy nipples

  12. VORVOSESK说道:

    Lentine KL, Schnitzler MA, Xiao H, Brennan DC lasix side effects on kidneys In one analysis of sales going forward, total sales of Humira are projected to surpass those of Lipitor and Enbrel to move into third place ahead of Enbrel

发表回复

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