From 46975f8ddb47f1d1ad62a150870828e1e5b936ed Mon Sep 17 00:00:00 2001 From: alisa Date: Mon, 13 Mar 2023 10:23:43 +0800 Subject: [PATCH] add index.html script and styles --- index.html | 35 +++++++++++++++ script.js | 48 ++++++++++++++++++++ style.css | 129 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 212 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..f2d9d85 --- /dev/null +++ b/index.html @@ -0,0 +1,35 @@ + + + + + + + + After words + + + + +
+
+
+ + +
+ +
+
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..249fb41 --- /dev/null +++ b/script.js @@ -0,0 +1,48 @@ +const playerButton = document.querySelector('.player-button'), + audio = document.querySelector('audio'), + playIcon = ` + + + + `, + pauseIcon = ` + + + + +`; + +function toggleAudio() { + if (audio.paused) { + audio.play(); + playerButton.innerHTML = pauseIcon; + } else { + audio.pause(); + playerButton.innerHTML = playIcon; + } +} + +playerButton.addEventListener('click', toggleAudio); + +function audioEnded() { + playerButton.innerHTML = playIcon; +} + +audio.onended = audioEnded; + +const timeline = document.querySelector('.timeline'); + +function changeTimelinePosition() { + const percentagePosition = (100 * audio.currentTime) / audio.duration; + timeline.style.backgroundSize = `${percentagePosition}% 100%`; + timeline.value = percentagePosition; +} + +audio.ontimeupdate = changeTimelinePosition; + +function changeSeek() { + const time = (timeline.value * audio.duration) / 100; + audio.currentTime = time; +} + +timeline.addEventListener('change', changeSeek); diff --git a/style.css b/style.css new file mode 100644 index 0000000..cf4ea17 --- /dev/null +++ b/style.css @@ -0,0 +1,129 @@ +body { + /* display: grid + grid-template-columns: 100% + grid-template-rows: 1fr 1fr 1fr 1fr */ + height: 100vh; + width: 100vw; + margin: 0px; +} + +.audio-player { + width: 100vw; + height: 30 rem; + --player-button-width: 3em; + --sound-button-width: 2em; + --space: .5em; + --tw-bg-opacity: 1; + --acc-background: rgb(239 239 239/var(--tw-bg-opacity)); + --acc-background: #d9d9d9; + --acc-button: rgb(255 255 255/var(--tw-bg-opacity)); + --acc-black: rgb(0 0 0/var(--tw-bg-opacity)); +} + +.icon-container { + width: 100%; + height: 100%; + background-color: #000000; + background-color: var(--acc-black); + color: #fff; + display: flex; + justify-content: center; + align-items: center; +} + +.audio-icon { + width: 90%; + height: 90%; +} + +.controls { + display: flex; + flex-direction: row; + align-items: center; + width: 100%; + /* margin-top: 10px; */ +} + +.player-button { + background-color: transparent; + border: 0; + width: var(--player-button-width); + height: var(--player-button-width); + cursor: pointer; + padding: 0; + box-shadow: 0 0 20px 2px #00000040; +} + + +.timeline { + -webkit-appearance: none; + width: calc(100% - (var(--player-button-width) + var(--sound-button-width) + var(--space))); + height: .5em; + background-color: var(--acc-background); + border-radius: 5px; + background-size: 0% 100%; + background-image: linear-gradient(#00000080, var(--acc-background)); + background-repeat: no-repeat; + margin-right: var(--space); + width: 100vw; + } + + .timeline::-webkit-slider-thumb { + -webkit-appearance: none; + width: 1em; + height: 1em; + border-radius: 50%; + cursor: pointer; + opacity: 0; + transition: all .1s; + background-color: var(--acc-background); + } + + .timeline::-moz-range-thumb { + -webkit-appearance: none; + width: 1em; + height: 1em; + border-radius: 50%; + cursor: pointer; + opacity: 0; + transition: all .1s; + background-color: var(--acc-background); + } + + .timeline::-ms-thumb { + -webkit-appearance: none; + width: 1em; + height: 1em; + border-radius: 50%; + cursor: pointer; + opacity: 0; + transition: all .1s; + background-color: var(--acc-background); + } + + .timeline::-webkit-slider-runnable-track { + -webkit-appearance: none; + box-shadow: none; + border: none; + background: transparent; + } + + .timeline::-moz-range-track { + -webkit-appearance: none; + box-shadow: none; + border: none; + background: transparent; + } + + .timeline::-ms-track { + -webkit-appearance: none; + box-shadow: none; + border: none; + background: transparent; + } + + iframe { + width: 100vw; + height: 100vh; + border: none; + } \ No newline at end of file