gome/gomesite
gome
/
gomesite
1
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
img/forest_river.mp3 → audio/forest_river.mp3
View File

BIN
audio/orchard_glen.mp3 Normal file
View File

Binary file not shown.

10
index.html
View File

@ -31,12 +31,18 @@
<main> <main>
<article> <article>
<span id='tagline'>Humble home of user gome</span> <span id='tagline'>Humble home of user gome</span>
<div class='music-box' id='music-box'> <div class='music-box'>
<audio id='gomesong' src='img/forest_river.mp3' loop></audio> <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="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> <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 Play a song
</div> </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>
<article id='wotd'> <article id='wotd'>
<h2 class='title'></h2> <h2 class='title'></h2>

33
js/gomesong.js
View File

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