Demos

Full featured audio player

This is an example of a basic audio player with multiple tracks in it.

0:00
2:21
https://upliftwebdesign.com/wp-content/uploads/2022/05/Caelon-Keys.mp3
Cae Keys
Truemuzic
True Volume 2
https://upliftwebdesign.com/wp-content/uploads/2022/05/Rectangle-38.png
https://upliftwebdesign.com/wp-content/uploads/2022/05/Dream.mp3
Dream
Truemuzic
True Volume 2
https://upliftwebdesign.com/wp-content/uploads/2022/05/Rectangle-40.png
https://upliftwebdesign.com/wp-content/uploads/2022/05/New-York-Vibe.mp3
Bright Lights
Truemuzic
True Volume 2
https://upliftwebdesign.com/wp-content/uploads/2022/05/Rectangle-37.png
HTML
CSS
<div class="tmp-container-1" tmplayer-init="main-player">
    <div class="info-wrapper">
        <div class="thumbnail"><img tmplayer-element="thumbnail" /></div>
        <div class="details">
            <div tmplayer-element="title" class="title"></div>
            <div tmplayer-element="artist" class="artist"></div>
        </div>
    </div>
    <div class="playback-wrapper">
        <div class="controls">
            <div tmplayer-button="previous" class="previous"></div>
            <div tmplayer-button="play" class="play"></div>
            <div tmplayer-button="pause" class="pause"></div>
            <div tmplayer-button="next" class="next"></div>
        </div>
        <div class="timing-wrapper">
            <div tmplayer-element="elapsed">0:00</div>
            <div tmplayer-element="progress-bar-wrapper" class="progress-bar-wrapper">
        		<div  class="progress-bar-background">
        			<div tmplayer-element="progress-bar" class="progress-bar"></div>
        		</div>
        	</div>
            <div tmplayer-element="duration">2:21</div>
        </div>
    </div>
    <div class="volume-container">
        <div tmplayer-button="volume-full" class="volume-full"></div>
        <div tmplayer-button="volume-half" class="volume-half"></div>
    	<div tmplayer-button="volume-mute" class="volume-mute"></div>
    	<div tmplayer-element="volume-bar-wrapper" class="volume-bar-wrapper">
    		<div class="volume-bar-background">
    			<div tmplayer-element="volume-bar" class="volume-bar"></div>
    		</div>
    	</div>
    </div>
    <div tmplayer-element="audio" class="tap-track">
        <div tmplayer-meta="audio-url" class="track-url">https://upliftwebdesign.com/wp-content/uploads/2022/05/Caelon-Keys.mp3</div> <!-- Audio url (Required) -->
        <div tmplayer-meta="title">Cae Keys</div> <!-- Audio title -->
        <div tmplayer-meta="artist">Truemuzic</div> <!-- Audio artist name -->
        <div tmplayer-meta="album">True Volume 2</div> <!-- Audio album name -->
        <div tmplayer-meta="thumbnail">https://upliftwebdesign.com/wp-content/uploads/2022/05/Rectangle-38.png</div> <!-- Audio thumbnail -->
    </div>
    <div tmplayer-element="audio" class="tap-track">
        <div tmplayer-meta="audio-url" class="track-url">https://upliftwebdesign.com/wp-content/uploads/2022/05/Dream.mp3</div> <!-- Audio url (Required) -->
        <div tmplayer-meta="title">Dream</div> <!-- Audio title -->
        <div tmplayer-meta="artist">Truemuzic</div> <!-- Audio artist name -->
        <div tmplayer-meta="album">True Volume 2</div> <!-- Audio album name -->
        <div tmplayer-meta="thumbnail">https://upliftwebdesign.com/wp-content/uploads/2022/05/Rectangle-40.png</div> <!-- Audio thumbnail -->
    </div>
    <div tmplayer-element="audio" class="tap-track">
        <div tmplayer-meta="audio-url" class="track-url">https://upliftwebdesign.com/wp-content/uploads/2022/05/New-York-Vibe.mp3</div> <!-- Audio url (Required) -->
        <div tmplayer-meta="title">Bright Lights</div> <!-- Audio title -->
        <div tmplayer-meta="artist">Truemuzic</div> <!-- Audio artist name -->
        <div tmplayer-meta="album">True Volume 2</div> <!-- Audio album name -->
        <div tmplayer-meta="thumbnail">https://upliftwebdesign.com/wp-content/uploads/2022/05/Rectangle-37.png</div> <!-- Audio thumbnail -->
    </div>
</div>
.tmp-container-1 {
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding: 14px 20px;
  background-color: #DDDDDD;
}
.tmp-container-1 .info-wrapper {
  display: flex;
  align-items: center;
}
.tmp-container-1 .info-wrapper .thumbnail {
  height: 42px;
  width: 42px;
  border-radius: 5px;
  background-color: #434343;
  overflow: hidden;
  margin-right: 20px;
}
.tmp-container-1 .info-wrapper .thumbnail > img {
  height: 42px;
  width: 42px;
  -o-object-fit: cover;
     object-fit: cover;
}
.tmp-container-1 .info-wrapper .details .title {
  color: #000;
  font-size: 18px;
  line-height: 1.1em;
}
.tmp-container-1 .info-wrapper .details .artist {
  color: #434343;
  font-size: 14px;
  line-height: 1.1em;
}
.tmp-container-1 .playback-wrapper {
  display: flex;
  flex-grow: 1;
  margin: auto 40px;
  justify-content: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.tmp-container-1 .playback-wrapper .controls {
  display: flex;
  align-items: center;
}
.tmp-container-1 .playback-wrapper .controls > * {
  padding: 5px;
}
.tmp-container-1 .playback-wrapper .controls > .play::after {
  content: '';
  display: block;
  height: 16px;
  width: 16px;
  background: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.2119 7.13367C15.8786 7.51857 15.8786 8.48082 15.2119 8.86572L4.51842 15.0396C3.85175 15.4245 3.01842 14.9434 3.01842 14.1736L3.01842 1.8258C3.01842 1.056 3.85175 0.574875 4.51842 0.959775L15.2119 7.13367Z" fill="black"/></svg>') no-repeat;
  cursor: pointer;
  opacity: 0.7;
}
.tmp-container-1 .playback-wrapper .controls > .previous::after {
  content: '';
  display: block;
  height: 16px;
  width: 16px;
  background: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 6.83859C3.83333 7.22349 3.83333 8.18574 4.5 8.57064L11.3807 12.5432C12.0473 12.9281 12.8807 12.447 12.8807 11.6772L12.8807 3.73205C12.8807 2.96225 12.0473 2.48112 11.3807 2.86602L4.5 6.83859Z" fill="black"/><rect width="0.988716" height="11.4089" rx="0.494358" transform="matrix(-1 0 0 1 4.71875 2.00098)" fill="black" /></svg>') no-repeat;
  cursor: pointer;
  opacity: 0.7;
}
.tmp-container-1 .playback-wrapper .controls > .next::after {
  content: '';
  display: block;
  height: 16px;
  width: 16px;
  background: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.3809 6.83859C12.0475 7.22349 12.0475 8.18574 11.3809 8.57064L4.50018 12.5432C3.83351 12.9281 3.00018 12.447 3.00018 11.6772L3.00018 3.73205C3.00018 2.96225 3.83351 2.48112 4.50018 2.86602L11.3809 6.83859Z" fill="black"/><rect x="11.1621" y="2.00098" width="0.988716" height="11.4089" rx="0.494358" fill="black"/></svg>') no-repeat;
  cursor: pointer;
  opacity: 0.7;
}
.tmp-container-1 .playback-wrapper .controls > .pause::after {
  content: '';
  display: block;
  height: 16px;
  width: 16px;
  background: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4.0918" width="1.7975" height="15.9998" rx="0.898749" fill="black"/><rect x="10.1104" width="1.7975" height="15.9998" rx="0.898749" fill="black"/></svg>') no-repeat;
  cursor: pointer;
  opacity: 0.7;
}
.tmp-container-1 .playback-wrapper .timing-wrapper {
  display: flex;
  flex-grow: 1;
  align-items: center;
  max-width: 500px;
  margin-left: 30px;
  font-size: 16px;
}
.tmp-container-1 .playback-wrapper .timing-wrapper .progress-bar-wrapper {
  height: 20px;
  flex-grow: 1;
  cursor: pointer;
  margin: 0px  20px;
  display: flex;
  align-items: center;
}
.tmp-container-1 .playback-wrapper .timing-wrapper .progress-bar-wrapper:hover .progress-bar-background .progress-bar:after {
  opacity: 1;
}
.tmp-container-1 .playback-wrapper .timing-wrapper .progress-bar-wrapper .progress-bar-background {
  height: 2px;
  width: 100%;
  background-color: #A0A0A0;
}
.tmp-container-1 .playback-wrapper .timing-wrapper .progress-bar-wrapper .progress-bar-background .progress-bar {
  height: 100%;
  width: 0%;
  background-color: #00CEB5;
  position: relative;
}
.tmp-container-1 .playback-wrapper .timing-wrapper .progress-bar-wrapper .progress-bar-background .progress-bar:after {
  content: '';
  height: 12px;
  width: 12px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.12);
  position: absolute;
  right: -5px;
  top: -5px;
  opacity: 0px;
  transition: opacity 0.2s ease;
}
@media screen and (max-width: 768px) {
  .tmp-container-1 .playback-wrapper {
    margin: auto 0px;
    justify-content: flex-end;
  }
  .tmp-container-1 .playback-wrapper .controls {
    -moz-column-gap: 10px;
         column-gap: 10px;
  }
  .tmp-container-1 .playback-wrapper .timing-wrapper {
    display: none;
  }
}
.tmp-container-1 .volume-container {
  display: flex;
  align-items: center;
}
.tmp-container-1 .volume-container > .volume-full {
  padding: 5px;
}
.tmp-container-1 .volume-container > .volume-full::after {
  content: '';
  display: block;
  height: 19px;
  width: 19px;
  background: url('data:image/svg+xml;utf8,<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0364 3.24575C9.90782 3.19013 9.7668 3.16961 9.62771 3.1863C9.48863 3.20299 9.35647 3.25629 9.24471 3.34075L5.46055 6.33325H2.57096C2.361 6.33325 2.15964 6.41665 2.01117 6.56512C1.8627 6.71359 1.7793 6.91495 1.7793 7.12491V11.8749C1.7793 12.0849 1.8627 12.2862 2.01117 12.4347C2.15964 12.5832 2.361 12.6666 2.57096 12.6666H5.46055L9.20513 15.6591C9.34442 15.7708 9.51739 15.8322 9.69596 15.8332C9.81421 15.8352 9.93113 15.808 10.0364 15.7541C10.1711 15.6899 10.2849 15.589 10.3648 15.4629C10.4446 15.3369 10.4872 15.1908 10.4876 15.0416V3.95825C10.4872 3.80903 10.4446 3.66297 10.3648 3.5369C10.2849 3.41084 10.1711 3.30991 10.0364 3.24575ZM8.9043 13.3949L6.22846 11.2574C6.08918 11.1457 5.9162 11.0843 5.73763 11.0832H3.36263V7.91658H5.73763C5.9162 7.91554 6.08918 7.85417 6.22846 7.74241L8.9043 5.60491V13.3949ZM12.1818 3.23783C12.0778 3.22328 11.972 3.22934 11.8704 3.25568C11.7688 3.28202 11.6733 3.32811 11.5895 3.39133C11.5057 3.45455 11.4352 3.53366 11.382 3.62414C11.3287 3.71462 11.2939 3.8147 11.2793 3.91866C11.2647 4.02263 11.2708 4.12844 11.2971 4.23006C11.3235 4.33168 11.3696 4.42711 11.4328 4.51092C11.5605 4.68017 11.7502 4.79177 11.9601 4.82116C13.0813 4.99394 14.1036 5.56226 14.8422 6.42333C15.5807 7.2844 15.9867 8.38134 15.9867 9.51575C15.9867 10.6502 15.5807 11.7471 14.8422 12.6082C14.1036 13.4692 13.0813 14.0376 11.9601 14.2103C11.7502 14.225 11.5546 14.3225 11.4166 14.4814C11.2785 14.6402 11.2092 14.8475 11.2239 15.0574C11.2386 15.2674 11.3361 15.4629 11.4949 15.601C11.6538 15.739 11.861 15.8084 12.071 15.7937H12.1818C13.6803 15.567 15.0478 14.8104 16.0361 13.6614C17.0243 12.5124 17.5678 11.0471 17.5678 9.53158C17.5678 8.01604 17.0243 6.55073 16.0361 5.40173C15.0478 4.25272 13.6803 3.49619 12.1818 3.2695V3.23783ZM11.8176 10.9803C11.6077 11.0139 11.4196 11.1295 11.2949 11.3018C11.1702 11.474 11.119 11.6887 11.1526 11.8987C11.1862 12.1086 11.3018 12.2966 11.4741 12.4214C11.6463 12.5461 11.861 12.5973 12.071 12.5637C12.1569 12.5627 12.2422 12.5494 12.3243 12.5241C12.941 12.3054 13.4749 11.901 13.8524 11.3666C14.2299 10.8321 14.4326 10.1938 14.4326 9.5395C14.4326 8.88515 14.2299 8.24687 13.8524 7.71242C13.4749 7.17797 12.941 6.7736 12.3243 6.55491C12.1248 6.48772 11.9068 6.50253 11.7183 6.59606C11.5297 6.68959 11.3861 6.8542 11.3189 7.05366C11.2517 7.25313 11.2665 7.47111 11.36 7.65967C11.4536 7.84822 11.6182 7.99189 11.8176 8.05908C12.118 8.17303 12.3767 8.37567 12.5592 8.64009C12.7417 8.90451 12.8394 9.2182 12.8394 9.5395C12.8394 9.86079 12.7417 10.1745 12.5592 10.4389C12.3767 10.7033 12.118 10.906 11.8176 11.0199V10.9803Z" fill="#434343"/></svg>') no-repeat;
  cursor: pointer;
}
.tmp-container-1 .volume-container > .volume-half {
  padding: 5px;
}
.tmp-container-1 .volume-container > .volume-half::after {
  content: '';
  display: block;
  height: 19px;
  width: 19px;
  background: url('data:image/svg+xml;utf8,<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0364 3.24575C9.90782 3.19013 9.7668 3.16961 9.62771 3.1863C9.48863 3.20299 9.35647 3.25629 9.24471 3.34075L5.46055 6.33325H2.57096C2.361 6.33325 2.15964 6.41665 2.01117 6.56512C1.8627 6.71359 1.7793 6.91495 1.7793 7.12491V11.8749C1.7793 12.0849 1.8627 12.2862 2.01117 12.4347C2.15964 12.5832 2.361 12.6666 2.57096 12.6666H5.46055L9.20513 15.6591C9.34442 15.7708 9.51739 15.8322 9.69596 15.8332C9.81421 15.8352 9.93113 15.808 10.0364 15.7541C10.1711 15.6899 10.2849 15.589 10.3648 15.4629C10.4446 15.3369 10.4872 15.1908 10.4876 15.0416V3.95825C10.4872 3.80903 10.4446 3.66297 10.3648 3.5369C10.2849 3.41084 10.1711 3.30991 10.0364 3.24575ZM8.9043 13.3949L6.22846 11.2574C6.08918 11.1457 5.9162 11.0843 5.73763 11.0832H3.36263V7.91658H5.73763C5.9162 7.91554 6.08918 7.85417 6.22846 7.74241L8.9043 5.60491V13.3949ZM15.7601 5.01908C15.6111 4.87001 15.4089 4.78626 15.198 4.78626C14.9872 4.78626 14.785 4.87001 14.636 5.01908C14.4869 5.16815 14.4031 5.37034 14.4031 5.58116C14.4031 5.79199 14.4869 5.99417 14.636 6.14325C15.1021 6.6087 15.4664 7.16603 15.7056 7.77982C15.9448 8.39362 16.0537 9.05046 16.0254 9.70861C15.9971 10.3668 15.8323 11.0118 15.5413 11.6028C15.2503 12.1938 14.8395 12.7179 14.3351 13.1416C14.2126 13.2463 14.125 13.386 14.084 13.5418C14.043 13.6977 14.0505 13.8624 14.1056 14.0138C14.1607 14.1653 14.2607 14.2963 14.3922 14.3895C14.5238 14.4826 14.6806 14.5333 14.8418 14.5349C15.0268 14.5353 15.206 14.4709 15.3485 14.3528C16.0221 13.7886 16.571 13.0904 16.9602 12.3025C17.3494 11.5147 17.5703 10.6545 17.6091 9.77658C17.6478 8.8987 17.5034 8.02237 17.1851 7.20332C16.8668 6.38427 16.3815 5.64042 15.7601 5.01908ZM13.5197 7.2595C13.4459 7.18568 13.3583 7.12713 13.2618 7.08718C13.1654 7.04723 13.062 7.02667 12.9576 7.02667C12.8532 7.02667 12.7499 7.04723 12.6534 7.08718C12.557 7.12713 12.4694 7.18568 12.3955 7.2595C12.3217 7.33331 12.2632 7.42094 12.2232 7.51738C12.1833 7.61382 12.1627 7.71719 12.1627 7.82158C12.1627 7.92597 12.1833 8.02933 12.2232 8.12578C12.2632 8.22222 12.3217 8.30985 12.3955 8.38366C12.6929 8.67923 12.8609 9.08066 12.8626 9.49991C12.8628 9.73056 12.8126 9.95847 12.7155 10.1677C12.6184 10.3769 12.4768 10.5624 12.3005 10.7112C12.2204 10.7776 12.1541 10.8592 12.1055 10.9514C12.057 11.0435 12.0271 11.1442 12.0175 11.2479C12.0079 11.3516 12.0189 11.4562 12.0498 11.5556C12.0807 11.6551 12.131 11.7474 12.1976 11.8274C12.2646 11.907 12.3467 11.9726 12.4391 12.0205C12.5315 12.0683 12.6324 12.0975 12.7361 12.1063C12.8397 12.1151 12.9441 12.1034 13.0433 12.0719C13.1424 12.0403 13.2344 11.9895 13.3139 11.9224C13.6678 11.6256 13.9526 11.255 14.1482 10.8365C14.3437 10.418 14.4454 9.96184 14.446 9.49991C14.4415 8.66083 14.1091 7.85677 13.5197 7.2595Z" fill="#434343"/></svg>') no-repeat;
  cursor: pointer;
}
.tmp-container-1 .volume-container > .volume-mute {
  padding: 5px;
}
.tmp-container-1 .volume-container > .volume-mute::after {
  content: '';
  display: block;
  height: 19px;
  width: 19px;
  background: url('data:image/svg+xml;utf8,<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.5989 3.24575C13.4703 3.19013 13.3293 3.16961 13.1902 3.1863C13.0511 3.20299 12.919 3.25629 12.8072 3.34075L9.02305 6.33325H6.13346C5.9235 6.33325 5.72214 6.41665 5.57367 6.56512C5.4252 6.71359 5.3418 6.91495 5.3418 7.12491V11.8749C5.3418 12.0849 5.4252 12.2862 5.57367 12.4347C5.72214 12.5832 5.9235 12.6666 6.13346 12.6666H9.02305L12.7676 15.6591C12.9069 15.7708 13.0799 15.8322 13.2585 15.8332C13.3767 15.8352 13.4936 15.808 13.5989 15.7541C13.7336 15.6899 13.8474 15.589 13.9273 15.4629C14.0071 15.3369 14.0497 15.1908 14.0501 15.0416V3.95825C14.0497 3.80903 14.0071 3.66297 13.9273 3.5369C13.8474 3.41084 13.7336 3.30991 13.5989 3.24575ZM12.4668 13.3949L9.79096 11.2574C9.65168 11.1457 9.4787 11.0843 9.30013 11.0832H6.92513V7.91658H9.30013C9.4787 7.91554 9.65168 7.85417 9.79096 7.74241L12.4668 5.60491V13.3949Z" fill="#434343"/></svg>') no-repeat;
  cursor: pointer;
}
.tmp-container-1 .volume-container img {
  width: 19px;
  height: 19px;
  cursor: pointer;
}
.tmp-container-1 .volume-container .volume-bar-wrapper {
  min-width: 105px;
  width: 105px;
  height: 20px;
  flex-grow: 1;
  cursor: pointer;
  margin: 0px  10px;
  display: flex;
  align-items: center;
}
.tmp-container-1 .volume-container .volume-bar-wrapper:hover .volume-bar-background .volume-bar:after {
  opacity: 1;
}
.tmp-container-1 .volume-container .volume-bar-wrapper .volume-bar-background {
  height: 2px;
  width: 100%;
  background-color: #A0A0A0;
}
.tmp-container-1 .volume-container .volume-bar-wrapper .volume-bar-background .volume-bar {
  height: 100%;
  width: 100%;
  background-color: #00CEB5;
  position: relative;
}
.tmp-container-1 .volume-container .volume-bar-wrapper .volume-bar-background .volume-bar:after {
  content: '';
  height: 12px;
  width: 12px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.12);
  position: absolute;
  right: -5px;
  top: -5px;
  opacity: 0px;
  transition: opacity 0.2s ease;
}
.tmp-container-1 > .tap-track {
  display: none;
}
@media screen and (max-width: 1024px) {
  .tmp-container-1 .volume-container {
    display: none;
  }
}

Need help? Contact us at info@upliftwebdesign.com