Coding!

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.

<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}`;
        }
    });
});

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

Music Player

A simple music player that allows a playlist of songs, scrolling text, and an interactive playing vs non playing icon. You can see it on my music page, completely customizeable.

<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 = 'なにかんがえてるの？';
});

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

Adorable Music Player

A simple music player that allows a playlist of songs and various buttons for loop, shuffle, skip and allows user to toggle pieces off display, inspired by winamp players but completely coded for online or offline use.

!!!!!!!!!!!COMING SOON!!!!!!!!!!!