Audio Style 1
Dirty Stoner
Vlad Annenkov00:00/ 00:23
<div class="audio-style-1">
<div class="container">
<div class="audio-player" data-src="themes/custom/music_plus/assets/images/discography-5.jpg" data-albumid="289">
<div class="icon-container">
<img src="themes/custom/music_plus/assets/images/audio.jpg">
</div>
<audio src="themes/custom/music_plus/assets/smooth-ac-guitar-loop-93bpm-137706.mp3"></audio>
<div class="controls">
<h6>Dirty Stoner</h6>
<span>Vlad Annenkov</span>
<div class="dt-audio-player-tool">
<button class="rewind-button">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="106" viewBox="0 0 150 106">
<path data-name="Path 42050" d="M143.235,7.776a18.512,18.512,0,0,0-19.5,2.3L81.915,44.7V21.819A15.546,15.546,0,0,0,72.651,7.776a18.512,18.512,0,0,0-19.5,2.3l-45,37.185a15.025,15.025,0,0,0,0,23.494l45,37.185A18.163,18.163,0,0,0,64.623,112a19.658,19.658,0,0,0,8.029-1.767,15.546,15.546,0,0,0,9.264-14.044V73.313l41.821,34.623A18.163,18.163,0,0,0,135.206,112a19.657,19.657,0,0,0,8.029-1.767A15.545,15.545,0,0,0,152.5,96.189V21.819a15.546,15.546,0,0,0-9.264-14.044Z" transform="translate(-2.499 -5.999)" fill="#141414"/>
</svg>
</button>
<button class="player-button">
<svg xmlns="http://www.w3.org/2000/svg" width="125" height="150" viewBox="0 0 125 150">
<path data-name="Icon awesome-play" d="M118.418,62.891,20.2,1.926C12.221-3.025,0,1.78,0,14.025v121.9c0,10.986,11.356,17.607,20.2,12.1l98.217-60.935c8.761-5.42,8.789-18.779,0-24.2Z" transform="translate(0 -0.002)" fill="#141414"/>
</svg>
</button>
<button class="forward-button">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="106" viewBox="0 0 150 106">
<path data-name="Path 42051" d="M11.763,7.776a18.512,18.512,0,0,1,19.5,2.3L73.082,44.7V21.819A15.546,15.546,0,0,1,82.346,7.776a18.512,18.512,0,0,1,19.5,2.3l45,37.185a15.025,15.025,0,0,1,0,23.494l-45,37.185A18.163,18.163,0,0,1,90.375,112a19.658,19.658,0,0,1-8.029-1.767,15.546,15.546,0,0,1-9.264-14.044V73.313L31.262,107.936A18.163,18.163,0,0,1,19.792,112a19.657,19.657,0,0,1-8.029-1.767A15.546,15.546,0,0,1,2.5,96.189V21.819A15.546,15.546,0,0,1,11.763,7.776Z" transform="translate(-2.499 -5.999)" fill="#141414"/>
</svg>
</button>
<input type="range" class="timeline" max="100" value="0">
<span class="my-audio-running-time time-elapsed">00:00</span>/
<span id="p-duration-289" class="my-audio-time">00:23</span>
<button class="sound-button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#3D3132">
<path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
Audio Style 2
Happy Mood Swing
Vlad Annenkov
00:00/
00:23
<div class="audio-style-1 audio-style-2">
<div class="container">
<div class="audio-player" data-src="themes/custom/music_plus/assets/images/discography-5.jpg" data-albumid="audioTwo">
<div class="icon-container">
<img src="themes/custom/music_plus/assets/images/discography-5.jpg">
</div>
<audio src="themes/custom/music_plus/assets/smooth-ac-guitar-loop-93bpm-137706.mp3"></audio>
<div class="song-and-singer">
<h5>Happy Mood Swing</h5>
<p>Vlad Annenkov</p>
</div>
<div class="controls">
<div class="dt-audio-player-tool">
<button class="rewind-button">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="106" viewBox="0 0 150 106">
<path data-name="Path 42050" d="M143.235,7.776a18.512,18.512,0,0,0-19.5,2.3L81.915,44.7V21.819A15.546,15.546,0,0,0,72.651,7.776a18.512,18.512,0,0,0-19.5,2.3l-45,37.185a15.025,15.025,0,0,0,0,23.494l45,37.185A18.163,18.163,0,0,0,64.623,112a19.658,19.658,0,0,0,8.029-1.767,15.546,15.546,0,0,0,9.264-14.044V73.313l41.821,34.623A18.163,18.163,0,0,0,135.206,112a19.657,19.657,0,0,0,8.029-1.767A15.545,15.545,0,0,0,152.5,96.189V21.819a15.546,15.546,0,0,0-9.264-14.044Z" transform="translate(-2.499 -5.999)" fill="#141414"/>
</svg>
</button>
<button class="player-button">
<svg xmlns="http://www.w3.org/2000/svg" width="125" height="150" viewBox="0 0 125 150">
<path data-name="Icon awesome-play" d="M118.418,62.891,20.2,1.926C12.221-3.025,0,1.78,0,14.025v121.9c0,10.986,11.356,17.607,20.2,12.1l98.217-60.935c8.761-5.42,8.789-18.779,0-24.2Z" transform="translate(0 -0.002)" fill="#141414"/>
</svg>
</button>
<button class="forward-button">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="106" viewBox="0 0 150 106">
<path data-name="Path 42051" d="M11.763,7.776a18.512,18.512,0,0,1,19.5,2.3L73.082,44.7V21.819A15.546,15.546,0,0,1,82.346,7.776a18.512,18.512,0,0,1,19.5,2.3l45,37.185a15.025,15.025,0,0,1,0,23.494l-45,37.185A18.163,18.163,0,0,1,90.375,112a19.658,19.658,0,0,1-8.029-1.767,15.546,15.546,0,0,1-9.264-14.044V73.313L31.262,107.936A18.163,18.163,0,0,1,19.792,112a19.657,19.657,0,0,1-8.029-1.767A15.546,15.546,0,0,1,2.5,96.189V21.819A15.546,15.546,0,0,1,11.763,7.776Z" transform="translate(-2.499 -5.999)" fill="#141414"/>
</svg>
</button>
<input type="range" class="timeline" max="100" value="0">
<div class="audio-countdowns">
<span class="my-audio-running-time time-elapsed">00:00</span>/
<span id="p-duration-audioTwo" class="my-audio-time">00:23</span>
</div>
<button class="reload-button">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
<path data-name="Path 42048" d="M146.837,89.982a8.313,8.313,0,0,0-10.393,5.408,59.367,59.367,0,0,1-57.119,40.934,59.05,59.05,0,0,1-59.7-58.239,59.05,59.05,0,0,1,59.7-58.239,60.337,60.337,0,0,1,38.662,13.894l-18.042-3a8.343,8.343,0,1,0-2.661,16.473l35.253,5.824h1.413a8.309,8.309,0,0,0,2.827-.5,2.743,2.743,0,0,0,.831-.5,6.483,6.483,0,0,0,1.663-.915l.748-.915c0-.416.748-.749,1.081-1.248s0-.832.416-1.165a11.149,11.149,0,0,0,.582-1.5l6.236-33.279a8.463,8.463,0,1,0-16.629-3.162l-2.245,12.064A76.545,76.545,0,0,0,79.325,3.206,75.684,75.684,0,0,0,3,78.084a75.684,75.684,0,0,0,76.325,74.879,75.831,75.831,0,0,0,73.332-52.581,8.321,8.321,0,0,0-5.82-10.4Z" transform="translate(-3 -2.972)" fill="#141414"/>
</svg>
</button>
<button class="repeat-button">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
<g data-name="Group 42766" transform="translate(12925.506 8645.005)">
<path data-name="Path 1350" d="M124.126,24.506H29.445L39.7,14.84a7.259,7.259,0,0,0,0-10.64,8.222,8.222,0,0,0-11.2,0L4.828,26.679a7.23,7.23,0,0,0,0,10.64L28.5,59.8a8.188,8.188,0,0,0,11.2,0,7.23,7.23,0,0,0,0-10.64L29.445,39.492h94.681c6.8-.125,12.416,5.008,12.545,11.464V69.464a7.9,7.9,0,0,0,15.78,0V50.956c-.13-14.733-12.812-26.575-28.325-26.45Z" transform="translate(-12928 -8647.001)" fill="#141414"/>
<path data-name="Path 1351" d="M126.453,29.159a8.222,8.222,0,0,0-11.2,0,7.259,7.259,0,0,0,0,10.64l10.257,9.666H30.825C24.027,49.591,18.41,44.457,18.28,38V19.493A7.7,7.7,0,0,0,10.39,12,7.7,7.7,0,0,0,2.5,19.493V38c.13,14.733,12.812,26.575,28.325,26.45h94.681l-10.257,9.666a7.23,7.23,0,0,0,0,10.64,8.188,8.188,0,0,0,11.2,0l23.67-22.479a7.23,7.23,0,0,0,0-10.64Z" transform="translate(-12927.963 -8581.979)" fill="#141414"/>
</g>
</svg>
</button>
<button class="sound-button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#3D3132">
<path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
Video Style 1
<div class="video-style-1 bg-image" style="background-image:url('themes/custom/music_plus/assets/images/img-3.jpg')">
<div class="container">
<div class="content">
<div class="title">LOST IN</div>
<div class="highlighted-text-title">PARADISE</div>
<div class="icon">
<div class="icon">
<a data-fancybox="video-gallery" data-src="https://www.youtube.com/watch?v=h1D5IFsUEFc" title="video">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
<path data-name="Union 33" d="M0,75A75,75,0,0,1,75,0h0A75,75,0,1,1,0,75Zm2.765,0A72.235,72.235,0,1,0,75,2.766,72.317,72.317,0,0,0,2.765,75Zm52.281-28.7L104.766,75,55.045,103.707Z" transform="translate(0 0.001)" fill="#141414"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
Video Style 2
<div class="video-style-2 bg-image" style="background-image:linear-gradient(rgba(20,20,20,50%),rgba(20,20,20,50%)),url('themes/custom/music_plus/assets/images/1.jpg')">
<div class="container">
<div class="content">
<a class="icon">
<div data-fancybox="video-gallery" data-src="https://www.youtube.com/watch?v=h1D5IFsUEFc" title="video">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
<path data-name="Union 33" d="M0,75A75,75,0,0,1,75,0h0A75,75,0,1,1,0,75Zm2.765,0A72.235,72.235,0,1,0,75,2.766,72.317,72.317,0,0,0,2.765,75Zm52.281-28.7L104.766,75,55.045,103.707Z" transform="translate(0 0.001)" fill="#141414"/>
</svg></div>
</a>
<div class="title">Rocking Fusion Concert</div>
</div>
</div>
</div>