Music Player Section

Music Player Section

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

 Compatibility: Compatible on most Shopify themes, from Debut to Dawn 2.0.

Add your favorite music in your website and let your customer hear it. Google chrome does not allow automatic audio playing without the permission of the user. Add a music player that pick up where it left off when changing website pages. 

To start:

1. Go to your Admin store > Online store > Themes > Actions > Edit code.

2. Under the section folder, create a new section file, name it "music-player", then paste the code below. 

 {% assign autoplayAudio = section.settings.autoplay_audio %}
{% if autoplayAudio == true %}
<div class="autoplayPermission">
<span class="closeAudio">X</span>
<span style="text-align: center;">Website contains audio</span>
<button onclick="init()"> Allow autoplay</button>
</div>
{% endif %}
<div class="audioContainer {{section.settings.audio_position }}">
<div class="audioWrapper">
<div class="audioBox">
<div class="audioList">
{% for block in section.blocks %}
{% assign totalAudio = forloop.length %}
{% assign audio_file = block.settings.audio_file %}
<div class="audioTrack" data-track= "{{forloop.index0}}" onclick="playTrack(this.dataset.track)">
<div class="musicWrapper">
{% if block.settings.image != blank %}
<div class="imageWrapper">
<img src="{{block.settings.image | img_url: 'small' }}" alt="{{block.settings.image | img_url: 'small' }}">
</div>
{% endif %}
<div class="musicInfo" >
<p style="margin: 0; text-align: center">
{% assign audio = audio_file | split: "/" | slice: -1 %}
{{ audio | split: "." | slice: 0 | replace: "[" , "" | replace: "]" , "" | replace: "\" , "" | replace: '"' , "" | replace: "-" , " " | upcase }}
</p>
{% if block.settings.audio_artist != blank %} <span style="font-size: 13px">{{block.settings.audio_artist}}</span> {% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
<div class="activeContainer">
{% for block in section.blocks %}
{% assign audio_file = block.settings.audio_file %}
<div class="audioActive" data-active= "{{forloop.index0}}">
<audio class="audio" allow="autoplay" {{ block.shopify_attributes }}
data-audio= "{{audio_file}}"
data-audio-index= "{{forloop.index0}}">
<source src="{{block.settings.audio_file}}" type="audio/mp3">
Your browser is not supported to play the audio!
</audio>
<div class="musicWrapper">
{% if block.settings.image != blank %}
<div class="imageWrapper">
<img src="{{block.settings.image | img_url: 'small' }}" alt="{{block.settings.image | img_url: 'small' }}">
</div>
{% endif %}
<div class="musicInfo" >
<p style="margin: 0; text-align: center">
{% assign audio = audio_file | split: "/" | slice: -1 %}
{{ audio | split: "." | slice: 0 | replace: "[" , "" | replace: "]" , "" | replace: "\" , "" | replace: '"' , "" | replace: "-" , " " | upcase }}
</p>
<div class="musicDurWrap">
<input type="range" class="musicDur inputRange" min="0" value="0" data-duration="{{forloop.index0}}">
<div style="display: flex;"> <span class="currentTime"></span>&nbsp/&nbsp<span class="audioDuration"></span></div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="audioController">
<div class="prevCtrl control">
<svg viewBox="0 0 50 50">
<path d="M21.91,18.49L4.08,1.56C3.16,0.69,1.67,1.35,1.67,2.62L1.5,47.37c0,1.28,1.49,1.95,2.41,1.08l17.84-16.83"/>
<path d="M21.74,31.85l-0.06,15.12c0,1.28,1.49,1.95,2.41,1.08l23.72-22.37c0.61-0.58,0.61-1.57,0-2.15L24.26,1.16
c-0.92-0.87-2.41-0.21-2.41,1.07l-0.06,15.87"/>
</svg>
</div>
<div class="pausePlay" id="pausePlay">
<div class="play control">
<svg viewBox="0 0 50 50">
<path d="M8.59,2.93v44.14c0,1.34,1.04,2.22,1.93,1.61l32.23-22.07c0.97-0.67,0.97-2.56,0-3.22L10.52,1.32
C9.63,0.71,8.59,1.59,8.59,2.93z"/>
</svg>
</div>
<div class="pause control" style="display: none">
<svg viewBox="0 0 50 50" style="stroke-width: 6">
<polyline points="0,0 0,0 0,0 "/>
<path d="M12.52,5.24L12.1,44.59c-0.02,1.5,1.15,2.72,2.6,2.72h0.04c1.47,0,2.67-1.23,2.67-2.75V5.11
c0-1.34-1.05-2.42-2.34-2.42h-0.05C13.64,2.69,12.53,3.83,12.52,5.24z"/>
<path d="M32.46,5.24l-0.42,39.35c-0.02,1.5,1.15,2.72,2.6,2.72h0.04c1.47,0,2.67-1.23,2.67-2.75V5.11
c0-1.34-1.05-2.42-2.34-2.42h-0.05C33.59,2.69,32.48,3.83,32.46,5.24z"/>
</svg>
</div>
</div>
<div class=" nextCtrl control">
<svg viewBox="0 0 50 50">
<path d="M21.91,18.49L4.08,1.56C3.16,0.69,1.67,1.35,1.67,2.62L1.5,47.37c0,1.28,1.49,1.95,2.41,1.08l17.84-16.83"/>
<path d="M21.74,31.85l-0.06,15.12c0,1.28,1.49,1.95,2.41,1.08l23.72-22.37c0.61-0.58,0.61-1.57,0-2.15L24.26,1.16
c-0.92-0.87-2.41-0.21-2.41,1.07l-0.06,15.87"/>
</svg>
</div>
<div class="shuffleAudio">
<svg viewBox="0 0 50 50">
<path style="stroke-width:10" d="M1.76,8.95c2.37,0.04,4.11,0.07,4.75,0.28c8.03,2.63,19.21,25.25,28.76,30.16c1.55,0.8,5.89,0.36,5.89,0.36"/>
<path style="stroke-width:10" d="M41.41,9.39c0,0-3.84-0.37-5.21,0.29c-2.05,0.98-8.51,9.52-9.68,10.48"/>
<path style="stroke-width:10" d="M1.76,40.52c2.13-0.03,3.69-0.06,4.26-0.24c3.54-1.09,10.11-8.49,11.58-9.68"/>
<polygon style="stroke-width: 6" points="41.16,36.94 41.16,42.8 44.65,39.76 "/>
<polygon style="stroke-width: 6" points="41.16,6.36 41.16,12.22 44.65,9.18 "/>
</svg>
</div>
<div class="volumeWrap">
<div class="rangeWrap">
<input type="range" class="volRange inputRange" min="0" max="100" value="50">
</div>
<div class="volumeBox">
<div class="volume">
<svg class="vol" viewBox="0 0 50 50">
<polygon points="0.52,15.3 0.52,34.96 7.68,35.21 20.57,48.63 20.57,24.94 20.57,1.26 7.59,15.27 "/>
<path style="fill: none; stroke-width: 6" d="M25.43,3.63C36.8,3.19,46.35,12.94,46.46,24.8c0.11,12.04-9.53,22.08-21.08,21.6"/>
<path d="M29.08,34.96c4.2-0.83,7.01-5.92,6.5-10.91c-0.44-4.25-3.22-7.76-6.75-8.22
C28.91,22.21,28.99,28.59,29.08,34.96z"/> M0.12,0.19"/> M0.12,0.19"/>
</svg>

</div>
<div class="muted">
<svg class="mute" viewBox="0 0 50 50">
<polygon points="0.52,15.3 0.52,34.96 7.68,35.21 20.57,48.63 20.57,24.94 20.57,1.26 7.59,15.27 "/>
<path style="fill: none; stroke-width: 6" d="M25.43,3.63C36.8,3.19,46.35,12.94,46.46,24.8c0.11,12.04-9.53,22.08-21.08,21.6"/>
<path d="M29.08,34.96c4.2-0.83,7.01-5.92,6.5-10.91c-0.44-4.25-3.22-7.76-6.75-8.22
C28.91,22.21,28.99,28.59,29.08,34.96z"/>
<line style="stroke-width: 6" x1="2.64" y1="2.64" x2="47.32" y2="47.32"/>
</svg>
</div>
</div>
</div>
<div class="noteMenu">
<svg class="noteIcon" viewBox="0 0 53 53">
<polyline points="-0.68,-1.79 -0.68,-1.79 -0.68,-1.79 "/>
<path d="M27.62,36.1l0.06-33.67c0-0.75-0.6-1.36-1.35-1.37l-0.17,0c-1.1-0.02-2,0.58-2.01,1.33L23.8,30.87"/>
<path d="M23.8,30.87c-2.98-1.68-7.12-1.74-11.72-0.02c-0.03,0.01-0.06,0.02-0.09,0.04c-5.79,3.07-8.38,9.83-6.74,13.74
c2.11,5.03,10.66,5.72,16.18,2.63c3.92-2.19,6.42-6.48,6.19-11.87"/>
<path d="M26.99,4.74"/>
<path d="M25.46,0.66c3.99-0.32,7.29,2.42,8.38,5.81c0.75,1.79,1,3.8,2.12,4.98c1.58,0.93,3.52,1.03,5.28,0.4
c1.86-0.7,3.58-2.21,4.8-4.02l0.35,0.16c-1.14,3.3-4.01,6.57-7.79,7.09c-2.13,0.33-4.63,0.05-6.26-1.42
c-1.45-1.2-2.58-3.09-3.61-4.33c-0.72-0.81-1.39-1.52-1.79-1.01c-0.07,0.08-0.2,0.16-0.39,0.27L25.46,0.66L25.46,0.66z"/>
<path d="M25.87,0.97c0.83,1.15,1.45,2.33,1.82,3.64c-0.18,1.59-0.56,2.67-0.39,4.23C27.3,8.84,25.87,0.97,25.87,0.97L25.87,0.97z"/>
</svg>
</div>
</div>
</div>
</div>
<script>
const audios = document.querySelectorAll('.audio');
const trackContainer = document.querySelectorAll('.audioTrack');
const activeAudios= document.querySelectorAll('.audioActive');
const active = document.querySelector('.activeAudio')
const audioList = document.querySelector('.audioList');
const audioBox = document.querySelector('.audioBox');
const activeContainer = document.querySelector('.activeContainer');
const permission = document.querySelector('.autoplayPermission');
const closeAudio = document.querySelector('.closeAudio');
const prev = document.querySelector('.prevCtrl');
const next = document.querySelector('.nextCtrl');
const pausePlayCtrl = document.querySelector('#pausePlay');
const pauseCtrl = document.querySelector('.pause');
const playCtrl = document.querySelector('.play');
const shuffleCtrl = document.querySelector('.shuffleAudio');
const volumeBox = document.querySelector('.volumeBox');
const volume = document.querySelector('.volume');
const muted = document.querySelector('.muted');
const noteMenu = document.querySelector('.noteMenu');
const volRange = document.querySelector('.volRange');
let playing;
let audioPointer;
let open = true;
let volumeValue;
let stillScroll = true;
let auto = {{autoplayAudio}};

prev.addEventListener("click", playPrev);
next.addEventListener("click", playNext);
shuffleCtrl.addEventListener("click", shuffleAudio);
pausePlayCtrl.addEventListener("click", pausePlay);
volumeBox.addEventListener("click", mute);
volRange.addEventListener("click", volumeUpdate);

noteMenu.addEventListener("click", audioOpen);
function audioOpen() {
if (open == true) {
audioBox.style.display = "grid";
open = false;
}else {
audioBox.style.display = "none";
open = true;
}
}

if({{autoplayAudio}}) {
closeAudio.addEventListener("click", closeDiv);
}

if(sessionStorage.getItem('Audio') == null){
audioPointer = 1;
sessionStorage.setItem('Audio', audioPointer)
} else {
audioPointer = sessionStorage.getItem('Audio');
}
if(sessionStorage.getItem('Allowauto') == null){
sessionStorage.setItem('Allowauto', true);
playing = false;
autoplaySet(false);
}

if(sessionStorage.getItem('Allowauto') == 'true') {
window.onscroll = function (e){
if(stillScroll) {
if (sessionStorage.getItem('Audio') != null) {
audioPointer = sessionStorage.getItem('Audio')}

autoplaySet(false);
playing = false;
current(audioPointer);
}
}
}

function closeDiv() {
sessionStorage.setItem('current', true);
permission.style.display = 'none';
}

if(sessionStorage.getItem('current')) {
permission.style.display = 'none';
}

function init() {
permission.style.display = 'none';
sessionStorage.setItem('Allowauto', true);
sessionStorage.setItem('current', true);
window.onscroll = function (e){
if(stillScroll) {
if (sessionStorage.getItem('Audio') != null) {
audioPointer = sessionStorage.getItem('Audio')}

autoplaySet(false);
playing = false;
current(audioPointer);
}
}
}

function playNext() {
if (audioPointer < audios.length - 1) {
audioPointer++;
} else {
audioPointer = 0;
}
audios.forEach(function(audio) {
audio.pause();
audio.currentTime = 0;
});
playing = false;
current(audioPointer);
}

function playPrev() {
if (audioPointer == 0) {
audioPointer = audios.length - 1;
} else {
audioPointer--
}
audios.forEach(function(audio) {
audio.pause();
audio.currentTime = 0;
});
playing = false;
current(audioPointer);
}

function playTrack(track) {
audios.forEach(function(audio) {
audio.pause();
audio.currentTime = 0;
});
audioPointer = track;
playing = false;
current(audioPointer);
}

function shuffleAudio() {
let randomIndex;
audios.forEach(function() {
const totalAudio = audios.length;
randomIndex = Math.floor(Math.random() * (totalAudio));
audioPointer = randomIndex;
})

audios.forEach(function(audio) {
audio.pause();
audio.currentTime = 0;
});
playing = false;
current(audioPointer);
}

function current() {
if({{autoplayAudio}}) {
sessionStorage.setItem('current', true);
permission.style.display = 'none';
}
function deleteSession() {
const currentIndex = 'Audio';
Object.keys(sessionStorage)
.filter( (key)=> key.match(currentIndex) )
.forEach(function(key) {
sessionStorage.removeItem(key)
});
}
sessionStorage.setItem('Audio', audioPointer);

const audioIndex = document.querySelector(`[data-audio-index="${audioPointer}"]`);
audioIndex.currentTime = sessionStorage.getItem(`playing[${audioPointer}]`);
audioPointer = sessionStorage.getItem('Audio');
pausePlay(audioPointer);
playMusic(audioPointer);
stillScroll = false;
}


function playMusic() {
const audioIndex = document.querySelector(`[data-audio-index="${audioPointer}"]`);
const activeAudio = document.querySelector(`[data-active="${audioPointer}"]`);
const trackAudio = document.querySelector(`[data-track="${audioPointer}"]`);
const musicDuration = document.querySelector(`[data-duration="${audioPointer}"]`);

playing = true;

activeAudios.forEach(function(active) {
active.classList.remove('active');
});
activeAudio.classList.add('active');

trackContainer.forEach(function(track) {
track.classList.remove('hide');
});
trackAudio.classList.add('hide');

const playPromise = audioIndex.play();
if (playPromise !== undefined) {
playPromise.then(_ => {})
.catch(error => {});
}

audioIndex.ontimeupdate = function() {
musicDuration.value = audioIndex.currentTime ;
musicDuration.max = audioIndex.duration;
const currentMin = Math.floor(musicDuration.value / 60);
const currentSec = musicDuration.value % 60;
const durMin = Math.floor(musicDuration.max / 60 );
const durSec = Math.floor(musicDuration.max / 10);

document.querySelector('.active').querySelector('.currentTime').innerText = `${currentMin}:${currentSec.toString().padStart(2, '0')}`;
document.querySelector('.active').querySelector('.audioDuration').innerText = `${durMin}:${durSec}`;

function deleteSession() {
const currentAudio = 'playing';
Object.keys(sessionStorage)
.filter( (key)=> key.match(currentAudio) )
.forEach(function(key) {
sessionStorage.removeItem(key)
});
}
deleteSession();
sessionStorage.setItem(`playing[${audioPointer}]`, audioIndex.currentTime);
}

audioIndex.addEventListener('ended', (event) => {
playNext();
});

musicDuration.addEventListener('input', function () {
audioIndex.currentTime = musicDuration.value ;
}, false);
}

function pausePlay() {
const audioIndex = document.querySelector(`[data-audio-index="${audioPointer}"]`);

if(playing) {
audioIndex.pause();
playing = false;
playCtrl.style.display = 'flex';
pauseCtrl.style.display = 'none';
userScrolled = false;
noteMenu.classList.remove('playing');
} else {
autoplaySet(true);
playing = true;
current(audioPointer);
pauseCtrl.style.display = 'flex';
playCtrl.style.display = 'none';
noteMenu.classList.add('playing');

}
if(sessionStorage.getItem('Allowauto') == 'true') {
autoplaySet(false);
}else{
autoplaySet(true);
}
}

function autoplaySet(autoAllow) {
function deleteSession() {
const currentIndex = 'AllowAuto';
Object.keys(sessionStorage)
.filter( (key)=> key.match(currentIndex) )
.forEach(function(key) {
sessionStorage.removeItem(key)
});
}
deleteSession();
sessionStorage.setItem('Allowauto', autoAllow);
}

function volumeUpdate() {
const volValue = volRange.value;
volumeValue = volValue / 100;
volume.classList.remove('muted');
volumeData(volumeValue);
muted.style.display = 'none';
volume.style.display ='flex';
}

function mute() {
if (volumeValue != 0) {
muted.style.display = 'flex';
volume.style.display ='none';
volumeValue = 0;
volumeData(volumeValue);
} else {
volumeUpdate();
}
}

function volumeData() {
const audioIndex = document.querySelector(`[data-audio-index="${audioPointer}"]`);
audioIndex.volume = volumeValue;
}

</script>
<style>
input, textarea {
padding: 0;
}
.autoplayPermission {
position: fixed;
top: 115px;
right: 16px;
width: 220px;
display: flex;
background: {{section.settings.track_bg}};
flex-direction: column;
align-items: center;
padding: 5px;
box-shadow: 0px 0px 10px;
z-index: 2;
}

.closeAudio {
margin-left: 90%;
width: 24px;
height: 24px;
display: flex;
justify-content: center;
cursor: pointer;
}

.closeAudio:hover {
font-weight: 600;
}

.autoplayPermission button{
display: inline-block;
border: none;
padding: 4px;
border-radius: 5px;
color: black;
background: #ebe9e9;
}
.autoplayPermission button:hover {
color: white;
background: black;
}
.audioContainer {
position: fixed;
bottom: 5%;
padding: 0 3%;
z-index: 2;
display: flex;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
.audioWrapper {
width: 250px;
position: relative;
display: flex;
flex-direction: column;
}
.audios {
display: none;
}
.audioList {
width: 100%;
background: {{section.settings.track_bg}};
display: grid;
flex-direction: column;
border-radius: 8px;
margin-bottom: 8px;
transition: height .5s ease;
}
.activeContainer {
width: 100%;
background: {{section.settings.track_bg}};
display: flex;
flex-direction: column;
border-radius: 8px;
margin-bottom: 8px;
transition: height .5s ease;
}
.audioActive {
display: none;
border-radius: 8px;
}
.audioBox {
display: none;
}
.musicWrapper {
display: flex;
justify-content: space-around;
align-items: center;
padding: 2% 5%;
margin: 2% 0;
}
.imageWrapper {
object-fit: contain;
width: 30%;
overflow: hidden;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
}
.imageWrapper img {
max-width:100%;
max-height:100%;
}
.audioTrack:hover .musicInfo {
color: black;
font-weight: 600;
}
.musicInfo {
width: 70%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}

.musicInfo span {
text-align: center;
}

.musicDurWrap {
width: 90%;
height: 85%;
display: none;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
flex-direction: column;
justify-content: center;
transition: width .3s linear;
}

/*====== Control Position ======*/
.bottom-right {
right: 0;
}
.bottom-left {
left: 0;
}
.upright {
right: 0;
height: 0;
width: auto;
justify-content: flex-end;
padding: 0 !important;
}

.upright .audioWrapper{
flex-direction: row;
width: 400px;
align-items: center;
justify-content: flex-end;
}
.upright .audioController {
width: auto;
height: 200px;
flex-direction: column;
margin: 0 5%;
padding: 3% 1%;
}
.upright .volumeWrap:hover .rangeWrap {
height: 28px;
}
.upright .volumeWrap:hover {
max-width: 95px;
}
.upright .volumeRange {
margin: 0;
justify-content: center;
}
.upright .volumeBox {
height: auto;
padding: 4px;
}
.upright .activeContainer {
margin-bottom: 0;
}
.upright-top {
top: 30%;
}
.upright-top .audioBox {
margin-top: 30%;
}

.upright-bottom {
top: 80%;
}
.upright-bottom .audioBox {
margin-bottom: 30%;
}
.upright-center {
top: 50%;
}

/*======Controllers ====*/
.audioController {
width: 100%;
height: 100%;
background: {{section.settings.control_bg}};
position: relative;
padding: 3%;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid black;
border-radius: 5px;
}
.control {
stroke: black;
width: 20px;
display: flex;
}
.control:hover {
stroke: #A9A9A9;
fill: #A9A9A9;
}

.prevCtrl {
transform: rotate(180deg);
}

.pausePlay {
position: relative;
display: flex;
align-items: center;
}
.pausePlay:hover * {
stroke: #A9A9A9;
}

.shuffleAudio {
display: flex;
width: 21px;
flex-direction: column;
justify-content: center;
align-items: center;
}

.shuffleAudio svg {
stroke: black;
width: 21px;
display: flex;
stroke-width:5;
}

.volumeWrap {
display: flex;
align-items: center;
justify-content: flex-end;
}

.volumeWrap:hover .volumeBox {
background: #909090;
}

.volumeWrap:hover .rangeWrap {
width: 60%;
}

.volumeWrap:hover .volRange {
display: flex;
}

/*=======Volume Range ====*/
.rangeWrap {
width: 0;
height: 85%;
display: flex;
background: #909090;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
flex-direction: column;
justify-content: center;
padding: 8.5% 0;
transition: width .3s linear;
}

.volRange {
width: 100%;
margin: 0 4%;
display: none;
transition: display .3s linear;
}

.inputRange {
-webkit-appearance: none;
appearance: none;
background: transparent;
border: none;
}


.inputRange:focus {
outline: none;
}

.inputRange::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
border: 1px solid #000;
height: 10px;
width: 10px;
border-radius: 3px;
background: #DCDCDC;
cursor: pointer;
margin-top: -3px;
box-shadow: 0px 0px 2px #000;
}

.inputRange::-moz-range-thumb {
-webkit-appearance: none;
appearance: none;
border: 1px solid #000;
height: 10px;
width: 10px;
border-radius: 3px;
background: #DCDCDC;
cursor: pointer;
margin-top: -3px;
box-shadow: 0px 0px 2px #000;
}

.inputRange::-ms-thumb {
-webkit-appearance: none;
appearance: none;
border: 1px solid #000;
height: 10px;
width: 10px;
border-radius: 3px;
background: #DCDCDC;
cursor: pointer;
margin-top: -3px;
box-shadow: 0px 0px 2px #000;
}

/*=====Range track =====*/
.inputRange:hover input[type=range]::-webkit-slider-thumb {
transform: scale(1.2);
}

.inputRange::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
cursor: pointer;
background: rgba(0, 0, 0, .7);
border-radius: 1.3px;
border: 0.2px solid rgba(0, 0, 0, 0.7);
}

.inputRange::-ms-track {
width: 100%;
height: 5px;
cursor: pointer;
background: rgba(0, 0, 0, .7);
border-radius: 1.3px;
border: 0.2px solid rgba(0, 0, 0, 0.7);
}

.inputRange::-moz-range-track {
width: 100%;
height: 5px;
cursor: pointer;
background: rgba(0, 0, 0, .7);
border-radius: 1.3px;
border: 0.2px solid rgba(0, 0, 0, 0.7);
}

.inputRange::-ms-fill-lower {
background: #2a6495;
border: 0.2px solid #010101;
border-radius: 2.6px;
}

.inputRange:focus::-ms-fill-lower {
background: #3071a9;
}
.inputRange::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
}
.inputRange:focus::-ms-fill-upper {
background: #367ebd;
}

/*==== Volume Range ====*/
.volumeBox {
height: 87%;
display: flex;
align-items: center;
position: relative;
padding: 4px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}

.volume {
stroke: black;
width: 20px;
display: flex;
}
.volumeBox:hover svg.vol > * {
stroke: #A9A9A9;
fill: #A9A9A9;
}

.volumeBox:hover .mute > * {
stroke: #A9A9A9;
fill: #A9A9A9;
}

.muted{
stroke: black;
width: 21px;
height: 21px;
display: none;
}
.noteMenu svg > * {
fill: black;
}
.noteIcon {
width: 23px;;
}
.noteMenu {
stroke: black;
padding: unset;
width: 23px;
aspect-ratio: 1;
display: flex;
justify-content: center;
align-items: center;
}
.noteMenu:hover svg > * {
stroke: #A9A9A9;
fill: #A9A9A9;
}
.shuffleAudio:hover svg {
stroke: #A9A9A9;
fill: #A9A9A9;
}

/*======Conditions ======*/
.active {
order: {{totalAudio}};
display: grid;
box-shadow: 0px 0px 10px black;
}
.hide {
display: none;
}
.active .musicDurWrap {
display: flex;
}
.activeAudio {
display: none;
}

.playing {
width: 25px;
padding: 2px;
border: 1px solid;
background: #ff2222;
border-radius: 50%;
animation: rotate 2s linear infinite;
}

@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}

@media only screen and (max-width: 500px) {
.audioController {
width: 60%;
padding: 1%;
}

.volumeWrap {
margin-right: 3%;
}
.volumeWrap:hover .volumeBox {
padding: 2%;
}
.rangeWrap {
padding: 14.5% 0;
}
.musicInfo p {
line-height: 1.2;
}
}
</style>

{% schema %}
{
"name": "Audio Background",
"settings": [
{
"type": "checkbox",
"label": "Autoplay song",
"id": "autoplay_audio",
"default": false,
"info": "Interaction is needed prior to autoplay"
},
{
"type": "color",
"label": "Control's background color",
"id": "control_bg",
"default": "#808080"
},
{
"type": "color",
"label": "Audio Track's background color",
"id": "track_bg",
"default": "#f0f8ff"
},
{
"type": "select",
"id": "audio_position",
"default": "bottom-left",
"label": "Audio Position",
"options": [
{
"value": "bottom-left",
"label": "bottom-left"
},
{
"value": "bottom-right",
"label": "bottom-right"
},
{
"value": "upright upright-bottom",
"label": "upright-bottom"
},
{
"value": "upright upright-top",
"label": "upright-top"
},
{
"value": "upright upright-center",
"label": "upright-center"
}
]
}
],
"blocks": [
{
"type": "audio_file",
"name": "audio file",
"settings": [
{
"type": "text",
"id": "audio_file",
"label": "Enter URL of audio"
},
{
"type": "image_picker",
"id": "image",
"label": "Image of the audio"
},
{
"type": "text",
"id": "audio_artist",
"label": "Enter artist of audio"
}
]
}
]
}
{% endschema %}

 

3. In the Layout folder, open the theme.liquid and find the {% section 'header' %}. Paste the code below before the header code.

 {% section 'music-player' %}

 

That's it. Enjoy the music.

Copied!
Voltar para o blogue

Deixe um comentário