Notes
Notes - notes.io |
<div class="audio-player">
<div class="time">
<div class="current-time">00:36</div>
<div class="rail">
<div class="progress"></div>
<div class="dragger"></div>
</div>
<div class="full-time">02:00</div>
</div>
<div class="controls">
<div class="left">
<div class="play-pause">
<svg viewBox="0 0 25 31" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0 3.08851C0 1.38287 1.38267 0 3.08896 0C3.68628 0 4.27146 0.173315 4.77221 0.498966L23.5336 12.6937C24.9636 13.6236 25.3697 15.5364 24.4399 16.9671C24.2045 17.329 23.8956 17.6379 23.5336 17.8733L4.77221 30.0686C3.34221 30.9978 1.42872 30.5924 0.498832 29.1617C0.173308 28.661 0 28.0764 0 27.4785V13.8999V3.08851Z"
/>
</svg>
</div>
<div class="volume">
<svg viewBox="0 0 125 110" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 35C0 32.9384 2.213 30.8059 4 30.8059H24.945L65.067 2.03462C67.1521 -0.113198 71 -1.19027 71 2.03461V107.965C71 111.19 67.1521 110.113 65.067 107.965L24.945 79.1941H4C2.213 79.1941 0 77.0617 0 75L0 35Z"
/>
<path
d="M88.7223 84.6814C90.5418 86.5112 93.5233 86.5243 95.15 84.5212C98.0087 81.0013 100.346 77.0737 102.082 72.8595C104.414 67.1973 105.614 61.1287 105.614 55C105.614 48.8713 104.414 42.8027 102.082 37.1405C100.346 32.9263 98.0087 28.9987 95.15 25.4788C93.5233 23.4757 90.5418 23.4888 88.7223 25.3186V25.3186C86.9173 27.1339 86.9441 30.0505 88.5104 32.0753C90.549 34.7107 92.2312 37.6148 93.5071 40.7124C95.3728 45.2421 96.3331 50.0971 96.3331 55C96.3331 59.9029 95.3728 64.7579 93.5071 69.2876C92.2312 72.3852 90.549 75.2893 88.5104 77.9247C86.9441 79.9495 86.9173 82.8661 88.7223 84.6814V84.6814Z"
/>
<path
d="M102.493 98.834C104.229 100.58 107.066 100.589 108.681 98.7304C113.401 93.2973 117.216 87.1198 119.969 80.4362C123.29 72.3719 125 63.7287 125 55C125 46.2713 123.29 37.6281 119.969 29.5638C117.216 22.8802 113.401 16.7027 108.681 11.2696C107.066 9.41115 104.229 9.42037 102.493 11.166V11.166C100.771 12.8977 100.786 15.6846 102.37 17.5434C106.293 22.1473 109.474 27.3528 111.789 32.9714C114.665 39.9553 116.146 47.4407 116.146 55C116.146 62.5594 114.665 70.0447 111.789 77.0286C109.474 82.6472 106.293 87.8527 102.37 92.4566C100.786 94.3154 100.771 97.1023 102.493 98.834V98.834Z"
/>
</svg>
<div class="volume-rail">
<div class="volume-prog"></div>
<div class="volume-dragger"></div>
</div>
</div>
</div>
<div class="title">
<h2>Lorem Ipsum Dolor Sit Amed</h2>
</div>
<div class="skip-buttons">
<svg
width="200"
height="223"
viewBox="0 0 200 223"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.52588e-05 122.421C1.52588e-05 142.2 5.86492 161.534 16.8531 177.979C27.8412 194.423 43.4591 207.241 61.7317 214.809C80.0043 222.378 100.111 224.359 119.509 220.5C138.907 216.641 156.725 207.117 170.711 193.132C184.696 179.147 194.22 161.329 198.079 141.931C201.937 122.532 199.957 102.426 192.388 84.1531C184.819 65.8805 172.002 50.2627 155.557 39.2745C139.112 28.2864 119.278 22 99.5 22V0L75.5 34V0L51.5 35L75.5 71V36L99.5 71V48.5C114.136 48.5 128.943 52.7615 141.112 60.8927C153.281 69.024 162.766 80.5812 168.367 94.1029C173.968 107.625 175.433 122.504 172.578 136.858C169.723 151.213 162.675 164.398 152.326 174.747C141.977 185.096 128.791 192.144 114.437 195C100.082 197.855 85.2032 196.389 71.6814 190.789C58.1597 185.188 46.6025 175.703 38.4713 163.534C30.34 151.364 26 137.057 26 122.421H1.52588e-05Z"
/>
<path
d="M86.8008 126.395L78.1289 124.168L82.4062 81.6875H126.176V91.707H91.6055L89.0273 114.91C90.5898 114.012 92.5625 113.172 94.9453 112.391C97.3672 111.609 100.141 111.219 103.266 111.219C107.211 111.219 110.746 111.902 113.871 113.27C116.996 114.598 119.652 116.512 121.84 119.012C124.066 121.512 125.766 124.52 126.938 128.035C128.109 131.551 128.695 135.477 128.695 139.812C128.695 143.914 128.129 147.684 126.996 151.121C125.902 154.559 124.242 157.566 122.016 160.145C119.789 162.684 116.977 164.656 113.578 166.062C110.219 167.469 106.254 168.172 101.684 168.172C98.2461 168.172 94.9844 167.703 91.8984 166.766C88.8516 165.789 86.1172 164.324 83.6953 162.371C81.3125 160.379 79.3594 157.918 77.8359 154.988C76.3516 152.02 75.4141 148.543 75.0234 144.559H85.3359C85.8047 147.762 86.7422 150.457 88.1484 152.645C89.5547 154.832 91.3906 156.492 93.6562 157.625C95.9609 158.719 98.6367 159.266 101.684 159.266C104.262 159.266 106.547 158.816 108.539 157.918C110.531 157.02 112.211 155.73 113.578 154.051C114.945 152.371 115.98 150.34 116.684 147.957C117.426 145.574 117.797 142.898 117.797 139.93C117.797 137.234 117.426 134.734 116.684 132.43C115.941 130.125 114.828 128.113 113.344 126.395C111.898 124.676 110.121 123.348 108.012 122.41C105.902 121.434 103.48 120.945 100.746 120.945C97.1133 120.945 94.3594 121.434 92.4844 122.41C90.6484 123.387 88.7539 124.715 86.8008 126.395Z"
/>
</svg>
<svg
width="201"
height="223"
viewBox="0 0 201 223"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M200.5 122.421C200.5 142.2 194.635 161.534 183.647 177.979C172.659 194.423 157.041 207.241 138.768 214.809C120.496 222.378 100.389 224.359 80.991 220.5C61.5929 216.641 43.7746 207.117 29.7893 193.132C15.8041 179.147 6.27998 161.329 2.42146 141.931C-1.43707 122.532 0.543267 102.426 8.11203 84.1531C15.6808 65.8805 28.498 50.2627 44.943 39.2745C61.3879 28.2864 81.2219 22 101 22V0L125 34V0L149 35L125 71V36L101 71V48.5C86.3642 48.5 71.557 52.7615 59.3878 60.8927C47.2185 69.024 37.7338 80.5812 32.1329 94.1029C26.532 107.625 25.0666 122.504 27.9219 136.858C30.7772 151.213 37.825 164.398 48.1741 174.747C58.5232 185.096 71.7087 192.144 86.0633 195C100.418 197.855 115.297 196.389 128.819 190.789C142.34 185.188 153.898 175.703 162.029 163.534C170.16 151.364 174.5 137.057 174.5 122.421H200.5Z"
/>
<path
d="M86.8008 126.395L78.1289 124.168L82.4062 81.6875H126.176V91.707H91.6055L89.0273 114.91C90.5898 114.012 92.5625 113.172 94.9453 112.391C97.3672 111.609 100.141 111.219 103.266 111.219C107.211 111.219 110.746 111.902 113.871 113.27C116.996 114.598 119.652 116.512 121.84 119.012C124.066 121.512 125.766 124.52 126.938 128.035C128.109 131.551 128.695 135.477 128.695 139.812C128.695 143.914 128.129 147.684 126.996 151.121C125.902 154.559 124.242 157.566 122.016 160.145C119.789 162.684 116.977 164.656 113.578 166.062C110.219 167.469 106.254 168.172 101.684 168.172C98.2461 168.172 94.9844 167.703 91.8984 166.766C88.8516 165.789 86.1172 164.324 83.6953 162.371C81.3125 160.379 79.3594 157.918 77.8359 154.988C76.3516 152.02 75.4141 148.543 75.0234 144.559H85.3359C85.8047 147.762 86.7422 150.457 88.1484 152.645C89.5547 154.832 91.3906 156.492 93.6562 157.625C95.9609 158.719 98.6367 159.266 101.684 159.266C104.262 159.266 106.547 158.816 108.539 157.918C110.531 157.02 112.211 155.73 113.578 154.051C114.945 152.371 115.98 150.34 116.684 147.957C117.426 145.574 117.797 142.898 117.797 139.93C117.797 137.234 117.426 134.734 116.684 132.43C115.941 130.125 114.828 128.113 113.344 126.395C111.898 124.676 110.121 123.348 108.012 122.41C105.902 121.434 103.48 120.945 100.746 120.945C97.1133 120.945 94.3594 121.434 92.4844 122.41C90.6484 123.387 88.7539 124.715 86.8008 126.395Z"
/>
</svg>
</div>
</div>
</div>
</div>
<style scoped>
.audio-player {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #f2f2f2;
width: 100%;
}
.controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 0 10px;
}
.play-pause,
.time,
.volume,
.skip-buttons,
.left {
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.skip-buttons,
.left {
gap: 10px;
}
.skip-buttons svg {
height: 30px;
}
.current-time,
.full-time {
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
color: gray;
}
.title {
overflow: hidden;
width: 50%;
}
.title h2 {
margin: 0;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
color: gray;
white-space: nowrap;
}
.rail {
position: relative;
margin: 0 5px;
background: gray;
border-radius: 10px;
width: 300px;
}
.progress {
height: 8px;
width: 30%;
background: #39bde6;
}
.dragger {
position: absolute;
left: 30%;
top: 50%;
transform: translate(-30%, -50%);
height: 15px;
width: 15px;
border-radius: 50%;
background: #39bde6;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
cursor: pointer;
}
.volume-rail {
margin-left: 5px;
}
svg {
fill: gray;
height: 60%;
transition: all 0.2s ease;
cursor: pointer;
width: unset;
}
svg:hover {
fill: #39bde6;
}
</style>
|
|
Notes.io is a web-based application for taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000 notes created and continuing...
With notes.io;
- * You can take a note from anywhere and any device with internet connection.
- * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
- * You can quickly share your contents without website, blog and e-mail.
- * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
- * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.
Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.
Easy: Notes.io doesn’t require installation. Just write and share note!
Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )
Free: Notes.io works for 12 years and has been free since the day it was started.
You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;
Email: [email protected]
Twitter: http://twitter.com/notesio
Instagram: http://instagram.com/notes.io
Facebook: http://facebook.com/notesio
Regards;
Notes.io Team
