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.

Color Swatch for Dawn with Images- No App or Subscription needed

Add a color swatch to your Dawn Theme for FREE. Color swatch comes with image. Multiple design av...

Add Custom Textfield / Dropdown in Dawn Theme Shopify 2.0 - No APP needed

Add a personalize textbox to Dawn product page. You can add dropdown, radio buttons and many more...

Convert Dawn Product Page Like Debut Theme with Product Slider

Product slider but counter does not make sense? See my way around. Transform your Dawn product pa...

How to make hero image the background for header - DAWN Theme

Hero image to be the background for header. It is possible. Just follow the steps below. I recomm...

Featured collection slider for Dawn Theme Shopify 2.0

Add a collection slider for your home page. This only works with Dawn Theme.

Adjust Main and Thumbnail Product Images in the Product Page for Dawn Theme

Dawn Theme issues with large images? Solve that using this video tutorial