add another song

This commit is contained in:
gome 2023-01-23 22:18:19 -06:00
parent bf06e04158
commit f8cb67cb34
4 changed files with 30 additions and 13 deletions

BIN
audio/orchard_glen.mp3 Normal file

Binary file not shown.

View File

@ -31,12 +31,18 @@
<main>
<article>
<span id='tagline'>Humble home of user gome</span>
<div class='music-box' id='music-box'>
<audio id='gomesong' src='img/forest_river.mp3' loop></audio>
<div class='music-box'>
<audio src='audio/forest_river.mp3' loop></audio>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="play"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pause"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>
Play a song
</div>
<div class='music-box'>
<audio src='audio/orchard_glen.mp3' loop></audio>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="play"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pause"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>
Play another song
</div>
</article>
<article id='wotd'>
<h2 class='title'></h2>

View File

@ -1,11 +1,22 @@
const gomesong = document.getElementById('gomesong');
const music_box = document.getElementById('music-box');
music_box.addEventListener('click', () => {
if (gomesong.paused) {
music_box.classList.add('playing');
gomesong.play();
} else {
music_box.classList.remove('playing');
gomesong.pause();
}
});
function get_audio(music_box) {
return music_box.querySelector('audio');
}
const music_boxes = document.getElementsByClassName('music-box');
for (const music_box of music_boxes) {
music_box.addEventListener('click', () => {
const audio = get_audio(music_box);
if (audio.paused) {
// pause all other music boxes
for (const music_box of music_boxes) {
music_box.classList.remove('playing');
get_audio(music_box).pause();
}
music_box.classList.add('playing');
audio.play();
} else {
music_box.classList.remove('playing');
audio.pause();
}
});
}