ManoKodu
Sky Dusk Kiss Game Sea Plum Sand Matcha Blood

Main

Coding!cute cat pixel gif


Simple projects for use or for learning purposes.



Audio Player

A simple audio player for one file as seen in my voice section, the script allows you to put as many as you want on a page and the buttons won't interfere with each other.

PHOTO HERE 

<div class="audio-box">
<audio preload="metadata">
<source src="FILE_HERE.mp3" type="audio/mpeg">
</audio>
<div class="progress-bar">
<progress id="songProgress" min="0" max="100" value="0">
</progress>
</div>
<div class="controls">
<button id="playPauseBtn">
<img id="playPauseIcon" src="playicon.png" alt="Play">
</button>
<span id="currentTime">0:00</span> / <span id="totalTime">0:00</span>
<div class="name">TITLE HERE</div>
<div class="slider_container">
<input type="range" id="volumeSlider" class="volume_slider" min="0" max="1" step="0.01" value="1">
</div>
</div>
</div>

// CSS
.audio-box {
width: 375px;
height: 30px;
background: rgba(252, 233, 139, 0.5);
font-family: Courier New;
color: #9B4F22;
border: 1px solid rgba(155, 79, 34, 0.7);
font-size: 10px;
overflow: hidden;
display: grid;
grid-template-rows: 6px auto;
margin-top: 15px;
}

// JAVASCRIPT
document.addEventListener('DOMContentLoaded', function () {
    const audioBoxes = document.querySelectorAll('.audio-box');

    audioBoxes.forEach((box, index) => {
        const audio = box.querySelector('audio');
        const playPauseBtn = box.querySelector('.playPauseBtn');
        const playPauseIcon = box.querySelector('.playPauseIcon');
        const songProgress = box.querySelector('.progress-bar progress');
        const currentTime = box.querySelector('.currentTime');
        const totalTime = box.querySelector('.totalTime');
        const volumeSlider = box.querySelector('.volumeSlider');

        let isPlaying = false;

        playPauseBtn.addEventListener('click', () => {
            if (isPlaying) {
                audio.pause();
                playPauseIcon.src = 'playicon.png';
                isPlaying = false;
            } else {
                audio.play();
                playPauseIcon.src = 'pauseicon.png';
                isPlaying = true;
            }
        });

        audio.addEventListener('timeupdate', () => {
            const progress = (audio.currentTime / audio.duration) * 100;
            songProgress.value = progress;
            currentTime.textContent = formatTime(audio.currentTime);
            totalTime.textContent = formatTime(audio.duration);
        });

        volumeSlider.addEventListener('input', () => {
            audio.volume = volumeSlider.value;
        });

        function formatTime(time) {
            const minutes = Math.floor(time / 60);
            const seconds = Math.floor(time % 60);
            return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
        }
    });
});

⠂⠄⠄⠂⠁⠁⠂⠄⠄⠂⠁⠁⠂⠄⠄⠂ ⠂⠄⠄⠂☆⠂⠄⠄⠂⠁⠁⠂⠄⠄⠂⠁⠁⠂⠄⠄⠂ ⠂⠄⠄⠂☆

Audio Player

A simple music player that allows a playlist of songs and various buttons for loop, shuffle, skip inspired by winamp players. At the moment I haven't figured out the frequency bars section but it's designed if you are code saavy.

PHOTO HERE 

<div class="my-player">

	<div class="current-track">
    	<span id="currentTrackTitle">なにかんがえてるの？</span>
	</div>

	<div id="playingWaves">
    	<img id="wavesIcon" src="staticwaves.gif" alt="song playing">
	</div>

	<div class="audio-player">

		<audio id="audio" preload="metadata"></audio>

	<div class="progress-bar">
  	<progress id="songProgress" min="0" max="100" value="0"></progress>
	</div>

	<div class="controls">

	<button id="playPauseBtn">
    	<img id="playPauseIcon" src="playicon.png" alt="Play">
	</button>

	<span id="currentTime">0:00</span> / <span id="totalTime">0:00</span>

	<div class="slider_container">
	<input type="range" id="volumeSlider" class="volume_slider" min="0" max="1" step="0.01" value="1">
	</div>

	</div>
	</div>

 <div class="playlist">
     <ul id="playlist">
       <li data-title="Catch You Catch Me" data-src="#.mp3">Catch You Catch Me</li>
       <li data-title="Tobira Wo Akete" data-src="#.mp3">Tobira Wo Akete</li>
       <li data-title="Honey" data-src="#.mp3">Honey</li>
     </ul>
</div>
</div>

// CSS
.my-player {
width: 375px;
height: 350px;
border: 2px solid rgba(155, 79, 34, 0.7);
background-image: url('cardcaptor.jpg');
background-position: center !important;
margin-left: auto;
margin-right: auto;
}

.audio-player {
width: 375px;
height: 30px;
background: rgba(252, 233, 139, 0.5);
font-family: Courier New;
color: #9B4F22;
border-top: 1px solid rgba(155, 79, 34, 0.7);
border-bottom: 1px solid rgba(155, 79, 34, 0.7);
font-size: 10px;
overflow: hidden;
display: grid;
grid-template-rows: 6px auto;
margin-top: 30px;
}

.current-track {
width: 90%;
text-align: center;
font-family: Courier New;
color: #9B4F22;
margin: 15px;
font-size: 16px;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box; 
}

.current-track span {
display: inline-block;
padding-left: 100%;
animation: scrollText 20s linear infinite;
}

@keyframes scrollText {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

#playingWaves {
padding: 0px;
margin-top: 30px;
margin-left: 40px;
border: none;
background: none;   
}

#playingWaves img {
opacity: 1;
}

progress {
width: 375px;
margin-top: 0px;
background-color: rgba(252, 227, 246, 0.7);
border-bottom: 1px solid rgba(155, 79, 34, 0.7);
}

progress::-webkit-progress-bar {
background-color: rgba(252, 227, 246, 0.7);
}

progress::-webkit-progress-value {
background-color: rgba(234, 25, 69, 0.7);
}

progress::-moz-progress-bar {
background-color: rgba(234, 25, 69, 0.7);
}

.controls {
display: flex;
align-items: center;
justify-content: space-around;
margin-top: 2px;
}

#playPauseBtn {
padding: 0;
border: none;
background: none;
cursor: pointer;
display: flex;    
align-items: center;
}

#playPauseBtn img {
width: 25px;
height: 25px;
}

#currentTime, #totalTime {
font-size: 11px;
color: #9b4f22;
margin: 0 10px;
}

.slider_container {
width: 45%;
max-width: 115px;
display: flex;
justify-content: right;
align-items: right;
}

input[type='range'] {
overflow: hidden;
width: 115px;
-webkit-appearance: none;
background-color: rgba(182, 217, 213, 0.7);
border-radius: 1px;
border: 1px solid rgba(252, 227, 246, 0.7);
}

input[type='range']::-webkit-slider-runnable-track {
height: 10px;
-webkit-appearance: none;
color: #ffffff;
margin-top: -1px;
}

input[type='range']::-webkit-slider-thumb {
width: 10px;
-webkit-appearance: none;
height: 10px;
cursor: ew-resize;
background: rgba(252, 227, 246, 0.7);
box-shadow: -80px 0 0 80px rgba(182, 217, 213, 1);
border-radius: 1px; /* Added border radius */
}

input[type='range']:hover::-webkit-slider-thumb {
background: rgba(252, 227, 246, 1);
}

input[type='range']:active::-webkit-slider-thumb {
background: rgba(252, 227, 246, 1);
}

.playlist {
width: 375px;
height: 135px;
overflow-y: auto;
overflow-x: hidden;
background-color: transparent;
}

.playlist ul {
background: none;
border-radius: 1px;
padding: 0px;
height: 16px;
margin: 0px;
list-style-type: none;
}

.playlist li {
background: rgba(252, 227, 246, 0.5);
border-radius: 1px;
padding: 4px;
width: 375px;
height: 16px;
margin: 0px;
color: rgba(155, 79, 34, 0.8);
font-family: Courier New;
font-size: 12px;
letter-spacing: 2px;
text-decoration: none;
font-weight: bold;
vertical-align: middle;
text-align: left !important;
}

.playlist li:hover {
background: rgba(182, 217, 213, 0.5);
border-radius: 1px;
padding: 4px;
width: 375px;
height: 16px;
margin: 0px;
color: rgba(155, 79, 34, 0.8);
font-family: Courier New;
font-size: 12px;
letter-spacing: 2px;
text-decoration: none;
font-weight: bold;
vertical-align: middle;
text-align: left !important;
}

.playlist::-webkit-scrollbar {
width: 1px;
}
 
.playlist::-webkit-scrollbar-track {
background-color: rgba(252, 227, 246, 0.5);
}

.playlist::-webkit-scrollbar-button {
background-color: rgba(252, 227, 246, 0.5);
}
 
.playlist::-webkit-scrollbar-thumb {
background-color: rgba(252, 227, 246, 0.5);
border-radius: 0px; 
}

.playlist::-webkit-scrollbar-thumb:hover {
background: rgba(182, 217, 213, 0.5);
}

// JAVASCRIPT
document.addEventListener('DOMContentLoaded', function () {
    const audio = document.getElementById('audio');
    const playPauseBtn = document.getElementById('playPauseBtn');
    const playPauseIcon = document.getElementById('playPauseIcon');
    const currentTrackTitle = document.getElementById('currentTrackTitle');
    const songProgress = document.getElementById('songProgress');
    const currentTime = document.getElementById('currentTime');
    const totalTime = document.getElementById('totalTime');
    const volumeSlider = document.getElementById('volumeSlider');
    const playlistItems = document.querySelectorAll('#playlist li');
    const wavesIcon = document.getElementById('wavesIcon');

    let currentTrackIndex = -1;
    let isPlaying = false;
    let pauseTime = 0;

    function playTrack(index) {
        if (currentTrackIndex !== index) {
            const track = playlistItems[index];
            audio.src = track.getAttribute('data-src');
            currentTrackTitle.textContent = track.textContent;
            audio.currentTime = 0;
            pauseTime = 0;
            currentTrackIndex = index;
        }
        audio.play();
        playPauseIcon.src = 'pauseicon.png';
        isPlaying = true;
        updateWavesIcon(true);
    }

    function pauseTrack() {
        audio.pause();
        playPauseIcon.src = 'playicon.png';
        isPlaying = false;
        pauseTime = audio.currentTime;
        updateWavesIcon(false);
    }

    function togglePlayPause() {
        if (isPlaying) {
            pauseTrack();
        } else {
            if (currentTrackIndex !== -1) {
                playTrack(currentTrackIndex);
            }
        }
    }

    function updateProgress() {
        const progress = (audio.currentTime / audio.duration) * 100;
        songProgress.value = progress;
        currentTime.textContent = formatTime(audio.currentTime);
        totalTime.textContent = formatTime(audio.duration);
    }

    function formatTime(time) {
        const minutes = Math.floor(time / 60);
        const seconds = Math.floor(time % 60);
        return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    }

    function adjustVolume() {
        audio.volume = volumeSlider.value;
    }

    function updateWavesIcon(isPlaying) {
        if (isPlaying) {
            wavesIcon.src = 'playingwaves.gif';
        } else {
            wavesIcon.src = 'staticwaves.gif';
        }
    }

    playPauseBtn.addEventListener('click', togglePlayPause);

    volumeSlider.addEventListener('input', adjustVolume);

    audio.addEventListener('timeupdate', updateProgress);

  
    playlistItems.forEach((item, index) => {
        item.addEventListener('click', () => {
            playTrack(index);
        });
    });

    currentTrackTitle.textContent = 'なにかんがえてるの？';
});

⠂⠄⠄⠂⠁⠁⠂⠄⠄⠂⠁⠁⠂⠄⠄⠂ ⠂⠄⠄⠂☆⠂⠄⠄⠂⠁⠁⠂⠄⠄⠂⠁⠁⠂⠄⠄⠂ ⠂⠄⠄⠂☆