Background Music Player

Background Music Player

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

Make your website entertaining for your customer. Add background music with no app, no subscription nor external links. Code is straight from me to your website. 

The background music has an autoplay option. There is a policy from chrome that does not allow autoplay unless the visitor interacts to the website. Other website also followed. Please read autoplay policy in chrome. As a user/visitor myself, I am thankful with this policy.

Background music can continue to play even with the page changing. No ajax is being use. No SEO being compromise. I would like you to try this. If you don't like it, then just delete the code. 

Note: Please be mindful in placing a music in your website. Please check with music's owner prior to doing so. Soundcloud and Pixabay offer free music but check with the music owner. Total audio must be more than 1.

 

To have this background music, follow the steps below

1. Go to Admin Shopify store > Themes > Actions > Edit Code

2. In Section folder, click "add a new section." Name it audio-background. 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: 5;
}

.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: 5;
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-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-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. For music to appear in every page of your website, you have to go to theme.liquid under Layout folder and find the {% section 'header' %},  after the code paste the code below.

   {% section 'audio-background' %}

 

4. Before saving your audio. Please check the video for naming the audio file.Next, you have to click Settings at the bottom left corner of your Shopify admin. Go to Files, and add your music.

5.  Lastly,  go to theme editor and add your music link in the audio background section.

Product Slider for Dawn Theme - No apps or subscript- Just a little bit of code

Add a product slider for Dawn theme, almost like Debut theme slider. No app or subscription neede...

Tab Component Section - Pure CSS

Add a tab component as a section which means, you can add it to any pages in Shopify 2.0, like pr...

Add WhatsApp to Shopify for Free - No App or Subscription

Add WhatsApp to your Shopify website without app or subscription. Personalize the icon with your ...

Product / Card Automatic Swipeable Carousel / Slider for Most of Shopify Theme

Add a carousel / slider for your product or card without an app or external library. This work in...

Awesome slideshow for most of Shopify Themes - Work well with Dawn

Awesome slideshow with 11 unique designs to choose from. No app or subscription needed. No coding...

Adding a Gallery Section for Shopify Website

Add your images as a gallery using grid. This should work in most of the shopify theme.

Update your Product Page to Shopify 2.0 - Just like Dawn

Not ready for Dawn Theme but would like to update your Debut theme's product page just like Dawn?...

Create a Collage with Repositionable or Dynamic Blocks in Shopify Page

Positional items using grid. You can add video, images, custom content and product.