dusk-radio/index.html

100 lines
2.7 KiB
HTML
Raw Normal View History

2021-10-03 14:20:14 +00:00
<!DOCTYPE html>
<html lang=ca>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="style.css"/>
<title>Duskin' Radio</title>
</head>
<body>
<img alt="Logo: Duskin' Radio" src="logo.png" id="logo"/>
<h2>Cadenes</h2>
<hr/>
<div class="container">
<div class="cadena" id="dancin">
<h3>Dancin'</h3>
<p>Nu Disco, House, Synthpop, Dance</p>
<audio preload="metadata">
<source src="dancin.mp3" type="audio/mpeg"/>
Audio tag not supported
</audio>
<img class="play" alt="Play Button" src="./play.svg"/>
<input class="link"></input>
</div>
<div class="cadena" id="funkin">
<h3>Funkin'</h3>
<p>Funk, Disco, R&amp;B</p>
<audio preload="metadata">
<source src="funkin.mp3" type="audio/mpeg"/>
Audio tag not supported
</audio>
<img class="play" alt="Play Button" src="./play.svg"/>
<input class="link"></input>
</div>
<div class="cadena" id="gazin">
<h3>Gazin'</h3>
<p>Rock Alternatiu, Shoegaze</p>
<audio preload="metadata">
<source src="gazin.mp3" type="audio/mpeg"/>
Audio tag not supported
</audio>
<img class="play" alt="Play Button" src="./play.svg"/>
<input class="link"></input>
</div>
<div class="cadena" id="doomin">
<h3>Doomin'</h3>
<p>Post Punk, Cold Wave</p>
<audio preload="metadata">
<source src="doomin.mp3" type="audio/mpeg"/>
Audio tag not supported
</audio>
<img class="play" alt="Play Button" src="./play.svg"/>
<input class="link"></input>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
let playButtons = [...document.querySelectorAll('.play')]
playButtons.map((x) => x.addEventListener('click', () => playButtonAction(x)))
let cadenaDivs = [...document.querySelectorAll('.cadena')]
cadenaDivs.map((x) => x.addEventListener('click', () => copyLink(x)))
})
function playButtonAction(x) {
let audio = x.parentNode.querySelector('audio')
if (audio.paused) {
audio.load()
audio.play()
x.src="./stop.svg"
}
else {
let aux = audio.querySelector('source').src
audio.querySelector('source').src = ""
audio.pause()
setTimeout(() => audio.load())
x.src="./play.svg"
audio.querySelector('source').src = aux
}
}
function copyLink(x) {
let link = x.querySelector('source')
let pText = x.querySelector('.link')
pText.value = link.src
console.log(pText.value)
pText.select()
document.execCommand('copy')
}
</script>
<footer id="bottom">Copia els enllaços per a escoltar en un client! (Com per exemple, VLC o MPV)</footer>
</body>
</html>