diff --git a/README.md b/README.md index e85a6e1..01c12b5 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,5 @@ # Portofolio my very own portofolio website! + +# Other Credits +Music player made by CodeSpeedy (https://www.codespeedy.com/) diff --git a/assets/cspd-player.css b/assets/cspd-player.css new file mode 100644 index 0000000..de6a629 --- /dev/null +++ b/assets/cspd-player.css @@ -0,0 +1,51 @@ + + #cs_audio { + display: none; + } + + #cs_audioplayer { + position: relative; + bottom: 0; + left: 0; + right: 0; + text-align: center; + + background-color: #7d4d71; + padding: 12px; + padding-top: 4px; + padding-bottom: 6px; + color: #fff; + } + + .cs_audio_bar { + background-color: #000; + width: 100%; + height: 6px; + position: relative; + cursor: pointer; + transition: 0.1s; + } + + .cs_audio_bar_loaded { + background-color: #44363d; + width: 0%; + height: 6px; + position: absolute; + transition: 0.1s; + } + .cs_audio_bar_now { + background-color: lime; + width: 0%; + height: 6px; + position: absolute; + z-index: 999; + transition: 0.1s; + } + #cs_play_pause_btn { + margin-left: 95px; + } + + #cs_play_pause_btn i{ + font-size: 1.45em;position: relative; cursor: pointer; vertical-align: middle; + margin-bottom: 4px; + } diff --git a/assets/cspd-player.js b/assets/cspd-player.js new file mode 100644 index 0000000..d2b9e05 --- /dev/null +++ b/assets/cspd-player.js @@ -0,0 +1,307 @@ +var audio_id = document.getElementById("cs_audio"); +audio_id.volume = 0.6; +audio_vol = audio_id.volume; + // alert(audio_vol); +try { + + var measuredTime = new Date(null); + measuredTime.setSeconds(audio_id.duration); // specify value of SECONDS + var MHSTime = measuredTime.toISOString().substr(11, 8); + // document.getElementById("cs_audio_duration").innerHTML = MHSTime; + var a = MHSTime.split(':'); // split it at the colons + // Hours are worth 60 minutes. + var minutes = (+a[0]) * 60 + (+a[1]); + // console.log(minutes + ":" + ((+a[2]) % 60)); + document.getElementById("cs_audio_duration").innerHTML = minutes+":"+((+a[2]) % 60); + } +catch(err) { + audio_id.addEventListener('loadedmetadata', function() { + var measuredTime = new Date(null); + measuredTime.setSeconds(audio_id.duration); // specify value of SECONDS + var MHSTime = measuredTime.toISOString().substr(11, 8); + document.getElementById("cs_audio_duration").innerHTML = MHSTime; + var a = MHSTime.split(':'); // split it at the colons + // Hours are worth 60 minutes. + var minutes = (+a[0]) * 60 + (+a[1]); + // console.log(minutes + ":" + ((+a[2]) % 60)); + document.getElementById("cs_audio_duration").innerHTML = minutes+":"+((+a[2]) % 60); + }); +} + + + + +audio_id.ontimeupdate = function() { + var audio_currentTime = audio_id.currentTime; + + var playingPercentage = (audio_currentTime/audio_id.duration)*100; + //console.log(playingPercentage); + document.getElementsByClassName("cs_audio_bar_now")[0].style.width = playingPercentage+"%"; + + var measuredTime = new Date(null); + measuredTime.setSeconds(audio_currentTime); // specify value of SECONDS + var MHSTime = measuredTime.toISOString().substr(11, 8); + // document.getElementById("cs_audio_current_time").innerHTML = MHSTime; + + var spilited_time = MHSTime.split(':'); // split it at the colons + // Hours are worth 60 minutes. + var minutes = (+spilited_time[0]) * 60 + (+spilited_time[1]); + // console.log(minutes + ":" + ((+a[2]) % 60)); + // document.getElementById("cs_audio_duration").innerHTML = minutes+":"+((+spilited_time[2]) % 60); + document.getElementById("cs_audio_current_time").innerHTML = minutes+":"+((+spilited_time[2]) % 60); + + + + + if (audio_id.paused) { + document.getElementById("cs_audio_play").style.display = "inline-block"; + document.getElementById("cs_audio_pause").style.display = "none"; + } + else { + document.getElementById("cs_audio_pause").style.display = "inline-block"; + document.getElementById("cs_audio_play").style.display = "none"; + } + + + + if (audio_id.volume == 0) { + document.getElementById("cs_audio_sound").style.color = "#ff8935"; + } else { + document.getElementById("cs_audio_sound").style.color = "#fff"; + } + + + +}; + + +function playPause() { + if (audio_id.paused) { + audio_id.play(); + // document.getElementById("cs_audio_play").style.display = "none"; + // document.getElementById("cs_audio_pause").style.display = "inline"; + } + else { + audio_id.pause(); + // document.getElementById("cs_audio_pause").style.display = "none"; + // document.getElementById("cs_audio_play").style.display = "inline"; + } +} + + + + +document.getElementById("cs_audio_play").addEventListener("click", function(){ + audio_id.play(); +}); + + +document.getElementById("cs_audio_pause").addEventListener("click", function(){ + audio_id.pause(); +}); + + + + document.onkeydown = function(event) { + switch (event.keyCode) { + case 37: + event.preventDefault(); + // alert('Left key pressed'); + audio_currentTime = audio_id.currentTime; + audio_id.currentTime = audio_currentTime - 5; + break; + case 38: + event.preventDefault(); + // alert('Up key pressed'); + audio_vol = audio_id.volume; + // console.log(audio_vol); + if (audio_vol!=1) { + + try { + audio_id.volume = audio_vol + 0.02; + } + catch(err) { + audio_id.volume = 1; + } + // console.log(audio_vol); + + } + + + if (audio_id.volume == 0) { + document.getElementById("cs_audio_sound").style.color = "#ff8935"; + } else { + document.getElementById("cs_audio_sound").style.color = "#fff"; + } + + + break; + case 39: + event.preventDefault(); + // alert('Right key pressed'); + audio_currentTime = audio_id.currentTime; + audio_id.currentTime = audio_currentTime + 5; + break; + case 40: + event.preventDefault(); + //alert('Down key pressed'); + audio_vol = audio_id.volume; + // console.log(audio_vol); + if (audio_vol!=0) { + try { + audio_id.volume = audio_vol - 0.02; + } + catch(err) { + audio_id.volume = 0; + } + // console.log(audio_vol); + } + + + if (audio_id.volume == 0) { + document.getElementById("cs_audio_sound").style.color = "#ff8935"; + } else { + document.getElementById("cs_audio_sound").style.color = "#fff"; + } + + + break; + + case 32: + //alert('Down key pressed'); + event.preventDefault(); + playPause(); + break; + } + }; + + + +// Progress bar or buffer or seek bar for Buffer bar +audio_id.addEventListener('progress', function() +{ + var ranges = []; + var totaltime = audio_id.duration; + var currentduration = audio_id.currentTime; + for(var i = 0; i < audio_id.buffered.length; i ++) + { + ranges.push([ + buffTimestart = audio_id.buffered.start(i), + buffTimeend = audio_id.buffered.end(i), + buffpercentage = (buffTimeend/totaltime)*100, + //document.getElementById("showbfr").innerHTML = buffpercentage, + document.getElementsByClassName("cs_audio_bar_loaded")[0].style.width = buffpercentage+"%" + ]); + } +}, false); + + + + + +// Change current play on click +document.getElementsByClassName("cs_audio_bar")[0].addEventListener("click", vCurrentBarFun); +function vCurrentBarFun(event) { + vCurrentBarWidth = event.clientX - document.getElementsByClassName("cs_audio_bar")[0].offsetLeft; + document.getElementsByClassName("cs_audio_bar_now")[0].style.width = vCurrentBarWidth+"px"; + audio_id.currentTime = (((vCurrentBarWidth / document.getElementsByClassName("cs_audio_bar")[0].offsetWidth)*100)/100) * audio_id.duration; + +} + + + + + if (audio_id.paused) { + document.getElementById("cs_audio_pause").style.display = "none"; + } + else { + document.getElementById("cs_audio_play").style.display = "none"; + } + + + + audio_id.onvolumechange = function(event) { + // alert("The volume has been changed!"); + audio_vol = audio_id.volume; + vol_width = audio_vol*65; + // console.log(vol_width); + + + currentVolBar = event.clientX - document.getElementsByClassName("cs_volBar")[0].offsetLeft; + document.getElementsByClassName("cs_volume")[0].style.width = vol_width+"px"; + // audio_id.volume = (((currentVolBar / document.getElementsByClassName("volumeBar")[0].offsetWidth)*100)/100) * audio_id.duration; + + + }; + + + + +document.getElementsByClassName("cs_volBar")[0].addEventListener("click", audio_vol_fun); +function audio_vol_fun(event) { + //console.log(document.getElementsByClassName("cs_volBar")[0].offsetLeft); + current_vol_width = event.clientX - document.getElementsByClassName("cs_volBar")[0].getBoundingClientRect().left; + // console.log("current vol width: "+current_vol_width); + // console.log("volbar left position: "+document.getElementsByClassName("cs_volBar")[0].getBoundingClientRect().left); + document.getElementsByClassName("cs_volume")[0].style.width = current_vol_width+"px"; + + var calculated_vol = current_vol_width/65; + audio_id.volume = calculated_vol; +} + + + + + + +function cspd_change_music(music) +{ + + audio_id.pause(); + audio_id.setAttribute('src', music); + audio_id.load(); + //videocontainer.setAttribute('poster', newposter); //Changes video poster image + audio_id.play(); + + + + + + try { + + var measuredTime = new Date(null); + measuredTime.setSeconds(audio_id.duration); // specify value of SECONDS + var MHSTime = measuredTime.toISOString().substr(11, 8); + // document.getElementById("cs_audio_duration").innerHTML = MHSTime; + + var a = MHSTime.split(':'); // split it at the colons + + // Hours are worth 60 minutes. + var minutes = (+a[0]) * 60 + (+a[1]); + // console.log(minutes + ":" + ((+a[2]) % 60)); + document.getElementById("cs_audio_duration").innerHTML = minutes+":"+((+a[2]) % 60); + + + } + catch(err) { + audio_id.addEventListener('loadedmetadata', function() { + + var measuredTime = new Date(null); + measuredTime.setSeconds(audio_id.duration); // specify value of SECONDS + var MHSTime = measuredTime.toISOString().substr(11, 8); + document.getElementById("cs_audio_duration").innerHTML = MHSTime; + + var a = MHSTime.split(':'); // split it at the colons + + // Hours are worth 60 minutes. + var minutes = (+a[0]) * 60 + (+a[1]); + // console.log(minutes + ":" + ((+a[2]) % 60)); + document.getElementById("cs_audio_duration").innerHTML = minutes+":"+((+a[2]) % 60); + + }); + } + + +} + + diff --git a/assets/index.js b/assets/index.js new file mode 100644 index 0000000..c5ecf72 --- /dev/null +++ b/assets/index.js @@ -0,0 +1,21 @@ +var toast = document.getElementById('wip'); + +/* When the user clicks on the button, +toggle between hiding and showing the dropdown content */ +function newsDropdown() { + document.getElementById("news").classList.toggle("show"); + } + + // Close the dropdown menu if the user clicks outside of it + window.onclick = function(event) { + if (!event.target.matches('dropdownbtn')) { + var dropdowns = document.getElementById("news-content"); + var i; + for (i = 0; i < dropdowns.length; i++) { + var openDropdown = dropdowns[i]; + if (openDropdown.classList.contains('show')) { + openDropdown.classList.remove('show'); + } + } + } + } \ No newline at end of file diff --git a/assets/roll_on-noisy_oyster_CLIP.mp3 b/assets/roll_on-noisy_oyster_CLIP.mp3 new file mode 100644 index 0000000..8fcf5c9 Binary files /dev/null and b/assets/roll_on-noisy_oyster_CLIP.mp3 differ diff --git a/assets/snake_bazaar-noisy_oyster.mp3 b/assets/snake_bazaar-noisy_oyster.mp3 new file mode 100644 index 0000000..003d9e7 Binary files /dev/null and b/assets/snake_bazaar-noisy_oyster.mp3 differ diff --git a/style.css b/assets/style.css similarity index 100% rename from style.css rename to assets/style.css diff --git a/index.html b/index.html index e81b7f6..2ab784e 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,11 @@ - + + + + @@ -36,11 +39,11 @@

Home

-

Latest News and Uploads

-
-
+

+
+
  • Blog:
    • -

    The blog is currently work in progress.

    +

    The blog is currently not available.

  • Youtube: