100 lines
2.7 KiB
HTML
100 lines
2.7 KiB
HTML
|
<!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&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>
|
||
|
|
|