HTML
<section id="main"></section>
CSS
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
html,
body,
main,
section {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
background: #0f0d13;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
section {
background: rgba(15, 13, 19, 0.95) !important;
}
.player {
width: 320px;
height: 500px;
background: #000;
border-radius: 10px;
color: #e1e1e6;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Roboto', sans-serif;
flex-direction: column;
}
.player>div:first-child {
width: 240px;
}
.player>div:first-child>img {
border-radius: 10px;
width: 240px;
height: 240px;
}
.player>div:first-child>h3 {
font-size: 24.5px;
margin-top: 15px;
margin-bottom: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.player>div:first-child>h4 {
font-size: 19px;
font-weight: 100;
margin: 0px;
color: #a5a2b0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.player>div:last-child {
height: 100px;
width: 240px;
}
.player>div:last-child>.bar {
width: 100%;
height: 6px;
margin: 15px 0px 10px 0px;
border-radius: 4px;
background-color: #5e586f;
overflow: hidden;
cursor: pointer;
}
.player>div:last-child>.bar>* {
background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5);
width: 0%;
height: 100%;
}
.player>div:last-child>div:last-child {
color: #a5a2b0;
display: flex;
justify-content: space-between;
}
.player>div:last-child>div:first-child {
display: flex;
width: 100%;
justify-content: space-between;
margin-top: 20px;
}
.player>div:last-child>div:first-child {
margin: 20px 0;
}
.player>div:last-child>div:first-child>img {
cursor: pointer;
}
JS
function createPlayer(name, data = {}) {
const
audio = document.createElement('audio'),
player = document.createElement('div'),
info = document.createElement('div'),
controller = document.createElement('div')
audio.hidden = true
audio.id = name
audio.src = data?.src ?? ''
player.classList.add('player')
// Informacao
const
img = document.createElement('img'),
title = document.createElement('h3'),
subTitle = document.createElement('h4')
img.src = data?.img ?? 'logo.png'
title.textContent = data?.title ?? 'Uninformed'
subTitle.textContent = data?.subTitle ?? ''
title.title = data?.title ?? 'Uninformed'
subTitle.title = data?.subTitle ?? ''
info.append(img, title, subTitle)
player.appendChild(info)
// Controller
const
controllers = document.createElement('div'),
imgNext = document.createElement('img'),
imgPrev = document.createElement('img'),
imgPlay = document.createElement('img'),
bar = document.createElement('div'),
processBar = document.createElement('div'),
time = document.createElement('div'),
duration = document.createElement('span'),
currentTime = document.createElement('span')
imgPrev.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABtElEQVQ4jWMY+uD///8EcUfTNK/r1+6uOnPq8hxi1D569HwHTC1exVEB2UIghSANjx49/w+iCzIb9LCpTY0tV0BXGxWQzcyCKwq2bTnQ2DGpxpyBgcEdSRjELsOmtra1AJtaNiZ0xZ3N071uXL+3SldfA10DBpjavzD88eMXO/CoZYZbEB2YI3T29JU5UQmBedw8XKH4DC/OatIDOcIvxD0Rqg6b2v8MDAzfGEHhB/IiMS4GgVcv3jCISYgQUgYGFXktnEydzdO8iDUcBIg1HAoEmF49f/OMgYGBnRRdJAAl5mOn978ozW0+pKmtKsTNw/WegYFBAZ/+k0fPVbCxsT4nRu2e7YemgCN51qLO+8amOnHLF6zr/frl20YGBoYDuDQdPXR6J0wtVB1OtQwMDO9QkmlZbdYWDU2lgH07Dq8ioBGsVlZWwvHk0bM78Kj9iZEPQCA+NXR6c3V/0qsXbxYTsigkwrtzQvusQhxqf+PMyaBgY2BgiOtqnubjF+LxkZuHix8k/vXL94/oanun1V2AqY1MCELxAVGFHQhP6VsQ3dk01YdYtbVl3Xbgwm5oAwYGBgA7hlhPwuBYTAAAAABJRU5ErkJggg=='
imgNext.src = ' data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAABKklEQVQ4jWNwMguzPrDvZOiZU5djCjIbNf7//89ACmaY0jff4tGj5/+heOGZU5c7STGAiZuHW4oBAeLEJEQkHj9+sXDB7NURDEQAJgYGBjE0ZXEg7Oxh63n29JXOwqwmDXzGsDAwMDzFIQdyDUNRZZrE2dNXXhib6pRjUwRywUMCDsXrLZAB74jwKk5vgbzAS4QByK5B8RbIBcokGIBskMSU/oU+IAO+kGEACEjdvf3wMcgLX0nUuOfrl2+fli1YN6F/Wt1FkAt+kqJ505qd8zQ0lYKbOksOM0AD8TcxGi9fvH5i6dy1E5aun/IWWYKQAXDngmz08nHEUADyAi4DMJyLDYBc8I9Y52I14OWL17BoJOhcbIBRU9pB0tPP0Z+bl+sqPqdiBQwMDACvUdjLFtm1SgAAAABJRU5ErkJggg=='
imgPlay.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAABKklEQVQ4jWNwMguzPrDvZOiZU5djCjIbNf7//89ACmaY0jff4tGj5/+heOGZU5c7STGAiZuHW4oBAeLEJEQkHj9+sXDB7NURDEQAJgYGBjE0ZXEg7Oxh63n29JXOwqwmDXzGsDAwMDzFIQdyDUNRZZrE2dNXXhib6pRjUwRywUMCDsXrLZAB74jwKk5vgbzAS4QByK5B8RbIBcokGIBskMSU/oU+IAO+kGEACEjdvf3wMcgLX0nUuOfrl2+fli1YN6F/Wt1FkAt+kqJ505qd8zQ0lYKbOksOM0AD8TcxGi9fvH5i6dy1E5aun/IWWYKQAXDngmz08nHEUADyAi4DMJyLDYBc8I9Y52I14OWL17BoJOhcbIBRU9pB0tPP0Z+bl+sqPqdiBQwMDACvUdjLFtm1SgAAAABJRU5ErkJggg=='
bar.classList.add('bar')
bar.addEventListener('click', (event) => {
let
tmp = (event.clientX - bar.offsetLeft),
width = bar.style.width
tmp = (tmp / bar.clientWidth * 100)
audio.currentTime = audio.duration / 100 * tmp
})
duration.textContent = '00:00'
currentTime.textContent = '00:00'
imgPrev.addEventListener('click', () => {
audio.pause()
audio.currentTime = 0
audio.play()
})
imgNext.addEventListener('click', () => audio.currentTime = audio.duration)
const updatePlayer = () => {
imgPlay.src = (audio.paused)
? 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAABKklEQVQ4jWNwMguzPrDvZOiZU5djCjIbNf7//89ACmaY0jff4tGj5/+heOGZU5c7STGAiZuHW4oBAeLEJEQkHj9+sXDB7NURDEQAJgYGBjE0ZXEg7Oxh63n29JXOwqwmDXzGsDAwMDzFIQdyDUNRZZrE2dNXXhib6pRjUwRywUMCDsXrLZAB74jwKk5vgbzAS4QByK5B8RbIBcokGIBskMSU/oU+IAO+kGEACEjdvf3wMcgLX0nUuOfrl2+fli1YN6F/Wt1FkAt+kqJ505qd8zQ0lYKbOksOM0AD8TcxGi9fvH5i6dy1E5aun/IWWYKQAXDngmz08nHEUADyAi4DMJyLDYBc8I9Y52I14OWL17BoJOhcbIBRU9pB0tPP0Z+bl+sqPqdiBQwMDACvUdjLFtm1SgAAAABJRU5ErkJggg=='
: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAaElEQVQ4jWOgFDCC9D9+/GIhAwNDHJJZi2RkxOORzX7y5CWGGllZiXiYAf/RHSIjI86IZgCGGllZCUYmSr0wasCoAaMGQAALiPj65ds6bh4uPgYGBhcGBoY9X798+4SukBg1pAMGBgYAdXcjO7NTRb4AAAAASUVORK5CYII='
}
imgPlay.addEventListener('click', () => (audio.paused) ? audio.play() : audio.pause())
audio.addEventListener('playing', () => updatePlayer())
audio.addEventListener('pause', () => updatePlayer())
audio.addEventListener('timeupdate', () => {
currentTime.textContent = ajusteTextTime(audio.currentTime)
duration.textContent = ajusteTextTime(audio.duration)
processBar.style.width = parseInt(audio.currentTime / audio.duration * 100) + '%'
})
controllers.append(imgPrev, imgPlay, imgNext)
bar.appendChild(processBar)
time.append(currentTime, duration)
controller.append(controllers, bar, time)
player.audio = audio
player.appendChild(controller)
return player
}
function ajusteTextTime(time) {
if (isNaN(time)) {
time = 0
}
time = time.toFixed(2)
let
minutos = parseInt((time > 59) ? time / 60 : 0),
segundos = parseInt(time % 60)
minutos = ('00' + minutos).slice(-2)
segundos = ('00' + segundos).slice(-2)
return minutos + ':' + segundos
}
window.onload = () => {
const player = createPlayer('player_html', {
src: 'https://drive.google.com/uc?export=download&id=10pW_l1IARFVDYLB_JXAZgTU-e26RanLo',
img: 'https://blogger.googleusercontent.com/img/a/AVvXsEjW55q4o8WHaf9KSlg7RAS68oXKx9JXKdo8z6yuBTVmElERXFLtij8NGwI-0lfEXMbXLZPx-SfmIon_isgJElVN3sr34g0w-oraXbEemFgtmX1aiYrOkR-E89CyvdPpmo72LEJDwnw1F4gmJDuT8W2Py6TZDmXNoDJA-P_eHlMDqtoQKh1mdpL12EO8=w619-h339',
title: 'O Desh Mere',
subTitle: 'BHUJ THE PRIDE OF INDIA 2021 MP3'
})
player.audio.volume = 0.2
document.getElementById('main').appendChild(player)
}
Thanks
Read This Post
Related Posts
.png)
.png)
.png)
Contact Us!
0 Comments
type your comment...