Skip to content

Instantly share code, notes, and snippets.

@bigmmind
Created Jun 5, 2020
Embed
What would you like to do?
plyr copy
<div id="audio-player" class="">
<div class="poster">
</div>
<div class="player-info">
</div>
<audio id="player" controls>
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-7.mp3" type="audio/mpeg">
</audio>
</div>
jQuery(document).ready(function($){
/* custom controls layout */
const controls = '<div class="plyr__controls"> \
<div class="plyr__progress"> \
<input data-plyr="seek" type="range" min="0" max="100" step="0.01" value="0" aria-label="Seek"> \
<progress class="plyr__progress__buffer" min="0" max="100" value="0">% buffered</progress> \
<span role="tooltip" class="plyr__tooltip">00:00</span> \
</div>\
<div class="d-flex justify-content-between">\
<div class="plyr__time plyr__time--current" aria-label="Current time">00:00</div> \
<div class="plyr__time plyr__time--duration" aria-label="Duration">00:00</div> </div>\
<button type="button" class="plyr__control" data-plyr="restart"> \
<svg role="presentation"><use xlink:href="#plyr-restart"></use></svg> \
<span class="plyr__tooltip" role="tooltip">Restart</span> \
</button> \
<button type="button" class="plyr__control" data-plyr="rewind"> \
<svg role="presentation"><use xlink:href="#plyr-rewind"></use></svg> \
<span class="plyr__tooltip" role="tooltip">Rewind {seektime} secs</span> \
</button> \
<button type="button" class="plyr__control" aria-label="Play {title}" data-plyr="play"> \
<svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-pause"></use></svg> \
<svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-play"></use></svg> \
<span class="label--pressed plyr__tooltip" role="tooltip">Pause</span> \
<span class="label--not-pressed plyr__tooltip" role="tooltip">Play</span> \
</button> \
<button type="button" class="plyr__control" data-plyr="fast-forward"> \
<svg role="presentation"><use xlink:href="#plyr-fast-forward"></use></svg> \
<span class="plyr__tooltip" role="tooltip">Forward {seektime} secs</span> \
</button> \
<button type="button" class="plyr__control" aria-label="Mute" data-plyr="mute"> \
<svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-muted"></use></svg> \
<svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-volume"></use></svg> \
<span class="label--pressed plyr__tooltip" role="tooltip">Unmute</span> \
<span class="label--not-pressed plyr__tooltip" role="tooltip">Mute</span> \
</button> \
</div>';
const player = new Plyr('#player', { controls });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.5.8/plyr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
body,
html {
height: 100%;
display: flex;
margin: 0;
padding: 0;
box-sizing: border-box;
justify-content: center;
align-items: center;
}
body {
background: #000;
}
#audio-player {
width: 420px;
height: 600px;
background-color: #190d23;
}
.poster {
position: relative;
width: 300px;
height: 280px;
border-radius: 5px;
background-color: rgb(51, 56, 125);
background-image: url('https://i.picsum.photos/id/1082/280/300.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
mix-blend-mode: lighten;
overflow: hidden;
margin: 2rem auto;
}
.poster:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.75);
}
/* plyr.css override */
.plyr--audio .plyr__controls {
display: block;
background-color: transparent !important;
padding: 20px 32px !important;
}
.plyr__time + .plyr__time::before {
content: '';
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.5.8/plyr.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment