Notification texts go here. Contact Us Buy Now!
$10.00
10
$000

Get your blog ready With details you won't find anywhere.

blogger widgets | How To Create Mini Music Player For blogspot

abdalrahman
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated


Hello everyone today I will share a mini music player for the article. Currently this music player is very hot right now .






If you want to see it first,
how-to-create-mini-music-player-for-blogspot



Source code


<link href='https://fonts.googleapis.com/css?family=Dancing+Script|Lobster|Pattaya|Srisakdi&display=swap' rel='stylesheet'/>
<style>
*{box-sizing:border-box}.icon{display:inline-block;width:1em;height:1em;stroke-width:0;stroke:currentColor;fill:currentColor}.wrapper{width:100%;display:flex;align-items:center;justify-content:center;min-height:100vh;background-size:cover}@media screen and (max-width:700px),(max-height:500px){.wrapper{flex-wrap:wrap;flex-direction:column}}.player{background:#eef3f7;width:410px;min-height:480px;box-shadow:0 15px 35px -5px rgba(50,88,130,0.32);border-radius:15px;padding:30px}@media screen and (max-width:576px),(max-height:500px){.player{width:95%;padding:20px;margin-top:75px;min-height:initial;padding-bottom:30px;max-width:400px}}.player__top{display:flex;align-items:flex-start;position:relative;z-index:4}@media screen and (max-width:576px),(max-height:500px){.player__top{flex-wrap:wrap}}.player-cover{width:300px;height:300px;margin-left:-70px;flex-shrink:0;position:relative;z-index:2;border-radius:15px;z-index:1}@media screen and (max-width:576px),(max-height:500px){.player-cover{margin-top:-70px;margin-bottom:25px;width:290px;height:230px;margin-left:auto;margin-right:auto}}.player-cover__item{background-repeat:no-repeat;background-position:center;background-size:cover;width:100%;height:100%;border-radius:15px;position:absolute;left:0;top:0}.player-cover__item:before{content:"";background:inherit;width:100%;height:100%;box-shadow:0 10px 40px 0 rgba(76,70,124,0.5);display:block;z-index:1;position:absolute;top:30px;transform:scale(0.9);filter:blur(10px);opacity:0.9;border-radius:15px}.player-cover__item:after{content:"";background:inherit;width:100%;height:100%;box-shadow:0 10px 40px 0 rgba(76,70,124,0.5);display:block;z-index:2;position:absolute;border-radius:15px}.player-cover__img{width:100%;height:100%;object-fit:cover;border-radius:15px;box-shadow:0 10px 40px 0 rgba(76,70,124,0.5);user-select:none;pointer-events:none}.player-controls{flex:1;padding-left:20px;display:flex;flex-direction:column;align-items:center}@media screen and (max-width:576px),(max-height:500px){.player-controls{flex-direction:row;padding-left:0;width:100%;flex:unset}}.player-controls__item{display:inline-flex;font-size:30px;padding:5px;margin-bottom:10px;color:#acb8cc;cursor:pointer;width:50px;height:50px;align-items:center;justify-content:center;position:relative;transition:all 0.3s ease-in-out}@media screen and (max-width:576px),(max-height:500px){.player-controls__item{font-size:26px;padding:5px;margin-right:10px;color:#acb8cc;cursor:pointer;width:40px;height:40px;margin-bottom:0}}.player-controls__item::before{content:"";position:absolute;width:100%;height:100%;border-radius:50%;background:#fff;transform:scale(0.5);opacity:0;box-shadow:0 5px 10px 0 rgba(76,70,124,0.2);transition:all 0.3s ease-in-out;transition:all 0.4s cubic-bezier(0.35,0.57,0.13,0.88)}@media screen and (min-width:500px){.player-controls__item:hover{color:#532ab9}.player-controls__item:hover::before{opacity:1;transform:scale(1.3)}}@media screen and (max-width:576px),(max-height:500px){.player-controls__item:active{color:#532ab9}.player-controls__item:active::before{opacity:1;transform:scale(1.3)}}.player-controls__item .icon{position:relative;z-index:2}.player-controls__item.-xl{margin-bottom:0;font-size:95px;filter:drop-shadow(0 11px 6px rgba(172,184,204,0.45));color:#fff;width:auto;height:auto;display:inline-flex}@media screen and (max-width:576px),(max-height:500px){.player-controls__item.-xl{margin-left:auto;font-size:75px;margin-right:0}}.player-controls__item.-xl:before{display:none}.player-controls__item.-favorite.active{color:red}[v-cloak]{display:none}[v-cloak] > *{display:none}.progress{width:100%;margin-top:-15px;user-select:none}.progress__top{display:flex;align-items:flex-end;justify-content:space-between}.progress__duration{color:#71829e;font-weight:700;font-size:20px;opacity:0.5}.progress__time{margin-top:2px;color:#71829e;font-weight:700;font-size:16px;opacity:0.7}.progress__bar{height:6px;width:100%;cursor:pointer;background-color:#d0d8e6;display:inline-block;border-radius:10px}.progress__current{height:inherit;width:0%;background-color:#a3b3ce;border-radius:10px}.album-info{color:#71829e;flex:1;padding-right:60px;user-select:none}@media screen and (max-width:576px),(max-height:500px){.album-info{padding-right:30px}}.album-info__name{font-size:23px;font-weight:bold;margin-bottom:12px;line-height:1.3em;font-family:'Lobster',cursive}@media screen and (max-width:576px),(max-height:500px){.album-info__name{font-size:18px;margin-bottom:9px}}.album-info__track{font-weight:400;font-size:20px;opacity:0.7;line-height:1.3em;min-height:52px}@media screen and (max-width:576px),(max-height:500px){.album-info__track{font-size:18px;min-height:50px}}.github-btn{position:absolute;right:40px;bottom:50px;text-decoration:none;padding:15px 25px;border-radius:4px;box-shadow:0 4px 30px -6px rgba(36,52,70,0.65);background:#24292e;color:#fff;font-weight:bold;letter-spacing:1px;font-size:16px;transition:all 0.3s ease-in-out}@media screen and (min-width:500px){.github-btn:hover{transform:scale(1.1);box-shadow:0 17px 20px -6px rgba(36,52,70,0.36)}}@media screen and (max-width:700px){.github-btn{position:relative;bottom:auto;right:auto;margin-top:20px}.github-btn:active{transform:scale(1.1);box-shadow:0 17px 20px -6px rgba(36,52,70,0.36)}}.scale-out-enter-active{transition:all 0.35s ease-in-out}.scale-out-leave-active{transition:all 0.35s ease-in-out}.scale-out-enter{transform:scale(0.55);pointer-events:none;opacity:0}.scale-out-leave-to{transform:scale(1.2);pointer-events:none;opacity:0}.scale-in-enter-active{transition:all 0.35s ease-in-out}.scale-in-leave-active{transition:all 0.35s ease-in-out}.scale-in-enter{transform:scale(1.2);pointer-events:none;opacity:0}.scale-in-leave-to{transform:scale(0.55);pointer-events:none;opacity:0}
</style>
 <div class="wrapper" id="app">
 <div class="player">
 <div class="player__top">
 <div class="player-cover">
 <transition-group :name="transitionName">
 <div class="player-cover__item" v-if="$index === currentTrackIndex" :style="{ backgroundImage: `url(${track.cover})` }" v-for="(track, $index) in tracks" :key="$index"></div>
 </transition-group>
 </div>
 <div class="player-controls">
 <div class="player-controls__item -favorite" :class="{ active : currentTrack.favorited }" @click="favorite">
 <svg class="icon">
 <use xlink:href="#icon-heart-o"></use>
 </svg>
 </div>
 <a :href="currentTrack.url" target="_blank" class="player-controls__item">
 <svg class="icon">
 <use xlink:href="#icon-link"></use>
 </svg>
 </a>
 <div class="player-controls__item" @click="prevTrack">
 <svg class="icon">
 <use xlink:href="#icon-prev"></use>
 </svg>
 </div>
 <div class="player-controls__item" @click="nextTrack">
 <svg class="icon">
 <use xlink:href="#icon-next"></use>
 </svg>
 </div>
 <div class="player-controls__item -xl js-play" @click="play">
 <svg class="icon">
 <use xlink:href="#icon-pause" v-if="isTimerPlaying"></use>
 <use xlink:href="#icon-play" v-else></use>
 </svg>
 </div>
 </div>
 </div>
 <div class="progress" ref="progress">
 <div class="progress__top">
 <div class="album-info" v-if="currentTrack">
 <div class="album-info__name" >{{ currentTrack.artist }}</div>
 <div class="album-info__track">{{ currentTrack.name }}</div>
 </div>
 <div class="progress__duration">{{ duration }}</div>
 </div>
 <div class="progress__bar" @click="clickProgress">
 <div class="progress__current" :style="{ width : barWidth }"></div>
 </div>
 <div class="progress__time">{{ currentTime }}</div>
 </div>
 <div v-cloak></div>
 </div>
 </div>
 <svg xmlns="http://www.w3.org/2000/svg" hidden xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
 <symbol id="icon-heart-o" viewBox="0 0 32 32">
 <title>icon-heart-o</title>
 <path d="M22.88 1.952c-2.72 0-5.184 1.28-6.88 3.456-1.696-2.176-4.16-3.456-6.88-3.456-4.48 0-9.024 3.648-9.024 10.592 0 7.232 7.776 12.704 15.072 17.248 0.256 0.16 0.544 0.256 0.832 0.256s0.576-0.096 0.832-0.256c7.296-4.544 15.072-10.016 15.072-17.248 0-6.944-4.544-10.592-9.024-10.592zM16 26.56c-4.864-3.072-12.736-8.288-12.736-14.016 0-5.088 3.040-7.424 5.824-7.424 2.368 0 4.384 1.504 5.408 4.032 0.256 0.608 0.832 0.992 1.472 0.992s1.248-0.384 1.472-0.992c1.024-2.528 3.040-4.032 5.408-4.032 2.816 0 5.824 2.304 5.824 7.424 0.064 5.728-7.808 10.976-12.672 14.016z"></path>
 <path d="M16 30.144c-0.32 0-0.64-0.096-0.896-0.256-7.296-4.576-15.104-10.048-15.104-17.344 0-7.008 4.576-10.688 9.12-10.688 2.656 0 5.152 1.216 6.88 3.392 1.728-2.144 4.224-3.392 6.88-3.392 4.544 0 9.12 3.68 9.12 10.688 0 7.296-7.808 12.768-15.104 17.344-0.256 0.16-0.576 0.256-0.896 0.256zM9.12 2.048c-4.448 0-8.928 3.616-8.928 10.496 0 7.168 7.744 12.64 15.008 17.152 0.48 0.288 1.12 0.288 1.568 0 7.264-4.544 15.008-9.984 15.008-17.152 0-6.88-4.48-10.496-8.928-10.496-2.656 0-5.088 1.216-6.816 3.392l-0.032 0.128-0.064-0.096c-1.696-2.176-4.192-3.424-6.816-3.424zM16 26.688l-0.064-0.032c-3.808-2.4-12.768-8.032-12.768-14.112 0-5.152 3.072-7.52 5.952-7.52 2.432 0 4.48 1.536 5.504 4.096 0.224 0.576 0.768 0.928 1.376 0.928s1.152-0.384 1.376-0.928c1.024-2.56 3.072-4.096 5.504-4.096 2.848 0 5.952 2.336 5.952 7.52 0 6.080-8.96 11.712-12.768 14.112l-0.064 0.032zM9.12 5.248c-2.752 0-5.728 2.304-5.728 7.328 0 5.952 8.8 11.488 12.608 13.92 3.808-2.4 12.608-7.968 12.608-13.92 0-5.024-2.976-7.328-5.728-7.328-2.336 0-4.32 1.472-5.312 3.968-0.256 0.64-0.864 1.056-1.568 1.056s-1.312-0.416-1.568-1.056c-0.992-2.496-2.976-3.968-5.312-3.968z"></path>
 <path d="M6.816 20.704c0.384 0.288 0.512 0.704 0.48 1.12 0.224 0.256 0.384 0.608 0.384 0.96 0 0.032 0 0.032 0 0.064 0.16 0.128 0.32 0.256 0.48 0.384 0.128 0.064 0.256 0.16 0.384 0.256 0.096 0.064 0.192 0.16 0.256 0.224 0.8 0.576 1.632 1.12 2.496 1.664 0.416 0.128 0.8 0.256 1.056 0.32 1.984 0.576 4.064 0.8 6.112 0.928 2.688-1.92 5.312-3.904 8-5.792 0.896-1.088 1.92-2.080 2.912-3.104v-7.552c-0.096-0.128-0.192-0.288-0.32-0.416-0.768-1.024-1.184-2.176-1.6-3.296-0.768-0.416-1.536-0.8-2.336-1.12-0.128-0.064-0.256-0.096-0.384-0.16h-21.568v12.992c1.312 0.672 2.496 1.6 3.648 2.528z"></path>
 </symbol>
 <symbol id="icon-heart" viewBox="0 0 32 32">
 <title>icon-heart</title>
 <path d="M22.88 1.952c-2.72 0-5.184 1.28-6.88 3.456-1.696-2.176-4.16-3.456-6.88-3.456-4.48 0-9.024 3.648-9.024 10.592 0 7.232 7.776 12.704 15.072 17.248 0.256 0.16 0.544 0.256 0.832 0.256s0.576-0.096 0.832-0.256c7.296-4.544 15.072-10.016 15.072-17.248 0-6.944-4.544-10.592-9.024-10.592zM16 26.56c-4.864-3.072-12.736-8.288-12.736-14.016 0-5.088 3.040-7.424 5.824-7.424 2.368 0 4.384 1.504 5.408 4.032 0.256 0.608 0.832 0.992 1.472 0.992s1.248-0.384 1.472-0.992c1.024-2.528 3.040-4.032 5.408-4.032 2.816 0 5.824 2.304 5.824 7.424 0.064 5.728-7.808 10.976-12.672 14.016z"></path>
 <path d="M16 30.144c-0.32 0-0.64-0.096-0.896-0.256-7.296-4.576-15.104-10.048-15.104-17.344 0-7.008 4.576-10.688 9.12-10.688 2.656 0 5.152 1.216 6.88 3.392 1.728-2.144 4.224-3.392 6.88-3.392 4.544 0 9.12 3.68 9.12 10.688 0 7.296-7.808 12.768-15.104 17.344-0.256 0.16-0.576 0.256-0.896 0.256zM9.12 2.048c-4.448 0-8.928 3.616-8.928 10.496 0 7.168 7.744 12.64 15.008 17.152 0.48 0.288 1.12 0.288 1.568 0 7.264-4.544 15.008-9.984 15.008-17.152 0-6.88-4.48-10.496-8.928-10.496-2.656 0-5.088 1.216-6.816 3.392l-0.032 0.128-0.064-0.096c-1.696-2.176-4.192-3.424-6.816-3.424zM16 26.688l-0.064-0.032c-3.808-2.4-12.768-8.032-12.768-14.112 0-5.152 3.072-7.52 5.952-7.52 2.432 0 4.48 1.536 5.504 4.096 0.224 0.576 0.768 0.928 1.376 0.928s1.152-0.384 1.376-0.928c1.024-2.56 3.072-4.096 5.504-4.096 2.848 0 5.952 2.336 5.952 7.52 0 6.080-8.96 11.712-12.768 14.112l-0.064 0.032zM9.12 5.248c-2.752 0-5.728 2.304-5.728 7.328 0 5.952 8.8 11.488 12.608 13.92 3.808-2.4 12.608-7.968 12.608-13.92 0-5.024-2.976-7.328-5.728-7.328-2.336 0-4.32 1.472-5.312 3.968-0.256 0.64-0.864 1.056-1.568 1.056s-1.312-0.416-1.568-1.056c-0.992-2.496-2.976-3.968-5.312-3.968z"></path>
 </symbol>
 <symbol id="icon-infinity" viewBox="0 0 32 32">
 <title>icon-infinity</title>
 <path d="M29.312 20.832c-1.28 1.28-3.008 1.984-4.832 1.984s-3.52-0.704-4.832-1.984c-0.032-0.032-0.224-0.224-0.256-0.256v0 1.28c0 0.448-0.352 0.8-0.8 0.8s-0.8-0.352-0.8-0.8v-3.168c0-0.448 0.352-0.8 0.8-0.8h3.168c0.448 0 0.8 0.352 0.8 0.8s-0.352 0.8-0.8 0.8h-1.28c0.032 0.032 0.224 0.224 0.256 0.256 0.992 0.992 2.304 1.536 3.68 1.536 1.408 0 2.72-0.544 3.68-1.536 0.992-0.992 1.536-2.304 1.536-3.68s-0.544-2.72-1.536-3.68c-0.992-0.992-2.304-1.536-3.68-1.536-1.408 0-2.72 0.544-3.68 1.536l-8.416 8.448c-1.312 1.312-3.072 1.984-4.832 1.984s-3.488-0.672-4.832-1.984c-2.656-2.656-2.656-6.976 0-9.632s6.976-2.656 9.632 0c0.032 0.032 0.16 0.16 0.192 0.192l0.064 0.064v-1.28c0-0.448 0.352-0.8 0.8-0.8s0.8 0.352 0.8 0.8v3.168c0 0.448-0.352 0.8-0.8 0.8h-3.168c-0.448 0-0.8-0.352-0.8-0.8s0.352-0.8 0.8-0.8h1.28l-0.096-0.064c-0.032-0.032-0.16-0.16-0.192-0.192-0.992-0.992-2.304-1.536-3.68-1.536s-2.72 0.544-3.68 1.536c-2.048 2.048-2.048 5.344 0 7.392 0.992 0.992 2.304 1.536 3.68 1.536s2.72-0.544 3.68-1.536l8.512-8.512c1.28-1.28 3.008-1.984 4.832-1.984s3.52 0.704 4.832 1.984c2.624 2.656 2.624 7.008-0.032 9.664z"></path>
 <path d="M24.512 23.488c-1.6 0-3.136-0.512-4.416-1.44-0.128 0.704-0.736 1.248-1.44 1.248-0.8 0-1.472-0.672-1.472-1.472v-3.168c0-0.8 0.672-1.472 1.472-1.472h3.168c0.8 0 1.472 0.672 1.472 1.472 0 0.608-0.384 1.152-0.928 1.376 0.64 0.352 1.376 0.544 2.144 0.544 1.216 0 2.368-0.48 3.2-1.344 0.864-0.864 1.344-1.984 1.344-3.2s-0.48-2.368-1.344-3.2c-0.864-0.864-1.984-1.344-3.2-1.344s-2.368 0.48-3.2 1.344l-8.512 8.48c-1.408 1.408-3.296 2.176-5.312 2.176s-3.872-0.768-5.312-2.176c-2.912-2.912-2.912-7.68 0-10.592 1.408-1.408 3.296-2.176 5.312-2.176 0 0 0 0 0 0 1.6 0 3.136 0.512 4.416 1.44 0.128-0.704 0.736-1.248 1.472-1.248 0.8 0 1.472 0.672 1.472 1.472v3.168c0 0.8-0.672 1.472-1.472 1.472h-3.168c-0.8 0-1.472-0.672-1.472-1.472 0-0.608 0.384-1.152 0.928-1.376-0.64-0.352-1.376-0.544-2.144-0.544-1.216 0-2.368 0.48-3.2 1.344-1.76 1.76-1.76 4.64 0 6.432 0.864 0.864 2.016 1.344 3.2 1.344 1.216 0 2.368-0.48 3.2-1.344l8.48-8.544c1.408-1.408 3.296-2.208 5.312-2.208s3.872 0.768 5.312 2.208c1.408 1.408 2.176 3.296 2.176 5.312s-0.768 3.872-2.208 5.312v0c0 0 0 0 0 0-1.408 1.408-3.296 2.176-5.28 2.176zM18.752 18.912l1.44 1.44c1.152 1.152 2.688 1.792 4.32 1.792s3.168-0.64 4.32-1.792v0c1.152-1.152 1.792-2.688 1.792-4.32s-0.64-3.168-1.792-4.32c-1.152-1.152-2.688-1.792-4.352-1.792-1.632 0-3.168 0.64-4.32 1.792l-8.48 8.448c-1.12 1.12-2.592 1.728-4.16 1.728s-3.072-0.608-4.16-1.728c-2.304-2.304-2.304-6.048 0-8.352 1.12-1.12 2.592-1.728 4.16-1.728s3.072 0.608 4.16 1.728l1.44 1.408h-2.912c-0.064 0-0.128 0.064-0.128 0.128s0.064 0.128 0.128 0.128h3.168c0.064 0 0.128-0.064 0.128-0.128v-3.168c0-0.064-0.064-0.128-0.128-0.128s-0.128 0.064-0.128 0.128v2.912l-1.408-1.408c-1.152-1.152-2.688-1.792-4.352-1.792-1.632 0-3.168 0.64-4.32 1.792-2.4 2.4-2.4 6.272 0 8.672 1.152 1.152 2.688 1.792 4.32 1.792s3.168-0.64 4.32-1.792l8.512-8.512c1.12-1.12 2.592-1.728 4.16-1.728s3.072 0.608 4.16 1.728c1.12 1.12 1.728 2.592 1.728 4.16s-0.608 3.072-1.728 4.16c-1.12 1.12-2.592 1.728-4.16 1.728s-3.072-0.608-4.16-1.728l-1.408-1.408h2.912c0.064 0 0.128-0.064 0.128-0.128s-0.064-0.128-0.128-0.128h-3.168c-0.064 0-0.128 0.064-0.128 0.128v3.168c0 0.064 0.064 0.128 0.128 0.128s0.128-0.064 0.128-0.128v-2.88z"></path>
 </symbol>
 <symbol id="icon-pause" viewBox="0 0 32 32">
 <title>icon-pause</title>
 <path d="M16 0.32c-8.64 0-15.68 7.040-15.68 15.68s7.040 15.68 15.68 15.68 15.68-7.040 15.68-15.68-7.040-15.68-15.68-15.68zM16 29.216c-7.296 0-13.216-5.92-13.216-13.216s5.92-13.216 13.216-13.216 13.216 5.92 13.216 13.216-5.92 13.216-13.216 13.216z"></path>
 <path d="M16 32c-8.832 0-16-7.168-16-16s7.168-16 16-16 16 7.168 16 16-7.168 16-16 16zM16 0.672c-8.448 0-15.328 6.88-15.328 15.328s6.88 15.328 15.328 15.328c8.448 0 15.328-6.88 15.328-15.328s-6.88-15.328-15.328-15.328zM16 29.568c-7.488 0-13.568-6.080-13.568-13.568s6.080-13.568 13.568-13.568c7.488 0 13.568 6.080 13.568 13.568s-6.080 13.568-13.568 13.568zM16 3.104c-7.104 0-12.896 5.792-12.896 12.896s5.792 12.896 12.896 12.896c7.104 0 12.896-5.792 12.896-12.896s-5.792-12.896-12.896-12.896z"></path>
 <path d="M12.16 22.336v0c-0.896 0-1.6-0.704-1.6-1.6v-9.472c0-0.896 0.704-1.6 1.6-1.6v0c0.896 0 1.6 0.704 1.6 1.6v9.504c0 0.864-0.704 1.568-1.6 1.568z"></path>
 <path d="M19.84 22.336v0c-0.896 0-1.6-0.704-1.6-1.6v-9.472c0-0.896 0.704-1.6 1.6-1.6v0c0.896 0 1.6 0.704 1.6 1.6v9.504c0 0.864-0.704 1.568-1.6 1.568z"></path>
 </symbol>
 <symbol id="icon-play" viewBox="0 0 32 32">
 <title>icon-play</title>
 <path d="M21.216 15.168l-7.616-5.088c-0.672-0.416-1.504 0.032-1.504 0.832v10.176c0 0.8 0.896 1.248 1.504 0.832l7.616-5.088c0.576-0.416 0.576-1.248 0-1.664z"></path>
 <path d="M13.056 22.4c-0.224 0-0.416-0.064-0.608-0.16-0.448-0.224-0.704-0.672-0.704-1.152v-10.176c0-0.48 0.256-0.928 0.672-1.152s0.928-0.224 1.344 0.064l7.616 5.088c0.384 0.256 0.608 0.672 0.608 1.088s-0.224 0.864-0.608 1.088l-7.616 5.088c-0.192 0.16-0.448 0.224-0.704 0.224zM13.056 10.272c-0.096 0-0.224 0.032-0.32 0.064-0.224 0.128-0.352 0.32-0.352 0.576v10.176c0 0.256 0.128 0.48 0.352 0.576 0.224 0.128 0.448 0.096 0.64-0.032l7.616-5.088c0.192-0.128 0.288-0.32 0.288-0.544s-0.096-0.416-0.288-0.544l-7.584-5.088c-0.096-0.064-0.224-0.096-0.352-0.096z"></path>
 <path d="M16 0.32c-8.64 0-15.68 7.040-15.68 15.68s7.040 15.68 15.68 15.68 15.68-7.040 15.68-15.68-7.040-15.68-15.68-15.68zM16 29.216c-7.296 0-13.216-5.92-13.216-13.216s5.92-13.216 13.216-13.216 13.216 5.92 13.216 13.216-5.92 13.216-13.216 13.216z"></path>
 <path d="M16 32c-8.832 0-16-7.168-16-16s7.168-16 16-16 16 7.168 16 16-7.168 16-16 16zM16 0.672c-8.448 0-15.328 6.88-15.328 15.328s6.88 15.328 15.328 15.328c8.448 0 15.328-6.88 15.328-15.328s-6.88-15.328-15.328-15.328zM16 29.568c-7.488 0-13.568-6.080-13.568-13.568s6.080-13.568 13.568-13.568c7.488 0 13.568 6.080 13.568 13.568s-6.080 13.568-13.568 13.568zM16 3.104c-7.104 0-12.896 5.792-12.896 12.896s5.792 12.896 12.896 12.896c7.104 0 12.896-5.792 12.896-12.896s-5.792-12.896-12.896-12.896z"></path>
 </symbol>
 <symbol id="icon-link" viewBox="0 0 32 32">
 <title>link</title>
 <path d="M23.584 17.92c0 0.864 0 1.728 0 2.56 0 1.312 0 2.656 0 3.968 0 0.352 0.032 0.736-0.032 1.12 0.032-0.16 0.032-0.288 0.064-0.448-0.032 0.224-0.096 0.448-0.16 0.64 0.064-0.128 0.128-0.256 0.16-0.416-0.096 0.192-0.192 0.384-0.32 0.576 0.096-0.128 0.16-0.224 0.256-0.352-0.128 0.16-0.288 0.32-0.48 0.48 0.128-0.096 0.224-0.16 0.352-0.256-0.192 0.128-0.352 0.256-0.576 0.32 0.128-0.064 0.256-0.128 0.416-0.16-0.224 0.096-0.416 0.16-0.64 0.16 0.16-0.032 0.288-0.032 0.448-0.064-0.256 0.032-0.512 0.032-0.768 0.032-0.448 0-0.896 0-1.312 0-1.472 0-2.976 0-4.448 0-1.824 0-3.616 0-5.44 0-1.568 0-3.104 0-4.672 0-0.736 0-1.44 0-2.176 0-0.128 0-0.224 0-0.352-0.032 0.16 0.032 0.288 0.032 0.448 0.064-0.224-0.032-0.448-0.096-0.64-0.16 0.128 0.064 0.256 0.128 0.416 0.16-0.192-0.096-0.384-0.192-0.576-0.32 0.128 0.096 0.224 0.16 0.352 0.256-0.16-0.128-0.32-0.288-0.48-0.48 0.096 0.128 0.16 0.224 0.256 0.352-0.128-0.192-0.256-0.352-0.32-0.576 0.064 0.128 0.128 0.256 0.16 0.416-0.096-0.224-0.16-0.416-0.16-0.64 0.032 0.16 0.032 0.288 0.064 0.448-0.032-0.256-0.032-0.512-0.032-0.768 0-0.448 0-0.896 0-1.312 0-1.472 0-2.976 0-4.448 0-1.824 0-3.616 0-5.44 0-1.568 0-3.104 0-4.672 0-0.736 0-1.44 0-2.176 0-0.128 0-0.224 0.032-0.352-0.032 0.16-0.032 0.288-0.064 0.448 0.032-0.224 0.096-0.448 0.16-0.64-0.064 0.128-0.128 0.256-0.16 0.416 0.096-0.192 0.192-0.384 0.32-0.576-0.096 0.128-0.16 0.224-0.256 0.352 0.128-0.16 0.288-0.32 0.48-0.48-0.128 0.096-0.224 0.16-0.352 0.256 0.192-0.128 0.352-0.256 0.576-0.32-0.128 0.064-0.256 0.128-0.416 0.16 0.224-0.096 0.416-0.16 0.64-0.16-0.16 0.032-0.288 0.032-0.448 0.064 0.48-0.064 0.96-0.032 1.44-0.032 0.992 0 1.952 0 2.944 0 1.216 0 2.432 0 3.616 0 1.056 0 2.112 0 3.168 0 0.512 0 1.024 0 1.536 0 0 0 0 0 0.032 0 0.448 0 0.896-0.192 1.184-0.48s0.512-0.768 0.48-1.184c-0.032-0.448-0.16-0.896-0.48-1.184s-0.736-0.48-1.184-0.48c-0.64 0-1.28 0-1.92 0-1.408 0-2.816 0-4.224 0-1.44 0-2.848 0-4.256 0-0.672 0-1.344 0-2.016 0-0.736 0-1.472 0.192-2.112 0.576s-1.216 0.96-1.568 1.6c-0.384 0.64-0.544 1.376-0.544 2.144 0 0.672 0 1.376 0 2.048 0 1.28 0 2.56 0 3.84 0 1.504 0 3.040 0 4.544 0 1.408 0 2.848 0 4.256 0 0.992 0 1.952 0 2.944 0 0.224 0 0.448 0 0.64 0 0.864 0.224 1.76 0.768 2.464 0.16 0.192 0.288 0.384 0.48 0.576s0.384 0.352 0.608 0.512c0.32 0.224 0.64 0.384 1.024 0.512 0.448 0.16 0.928 0.224 1.408 0.224 0.16 0 0.32 0 0.48 0 0.896 0 1.792 0 2.72 0 1.376 0 2.784 0 4.16 0 1.536 0 3.040 0 4.576 0 1.312 0 2.656 0 3.968 0 0.768 0 1.536 0 2.336 0 0.416 0 0.832-0.032 1.248-0.128 1.504-0.32 2.784-1.6 3.104-3.104 0.128-0.544 0.128-1.056 0.128-1.568 0-0.608 0-1.184 0-1.792 0-1.408 0-2.816 0-4.224 0-0.256 0-0.512 0-0.768 0-0.448-0.192-0.896-0.48-1.184s-0.768-0.512-1.184-0.48c-0.448 0.032-0.896 0.16-1.184 0.48-0.384 0.384-0.576 0.768-0.576 1.248v0z"></path>
 <path d="M32 11.232c0-0.8 0-1.568 0-2.368 0-1.248 0-2.528 0-3.776 0-0.288 0-0.576 0-0.864 0-0.896-0.768-1.696-1.696-1.696-0.8 0-1.568 0-2.368 0-1.248 0-2.528 0-3.776 0-0.288 0-0.576 0-0.864 0-0.448 0-0.896 0.192-1.184 0.48s-0.512 0.768-0.48 1.184c0.032 0.448 0.16 0.896 0.48 1.184s0.736 0.48 1.184 0.48c0.8 0 1.568 0 2.368 0 1.248 0 2.528 0 3.776 0 0.288 0 0.576 0 0.864 0-0.576-0.576-1.12-1.12-1.696-1.696 0 0.8 0 1.568 0 2.368 0 1.248 0 2.528 0 3.776 0 0.288 0 0.576 0 0.864 0 0.448 0.192 0.896 0.48 1.184s0.768 0.512 1.184 0.48c0.448-0.032 0.896-0.16 1.184-0.48 0.352-0.256 0.544-0.64 0.544-1.12v0z"></path>
 <path d="M15.040 21.888c0.16-0.16 0.288-0.288 0.448-0.448 0.384-0.384 0.8-0.8 1.184-1.184 0.608-0.608 1.184-1.184 1.792-1.792 0.704-0.704 1.44-1.44 2.176-2.176 0.8-0.8 1.568-1.568 2.368-2.368s1.6-1.6 2.4-2.4c0.736-0.736 1.504-1.504 2.24-2.24 0.64-0.64 1.248-1.248 1.888-1.888 0.448-0.448 0.896-0.896 1.344-1.344 0.224-0.224 0.448-0.416 0.64-0.64 0 0 0.032-0.032 0.032-0.032 0.32-0.32 0.48-0.768 0.48-1.184s-0.192-0.896-0.48-1.184c-0.32-0.288-0.736-0.512-1.184-0.48-0.512 0.032-0.928 0.16-1.248 0.48-0.16 0.16-0.288 0.288-0.448 0.448-0.384 0.384-0.8 0.8-1.184 1.184-0.608 0.608-1.184 1.184-1.792 1.792-0.704 0.704-1.44 1.44-2.176 2.176-0.8 0.8-1.568 1.568-2.368 2.368s-1.6 1.6-2.4 2.4c-0.736 0.736-1.504 1.504-2.24 2.24-0.64 0.64-1.248 1.248-1.888 1.888-0.448 0.448-0.896 0.896-1.344 1.344-0.224 0.224-0.448 0.416-0.64 0.64 0 0-0.032 0.032-0.032 0.032-0.32 0.32-0.48 0.768-0.48 1.184s0.192 0.896 0.48 1.184c0.32 0.288 0.736 0.512 1.184 0.48 0.48 0 0.928-0.16 1.248-0.48v0z"></path>
 </symbol>
 <symbol id="icon-next" viewBox="0 0 32 32">
 <title>next</title>
 <path d="M2.304 18.304h14.688l-4.608 4.576c-0.864 0.864-0.864 2.336 0 3.232 0.864 0.864 2.336 0.864 3.232 0l8.448-8.48c0.864-0.864 0.864-2.336 0-3.232l-8.448-8.448c-0.448-0.448-1.056-0.672-1.632-0.672s-1.184 0.224-1.632 0.672c-0.864 0.864-0.864 2.336 0 3.232l4.64 4.576h-14.688c-1.248 0-2.304 0.992-2.304 2.272s1.024 2.272 2.304 2.272z"></path>
 <path d="M29.696 26.752c1.248 0 2.304-1.024 2.304-2.304v-16.928c0-1.248-1.024-2.304-2.304-2.304s-2.304 1.024-2.304 2.304v16.928c0.064 1.28 1.056 2.304 2.304 2.304z"></path>
 </symbol>
 <symbol id="icon-prev" viewBox="0 0 32 32">
 <title>prev</title>
 <path d="M29.696 13.696h-14.688l4.576-4.576c0.864-0.864 0.864-2.336 0-3.232-0.864-0.864-2.336-0.864-3.232 0l-8.448 8.48c-0.864 0.864-0.864 2.336 0 3.232l8.448 8.448c0.448 0.448 1.056 0.672 1.632 0.672s1.184-0.224 1.632-0.672c0.864-0.864 0.864-2.336 0-3.232l-4.608-4.576h14.688c1.248 0 2.304-1.024 2.304-2.304s-1.024-2.24-2.304-2.24z"></path>
 <path d="M2.304 5.248c-1.248 0-2.304 1.024-2.304 2.304v16.928c0 1.248 1.024 2.304 2.304 2.304s2.304-1.024 2.304-2.304v-16.928c-0.064-1.28-1.056-2.304-2.304-2.304z"></path>
 </symbol>
 </defs>
 </svg>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js'></script>
<script>
 new Vue({
 el: "#app",
 data() {
 return {
 audio: null,circleLeft: null,barWidth: null,duration: null,currentTime: null,isTimerPlaying: false,
 tracks:[{
 name: "Tên tác giả",
 artist: "Tên bài hát",
 cover: "link ảnh",
 source: "link nhạc định dạng .mp3",
 url: "link nhạc định dạng .mp3",
 favorited: false
 }],
 currentTrack: null,currentTrackIndex: 0,transitionName: null
 };
 },
 methods: {
 play() {
 if (this.audio.paused) {
 this.audio.play();
 this.isTimerPlaying = true;
 } else {
 this.audio.pause();
 this.isTimerPlaying = false;
 }
 },
 generateTime() {
 let width = (100 / this.audio.duration) * this.audio.currentTime;
 this.barWidth = width + "%";
 this.circleLeft = width + "%";
 let durmin = Math.floor(this.audio.duration / 60);
 let dursec = Math.floor(this.audio.duration - durmin * 60);
 let curmin = Math.floor(this.audio.currentTime / 60);
 let cursec = Math.floor(this.audio.currentTime - curmin * 60);
 if (durmin < 10) {
 durmin = "0" + durmin;
 }
 if (dursec < 10) {
 dursec = "0" + dursec;
 }
 if (curmin < 10) {
 curmin = "0" + curmin;
 }
 if (cursec < 10) {
 cursec = "0" + cursec;
 }
 this.duration = durmin + ":" + dursec;
 this.currentTime = curmin + ":" + cursec;
 },
 updateBar(x) {
 let progress = this.$refs.progress;
 let maxduration = this.audio.duration;
 let position = x - progress.offsetLeft;
 let percentage = (100 * position) / progress.offsetWidth;
 if (percentage > 100) {
 percentage = 100;
 }
 if (percentage < 0) {
 percentage = 0;
 }
 this.barWidth = percentage + "%";
 this.circleLeft = percentage + "%";
 this.audio.currentTime = (maxduration * percentage) / 100;
 this.audio.play();
 },
 clickProgress(e) {
 this.isTimerPlaying = true;
 this.audio.pause();
 this.updateBar(e.pageX);
 },
 prevTrack() {
 this.transitionName = "scale-in";
 this.isShowCover = false;
 if (this.currentTrackIndex > 0) {
 this.currentTrackIndex--;
 } else {
 this.currentTrackIndex = this.tracks.length - 1;
 }
 this.currentTrack = this.tracks[this.currentTrackIndex];
 this.resetPlayer();
 },
 nextTrack() {
 this.transitionName = "scale-out";
 this.isShowCover = false;
 if (this.currentTrackIndex < this.tracks.length - 1) {
 this.currentTrackIndex++;
 } else {
 this.currentTrackIndex = 0;
 }
 this.currentTrack = this.tracks[this.currentTrackIndex];
 this.resetPlayer();
 },
 resetPlayer() {
 this.barWidth = 0;
 this.circleLeft = 0;
 this.audio.currentTime = 0;
 this.audio.src = this.currentTrack.source;
 setTimeout(() => {
 if(this.isTimerPlaying) {
 this.audio.play();
 } else {
 this.audio.pause();
 }
 }, 300);
 },
 favorite() {
 this.tracks[this.currentTrackIndex].favorited = !this.tracks[
 this.currentTrackIndex
 ].favorited;
 }
 },
 created() {
 let vm = this;
 this.currentTrack = this.tracks[0];
 this.audio = new Audio();
 this.audio.src = this.currentTrack.source;
 this.audio.ontimeupdate = function() {
 vm.generateTime();
 };
 this.audio.onloadedmetadata = function() {
 vm.generateTime();
 };
 this.audio.onended = function() {
 vm.nextTrack();
 this.isTimerPlaying = true;
 };
 for (let index = 0; index < this.tracks.length; index++) {
 const element = this.tracks[index];
 let link = document.createElement('link');
 link.rel = "prefetch";
 link.href = element.cover;
 link.as = "image"
 document.head.appendChild(link)
 }
 }
 });
</script>


Epilogue

Above is the entire Source code of the music player. If you have any suggestions or complaints about copyright, please comment below. Good luck!


Read Also

Getting Info...

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.