add another song
This commit is contained in:
parent
bf06e04158
commit
f8cb67cb34
Binary file not shown.
10
index.html
10
index.html
|
@ -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>
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue