{"id":2,"date":"2023-06-26T14:49:15","date_gmt":"2023-06-26T14:49:15","guid":{"rendered":"https:\/\/quincepartyestudio.com\/core\/?page_id=2"},"modified":"2023-10-02T18:28:47","modified_gmt":"2023-10-02T17:28:47","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/quincepartyestudio.com\/index.php\/sample-page\/","title":{"rendered":"Sample Page"},"content":{"rendered":"<p>[et_pb_section fb_built=\u00bb1&#8243; _builder_version=\u00bb4.22.2&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_row admin_label=\u00bbrow\u00bb _builder_version=\u00bb4.16&#8243; background_size=\u00bbinitial\u00bb background_position=\u00bbtop_left\u00bb background_repeat=\u00bbrepeat\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.16&#8243; custom_padding=\u00bb|||\u00bb global_colors_info=\u00bb{}\u00bb custom_padding__hover=\u00bb|||\u00bb][et_pb_code disabled_on=\u00bbon|on|on\u00bb admin_label=\u00bbcirculo\u00bb _builder_version=\u00bb4.22.2&#8243; _module_preset=\u00bbdefault\u00bb disabled=\u00bbon\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<div class=\"slide__audio js-audio\" ><!-- [et_pb_line_break_holder] --><audio  class=\"slide__audio-player\" controls=\"\"><!-- [et_pb_line_break_holder] --><source src=\"https:\/\/quincepartyestudio.com\/wp-content\/uploads\/2023\/08\/happy-114950.mp3\" type=\"audio\/mpeg\"\/><!-- [et_pb_line_break_holder] --><\/audio><!-- [et_pb_line_break_holder] --><\/p>\n<div class=\"audio__controls\"><!-- [et_pb_line_break_holder] -->   <svg version=\"1.1\" id=\"circle\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" viewBox=\"0 0 100 100\"><!-- [et_pb_line_break_holder] -->      <path id=\"seekbar\" fill=\"none\" stroke-meterlimit=\"10\" d=\"M50,2.9L50,2.9C76,2.9,97.1,24,97.1,50v0C97.1,76,76,97.1,50,97.1h0C24,97.1,2.9,76,2.9,50v0C2.9,24,24,2.9,50,2.9z\"\/><!-- [et_pb_line_break_holder] -->   <\/svg><!-- [et_pb_line_break_holder] -->   <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"equalizer\" viewBox=\"0 0 100 100\"><!-- [et_pb_line_break_holder] -->      <g class=\"equalizer-group\"><!-- [et_pb_line_break_holder] -->         <rect class=\"bar\"><\/rect><!-- [et_pb_line_break_holder] -->         <rect class=\"bar\"><\/rect><!-- [et_pb_line_break_holder] -->         <rect class=\"bar\"><\/rect><!-- [et_pb_line_break_holder] -->         <rect class=\"bar\"><\/rect><!-- [et_pb_line_break_holder] -->         <rect class=\"bar\"><\/rect><!-- [et_pb_line_break_holder] -->      <\/g><!-- [et_pb_line_break_holder] -->   <\/svg><!-- [et_pb_line_break_holder] -->   <\/p>\n<div class=\"audio__slider\"><\/div>\n<p><!-- [et_pb_line_break_holder] -->   <button class=\"play-pause\"><\/button><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/p>\n<style id=\"INLINE_PEN_STYLESHEET_ID\"><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.slide__audio {<!-- [et_pb_line_break_holder] -->position: relative;<!-- [et_pb_line_break_holder] -->background: #de92b2 ;<!-- [et_pb_line_break_holder] -->width: 100px;<!-- [et_pb_line_break_holder] -->top: 20%;<!-- [et_pb_line_break_holder] -->margin: 0 auto;<!-- [et_pb_line_break_holder] -->border-radius: 100px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.audio__controls {<!-- [et_pb_line_break_holder] -->height: 100px;<!-- [et_pb_line_break_holder] -->width: 100px;<!-- [et_pb_line_break_holder] -->position: relative;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.slide__audio .slide__audio-player {<!-- [et_pb_line_break_holder] -->display: none;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.audio__slider {<!-- [et_pb_line_break_holder] -->position: absolute;<!-- [et_pb_line_break_holder] -->z-index: 3;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.audio__slider::before {<!-- [et_pb_line_break_holder] -->content: \"\";<!-- [et_pb_line_break_holder] -->display: block;<!-- [et_pb_line_break_holder] -->width: 100%;<!-- [et_pb_line_break_holder] -->height: 100%;<!-- [et_pb_line_break_holder] -->border: 5px solid rgba(255, 255, 255, 0.3);<!-- [et_pb_line_break_holder] -->border-radius: 100%;<!-- [et_pb_line_break_holder] -->position: absolute;<!-- [et_pb_line_break_holder] -->margin: 0;<!-- [et_pb_line_break_holder] -->padding: 0;<!-- [et_pb_line_break_holder] -->box-sizing: border-box;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.audio__slider .rs-container {<!-- [et_pb_line_break_holder] -->position: relative;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.audio__slider .rs-bar {<!-- [et_pb_line_break_holder] -->top: 50%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.audio__slider .rs-tooltip {<!-- [et_pb_line_break_holder] -->display: none;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-control {<!-- [et_pb_line_break_holder] -->position: relative;<!-- [et_pb_line_break_holder] -->outline: 0 none;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-container {<!-- [et_pb_line_break_holder] -->position: relative;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-control *,<!-- [et_pb_line_break_holder] -->.rs-control *:before,<!-- [et_pb_line_break_holder] -->.rs-control *:after {<!-- [et_pb_line_break_holder] -->box-sizing: border-box;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-animation .rs-transition {<!-- [et_pb_line_break_holder] -->transition: all 0.5s linear 0s;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-bar {<!-- [et_pb_line_break_holder] -->transform-origin: 100% 50%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-control .rs-split .rs-path,<!-- [et_pb_line_break_holder] -->.rs-control .rs-overlay1,<!-- [et_pb_line_break_holder] -->.rs-control .rs-overlay2 {<!-- [et_pb_line_break_holder] -->transform-origin: 50% 100%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-control .rs-overlay {<!-- [et_pb_line_break_holder] -->transform-origin: 100% 100%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-control.rs-error {<!-- [et_pb_line_break_holder] -->border: 1px dotted;<!-- [et_pb_line_break_holder] -->text-align: center;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-inner-container {<!-- [et_pb_line_break_holder] -->height: 100%;<!-- [et_pb_line_break_holder] -->width: 100%;<!-- [et_pb_line_break_holder] -->position: relative;<!-- [et_pb_line_break_holder] -->overflow: hidden;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-block {<!-- [et_pb_line_break_holder] -->height: 100%;<!-- [et_pb_line_break_holder] -->width: 100%;<!-- [et_pb_line_break_holder] -->display: block;<!-- [et_pb_line_break_holder] -->position: absolute;<!-- [et_pb_line_break_holder] -->top: 0;<!-- [et_pb_line_break_holder] -->overflow: hidden;<!-- [et_pb_line_break_holder] -->z-index: 3;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-block .rs-inner {<!-- [et_pb_line_break_holder] -->border-radius: 1000px;<!-- [et_pb_line_break_holder] -->display: block;<!-- [et_pb_line_break_holder] -->height: 100%;<!-- [et_pb_line_break_holder] -->width: 100%;<!-- [et_pb_line_break_holder] -->position: relative;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-bar {<!-- [et_pb_line_break_holder] -->position: absolute;<!-- [et_pb_line_break_holder] -->height: 0;<!-- [et_pb_line_break_holder] -->z-index: 10;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-bar .rs-seperator {<!-- [et_pb_line_break_holder] -->height: 0;<!-- [et_pb_line_break_holder] -->border-bottom: medium none;<!-- [et_pb_line_break_holder] -->display: block;<!-- [et_pb_line_break_holder] -->float: left;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.full .rs-bar,<!-- [et_pb_line_break_holder] -->.half .rs-bar {<!-- [et_pb_line_break_holder] -->width: 50%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.full .rs-bar,<!-- [et_pb_line_break_holder] -->.half.left .rs-bar,<!-- [et_pb_line_break_holder] -->.half.right .rs-bar {<!-- [et_pb_line_break_holder] -->top: 50%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.bottom .rs-bar {<!-- [et_pb_line_break_holder] -->top: 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.half.right .rs-bar,<!-- [et_pb_line_break_holder] -->.quarter.right .rs-bar {<!-- [et_pb_line_break_holder] -->right: 100%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-handle.rs-move {<!-- [et_pb_line_break_holder] -->cursor: move;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-readonly .rs-handle.rs-move {<!-- [et_pb_line_break_holder] -->cursor: default;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-path {<!-- [et_pb_line_break_holder] -->display: block;<!-- [et_pb_line_break_holder] -->height: 100%;<!-- [et_pb_line_break_holder] -->width: 100%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-split .rs-path {<!-- [et_pb_line_break_holder] -->border-radius: 1000px 1000px 0 0;<!-- [et_pb_line_break_holder] -->overflow: hidden;<!-- [et_pb_line_break_holder] -->height: 50%;<!-- [et_pb_line_break_holder] -->position: absolute;<!-- [et_pb_line_break_holder] -->top: 0;<!-- [et_pb_line_break_holder] -->z-index: 2;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-tooltip {<!-- [et_pb_line_break_holder] -->text-align: center;<!-- [et_pb_line_break_holder] -->position: absolute;<!-- [et_pb_line_break_holder] -->cursor: default;<!-- [et_pb_line_break_holder] -->border: 1px solid transparent;<!-- [et_pb_line_break_holder] -->z-index: 10;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-handle {<!-- [et_pb_line_break_holder] -->border-radius: 1000px;<!-- [et_pb_line_break_holder] -->outline: 0 none;<!-- [et_pb_line_break_holder] -->float: left;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-handle.rs-handle-square {<!-- [et_pb_line_break_holder] -->border-radius: 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.paused .rs-handle,<!-- [et_pb_line_break_holder] -->.playing .rs-handle,<!-- [et_pb_line_break_holder] -->.active .rs-handle {<!-- [et_pb_line_break_holder] -->background-color: #fff ;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-handle {<!-- [et_pb_line_break_holder] -->background-color: #838383 ;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.slide__audio #circle {<!-- [et_pb_line_break_holder] -->position: absolute;<!-- [et_pb_line_break_holder] -->top: 50px;<!-- [et_pb_line_break_holder] -->left: 50px;<!-- [et_pb_line_break_holder] -->bottom: 0;<!-- [et_pb_line_break_holder] -->stroke: #fff;<!-- [et_pb_line_break_holder] -->width: 100px;<!-- [et_pb_line_break_holder] -->height: 100px;<!-- [et_pb_line_break_holder] -->border-radius: 100%;<!-- [et_pb_line_break_holder] -->transform: translate(-50%, -50%);<!-- [et_pb_line_break_holder] -->pointer-events: none;<!-- [et_pb_line_break_holder] -->z-index: 4;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.play-pause {<!-- [et_pb_line_break_holder] -->position: absolute;<!-- [et_pb_line_break_holder] -->left: 50px;<!-- [et_pb_line_break_holder] -->top: 50px;<!-- [et_pb_line_break_holder] -->z-index: 3;<!-- [et_pb_line_break_holder] -->width: 50px;<!-- [et_pb_line_break_holder] -->background: transparent !important;<!-- [et_pb_line_break_holder] -->height: 50px;<!-- [et_pb_line_break_holder] -->cursor: pointer;<!-- [et_pb_line_break_holder] -->transform: translate(-50%, -50%);<!-- [et_pb_line_break_holder] -->border: 0;<!-- [et_pb_line_break_holder] -->padding: 0;<!-- [et_pb_line_break_holder] -->margin: 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.play-pause:focus {<!-- [et_pb_line_break_holder] -->outline: none;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.play-pause::after {<!-- [et_pb_line_break_holder] -->content: \"\";<!-- [et_pb_line_break_holder] -->position: absolute;<!-- [et_pb_line_break_holder] -->top: 0;<!-- [et_pb_line_break_holder] -->left: 0;<!-- [et_pb_line_break_holder] -->width: 100%;<!-- [et_pb_line_break_holder] -->height: 100%;<!-- [et_pb_line_break_holder] -->background-image: url(\"https:\/\/quincepartyestudio.com\/wp-content\/uploads\/2023\/09\/play_rep.png\");<!-- [et_pb_line_break_holder] -->background-size: 150%;<!-- [et_pb_line_break_holder] -->background-position: 50% 50%;<!-- [et_pb_line_break_holder] -->background-repeat: no-repeat;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->#seekbar {<!-- [et_pb_line_break_holder] -->stroke-width: 6;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.playing #seekbar {<!-- [et_pb_line_break_holder] -->visibility: visible;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.playing .play-pause::after {<!-- [et_pb_line_break_holder] -->content: none;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.playing .play-pause::before {<!-- [et_pb_line_break_holder] -->opacity: 1;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.equalizer {<!-- [et_pb_line_break_holder] -->height: 100px;<!-- [et_pb_line_break_holder] -->width: 50px;<!-- [et_pb_line_break_holder] -->transform: rotate(180deg);<!-- [et_pb_line_break_holder] -->left: 25px;<!-- [et_pb_line_break_holder] -->top: 10px;<!-- [et_pb_line_break_holder] -->position: absolute;<!-- [et_pb_line_break_holder] -->transform-origin: center;<!-- [et_pb_line_break_holder] -->opacity: 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.playing .equalizer {<!-- [et_pb_line_break_holder] -->opacity: 1;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.equalizer-group {<!-- [et_pb_line_break_holder] -->width: 100%;<!-- [et_pb_line_break_holder] -->height: 100%;<!-- [et_pb_line_break_holder] -->display: block;<!-- [et_pb_line_break_holder] -->transform-origin: center;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.bar {<!-- [et_pb_line_break_holder] -->fill: #fff;<!-- [et_pb_line_break_holder] -->width: 5px;<!-- [et_pb_line_break_holder] -->-webkit-animation: equalize 1.25s steps(25, end) 0s infinite;<!-- [et_pb_line_break_holder] -->        animation: equalize 1.25s steps(25, end) 0s infinite;<!-- [et_pb_line_break_holder] -->transform-origin: center;<!-- [et_pb_line_break_holder] -->position: relative;<!-- [et_pb_line_break_holder] -->margin-top: -50px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.bar:nth-child(1) {<!-- [et_pb_line_break_holder] -->-webkit-animation-duration: 1.9s;<!-- [et_pb_line_break_holder] -->        animation-duration: 1.9s;<!-- [et_pb_line_break_holder] -->transform: translate(5px, 50%);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.bar:nth-child(2) {<!-- [et_pb_line_break_holder] -->-webkit-animation-duration: 2s;<!-- [et_pb_line_break_holder] -->        animation-duration: 2s;<!-- [et_pb_line_break_holder] -->transform: translate(25%, 50%);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.bar:nth-child(3) {<!-- [et_pb_line_break_holder] -->-webkit-animation-duration: 2.3s;<!-- [et_pb_line_break_holder] -->        animation-duration: 2.3s;<!-- [et_pb_line_break_holder] -->transform: translate(50%, 50%);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.bar:nth-child(4) {<!-- [et_pb_line_break_holder] -->-webkit-animation-duration: 2.4s;<!-- [et_pb_line_break_holder] -->        animation-duration: 2.4s;<!-- [et_pb_line_break_holder] -->transform: translate(75%, 50%);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.bar:nth-child(5) {<!-- [et_pb_line_break_holder] -->-webkit-animation-duration: 2.1s;<!-- [et_pb_line_break_holder] -->        animation-duration: 2.1s;<!-- [et_pb_line_break_holder] -->transform: translate(95%, 50%);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->@-webkit-keyframes equalize {<!-- [et_pb_line_break_holder] -->0% {<!-- [et_pb_line_break_holder] -->  height: 10px;<!-- [et_pb_line_break_holder] -->  margin-top: -10px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->4% {<!-- [et_pb_line_break_holder] -->  height: 5px;<!-- [et_pb_line_break_holder] -->  margin-top: -5px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->8% {<!-- [et_pb_line_break_holder] -->  height: 40px;<!-- [et_pb_line_break_holder] -->  margin-top: -40px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->12% {<!-- [et_pb_line_break_holder] -->  height: 30px;<!-- [et_pb_line_break_holder] -->  margin-top: -30px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->16% {<!-- [et_pb_line_break_holder] -->  height: 20px;<!-- [et_pb_line_break_holder] -->  margin-top: -20px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->20% {<!-- [et_pb_line_break_holder] -->  height: 30px;<!-- [et_pb_line_break_holder] -->  margin-top: -30px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->24% {<!-- [et_pb_line_break_holder] -->  height: 40px;<!-- [et_pb_line_break_holder] -->  margin-top: -40px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->28% {<!-- [et_pb_line_break_holder] -->  height: 10px;<!-- [et_pb_line_break_holder] -->  margin-top: -10px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->32% {<!-- [et_pb_line_break_holder] -->  height: 40px;<!-- [et_pb_line_break_holder] -->  margin-top: -40px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->36% {<!-- [et_pb_line_break_holder] -->  height: 10px;<!-- [et_pb_line_break_holder] -->  margin-top: -10px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->40% {<!-- [et_pb_line_break_holder] -->  height: 20px;<!-- [et_pb_line_break_holder] -->  margin-top: -20px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->44% {<!-- [et_pb_line_break_holder] -->  height: 40px;<!-- [et_pb_line_break_holder] -->  margin-top: -40px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->48% {<!-- [et_pb_line_break_holder] -->  height: 15px;<!-- [et_pb_line_break_holder] -->  margin-top: -15px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->52% {<!-- [et_pb_line_break_holder] -->  height: 30px;<!-- [et_pb_line_break_holder] -->  margin-top: -30px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->56% {<!-- [et_pb_line_break_holder] -->  height: 10px;<!-- [et_pb_line_break_holder] -->  margin-top: -10px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->60% {<!-- [et_pb_line_break_holder] -->  height: 30px;<!-- [et_pb_line_break_holder] -->  margin-top: -30px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->64% {<!-- [et_pb_line_break_holder] -->  height: 35px;<!-- [et_pb_line_break_holder] -->  margin-top: -35px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->68% {<!-- [et_pb_line_break_holder] -->  height: 15px;<!-- [et_pb_line_break_holder] -->  margin-top: -15px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->72% {<!-- [et_pb_line_break_holder] -->  height: 5px;<!-- [et_pb_line_break_holder] -->  margin-top: -5px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->76% {<!-- [et_pb_line_break_holder] -->  height: 45px;<!-- [et_pb_line_break_holder] -->  margin-top: -45px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->80% {<!-- [et_pb_line_break_holder] -->  height: 25px;<!-- [et_pb_line_break_holder] -->  margin-top: -25px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->84% {<!-- [et_pb_line_break_holder] -->  height: 5px;<!-- [et_pb_line_break_holder] -->  margin-top: -5px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->88% {<!-- [et_pb_line_break_holder] -->  height: 50px;<!-- [et_pb_line_break_holder] -->  margin-top: -50px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->92% {<!-- [et_pb_line_break_holder] -->  height: 30px;<!-- [et_pb_line_break_holder] -->  margin-top: -30px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->96% {<!-- [et_pb_line_break_holder] -->  height: 50px;<!-- [et_pb_line_break_holder] -->  margin-top: -50px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->100% {<!-- [et_pb_line_break_holder] -->  height: 25px;<!-- [et_pb_line_break_holder] -->  margin-top: -25px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->@keyframes equalize {<!-- [et_pb_line_break_holder] -->0% {<!-- [et_pb_line_break_holder] -->  height: 10px;<!-- [et_pb_line_break_holder] -->  margin-top: -10px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->4% {<!-- [et_pb_line_break_holder] -->  height: 5px;<!-- [et_pb_line_break_holder] -->  margin-top: -5px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->8% {<!-- [et_pb_line_break_holder] -->  height: 40px;<!-- [et_pb_line_break_holder] -->  margin-top: -40px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->12% {<!-- [et_pb_line_break_holder] -->  height: 30px;<!-- [et_pb_line_break_holder] -->  margin-top: -30px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->16% {<!-- [et_pb_line_break_holder] -->  height: 20px;<!-- [et_pb_line_break_holder] -->  margin-top: -20px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->20% {<!-- [et_pb_line_break_holder] -->  height: 30px;<!-- [et_pb_line_break_holder] -->  margin-top: -30px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->24% {<!-- [et_pb_line_break_holder] -->  height: 40px;<!-- [et_pb_line_break_holder] -->  margin-top: -40px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->28% {<!-- [et_pb_line_break_holder] -->  height: 10px;<!-- [et_pb_line_break_holder] -->  margin-top: -10px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->32% {<!-- [et_pb_line_break_holder] -->  height: 40px;<!-- [et_pb_line_break_holder] -->  margin-top: -40px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->36% {<!-- [et_pb_line_break_holder] -->  height: 10px;<!-- [et_pb_line_break_holder] -->  margin-top: -10px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->40% {<!-- [et_pb_line_break_holder] -->  height: 20px;<!-- [et_pb_line_break_holder] -->  margin-top: -20px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->44% {<!-- [et_pb_line_break_holder] -->  height: 40px;<!-- [et_pb_line_break_holder] -->  margin-top: -40px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->48% {<!-- [et_pb_line_break_holder] -->  height: 15px;<!-- [et_pb_line_break_holder] -->  margin-top: -15px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->52% {<!-- [et_pb_line_break_holder] -->  height: 30px;<!-- [et_pb_line_break_holder] -->  margin-top: -30px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->56% {<!-- [et_pb_line_break_holder] -->  height: 10px;<!-- [et_pb_line_break_holder] -->  margin-top: -10px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->60% {<!-- [et_pb_line_break_holder] -->  height: 30px;<!-- [et_pb_line_break_holder] -->  margin-top: -30px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->64% {<!-- [et_pb_line_break_holder] -->  height: 35px;<!-- [et_pb_line_break_holder] -->  margin-top: -35px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->68% {<!-- [et_pb_line_break_holder] -->  height: 15px;<!-- [et_pb_line_break_holder] -->  margin-top: -15px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->72% {<!-- [et_pb_line_break_holder] -->  height: 5px;<!-- [et_pb_line_break_holder] -->  margin-top: -5px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->76% {<!-- [et_pb_line_break_holder] -->  height: 45px;<!-- [et_pb_line_break_holder] -->  margin-top: -45px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->80% {<!-- [et_pb_line_break_holder] -->  height: 25px;<!-- [et_pb_line_break_holder] -->  margin-top: -25px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->84% {<!-- [et_pb_line_break_holder] -->  height: 5px;<!-- [et_pb_line_break_holder] -->  margin-top: -5px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->88% {<!-- [et_pb_line_break_holder] -->  height: 50px;<!-- [et_pb_line_break_holder] -->  margin-top: -50px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->92% {<!-- [et_pb_line_break_holder] -->  height: 30px;<!-- [et_pb_line_break_holder] -->  margin-top: -30px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->96% {<!-- [et_pb_line_break_holder] -->  height: 50px;<!-- [et_pb_line_break_holder] -->  margin-top: -50px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->100% {<!-- [et_pb_line_break_holder] -->  height: 25px;<!-- [et_pb_line_break_holder] -->  margin-top: -25px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><\/style>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  $('.js-audio').each(function (index, el) {<!-- [et_pb_line_break_holder] -->\tinitAudioPlayer($(this), index);<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->$('.audio__slider').roundSlider({<!-- [et_pb_line_break_holder] -->\tradius: 50,<!-- [et_pb_line_break_holder] -->\tvalue: 0,<!-- [et_pb_line_break_holder] -->\tstartAngle: 90,<!-- [et_pb_line_break_holder] -->\twidth: 5,<!-- [et_pb_line_break_holder] -->\thandleSize: '+6',<!-- [et_pb_line_break_holder] -->\thandleShape: 'round',<!-- [et_pb_line_break_holder] -->\tsliderType: 'min-range'<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->$('.audio__slider').on('drag, change', function (e) {<!-- [et_pb_line_break_holder] -->\tlet $this = $(this);<!-- [et_pb_line_break_holder] -->\tlet $elem = $this.closest('.js-audio');<!-- [et_pb_line_break_holder] -->\tupdateAudio(e, $elem);<!-- [et_pb_line_break_holder] -->\t$this.addClass('active');<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->function updateAudio(e, $elem) {<!-- [et_pb_line_break_holder] -->\tconsole.log(e.handle.value);<!-- [et_pb_line_break_holder] -->\tlet value = e.handle.value;<!-- [et_pb_line_break_holder] -->\t\/\/ var thisPlayer = el.find('.js-audio'),<!-- [et_pb_line_break_holder] -->\tvar play = $elem.find('.play-pause'),<!-- [et_pb_line_break_holder] -->\t\tcircle = $elem.find('#seekbar'),<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\t\tgetCircle = circle.get(0),<!-- [et_pb_line_break_holder] -->\t\ttotalLength = getCircle.getTotalLength(),<!-- [et_pb_line_break_holder] -->\t\t\/\/currentTime = $elem.find('audio')[0].currentTime,<!-- [et_pb_line_break_holder] -->\t\tmaxduration = $elem.find('audio')[0].duration;<!-- [et_pb_line_break_holder] -->\tvar y = (value * maxduration) \/ 100;<!-- [et_pb_line_break_holder] -->\t$elem.find('audio')[0].currentTime = y;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->function initAudioPlayer(player) {<!-- [et_pb_line_break_holder] -->\tlet audio = player.find('audio'),<!-- [et_pb_line_break_holder] -->\t\tplay = player.find('.play-pause'),<!-- [et_pb_line_break_holder] -->\t\tcircle = player.find('#seekbar'),<!-- [et_pb_line_break_holder] -->\t\tgetCircle = circle.get(0),<!-- [et_pb_line_break_holder] -->\t\ttotalLength = getCircle.getTotalLength();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\tcircle.attr({<!-- [et_pb_line_break_holder] -->\t\t'stroke-dasharray': totalLength,<!-- [et_pb_line_break_holder] -->\t\t'stroke-dashoffset': totalLength,<!-- [et_pb_line_break_holder] -->\t});<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\tplay.on('click', () => {<!-- [et_pb_line_break_holder] -->\t\tif (audio[0].paused) {<!-- [et_pb_line_break_holder] -->\t\t\t$('audio').each((index, el) => {<!-- [et_pb_line_break_holder] -->\t\t\t\t$('audio')[index].pause();<!-- [et_pb_line_break_holder] -->\t\t\t});<!-- [et_pb_line_break_holder] -->\t\t\t$('.js-audio').removeClass('playing');<!-- [et_pb_line_break_holder] -->\t\t\taudio[0].play();<!-- [et_pb_line_break_holder] -->\t\t\tplayer.removeClass('paused');<!-- [et_pb_line_break_holder] -->\t\t\tplayer.addClass('playing');<!-- [et_pb_line_break_holder] -->\t\t} else {<!-- [et_pb_line_break_holder] -->\t\t\taudio[0].pause();<!-- [et_pb_line_break_holder] -->\t\t\tplayer.removeClass('playing');<!-- [et_pb_line_break_holder] -->\t\t\tplayer.addClass('paused');<!-- [et_pb_line_break_holder] -->\t\t}<!-- [et_pb_line_break_holder] -->\t});<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\taudio.on('timeupdate', () => {<!-- [et_pb_line_break_holder] -->\t\tlet currentTime = audio[0].currentTime,<!-- [et_pb_line_break_holder] -->\t\t\tmaxduration = audio[0].duration,<!-- [et_pb_line_break_holder] -->\t\t\tcalc = totalLength - (currentTime \/ maxduration * totalLength);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\t\tcircle.attr('stroke-dashoffset', calc);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\t\tlet value = Math.floor((currentTime \/ maxduration) * 100);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\t\tvar slider = audio.closest('.js-audio').find('.audio__slider');<!-- [et_pb_line_break_holder] -->\t\t$(slider).roundSlider('setValue', value);<!-- [et_pb_line_break_holder] -->\t});<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\taudio.on('ended', () => {<!-- [et_pb_line_break_holder] -->\t\tplayer.removeClass('playing');<!-- [et_pb_line_break_holder] -->\t\tcircle.attr('stroke-dashoffset', totalLength);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\t});<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><\/script>[\/et_pb_code][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=\u00bbrow\u00bb _builder_version=\u00bb4.16&#8243; background_size=\u00bbinitial\u00bb background_position=\u00bbtop_left\u00bb background_repeat=\u00bbrepeat\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.16&#8243; custom_padding=\u00bb|||\u00bb global_colors_info=\u00bb{}\u00bb custom_padding__hover=\u00bb|||\u00bb][et_pb_code disabled_on=\u00bbon|on|on\u00bb admin_label=\u00bbAudio\u00bb _builder_version=\u00bb4.22.2&#8243; _module_preset=\u00bbdefault\u00bb disabled=\u00bbon\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<div class=\"slide__audio js-audio\"><!-- [et_pb_line_break_holder] --><audio class=\"slide__audio-player\" controls=\"\" loop=true><!-- [et_pb_line_break_holder] --><source src=\"https:\/\/www.aloisspaeth.com\/media\/thevalleytheforestthemountainthesky.mp3\" type=\"audio\/mpeg\"\/><!-- [et_pb_line_break_holder] --><\/audio><!-- [et_pb_line_break_holder] --><\/p>\n<div class=\"audio__controls\"><!-- [et_pb_line_break_holder] -->   <svg version=\"1.1\" id=\"circle\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" viewBox=\"0 0 100 100\"><!-- [et_pb_line_break_holder] -->      <path id=\"seekbar\" fill=\"none\" stroke-meterlimit=\"10\" d=\"M50,2.9L50,2.9C76,2.9,97.1,24,97.1,50v0C97.1,76,76,97.1,50,97.1h0C24,97.1,2.9,76,2.9,50v0C2.9,24,24,2.9,50,2.9z\"\/><!-- [et_pb_line_break_holder] -->   <\/svg><!-- [et_pb_line_break_holder] -->   <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"equalizer\" viewBox=\"0 0 100 100\"><!-- [et_pb_line_break_holder] -->      <g class=\"equalizer-group\"><!-- [et_pb_line_break_holder] -->         <rect class=\"bar\"><\/rect><!-- [et_pb_line_break_holder] -->         <rect class=\"bar\"><\/rect><!-- [et_pb_line_break_holder] -->         <rect class=\"bar\"><\/rect><!-- [et_pb_line_break_holder] -->         <rect class=\"bar\"><\/rect><!-- [et_pb_line_break_holder] -->         <rect class=\"bar\"><\/rect><!-- [et_pb_line_break_holder] -->      <\/g><!-- [et_pb_line_break_holder] -->   <\/svg><!-- [et_pb_line_break_holder] -->   <\/p>\n<div class=\"audio__slider\"><\/div>\n<p><!-- [et_pb_line_break_holder] -->   <button class=\"play-pause\"><\/button><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  <\/p>\n<style><!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->html,<!-- [et_pb_line_break_holder] -->body {<!-- [et_pb_line_break_holder] -->  height: 100%;<!-- [et_pb_line_break_holder] -->  background: black;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.slide__audio {<!-- [et_pb_line_break_holder] -->  position: relative;<!-- [et_pb_line_break_holder] -->  background: black;<!-- [et_pb_line_break_holder] -->  width: 100px;<!-- [et_pb_line_break_holder] -->  top: 20%;<!-- [et_pb_line_break_holder] -->  margin: 0 auto;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.audio__controls {<!-- [et_pb_line_break_holder] -->  height: 100px;<!-- [et_pb_line_break_holder] -->  width: 100px;<!-- [et_pb_line_break_holder] -->  position: relative;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.slide__audio .slide__audio-player {<!-- [et_pb_line_break_holder] -->  display: none;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.audio__slider {<!-- [et_pb_line_break_holder] -->  position: absolute;<!-- [et_pb_line_break_holder] -->  z-index: 3;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.audio__slider::before {<!-- [et_pb_line_break_holder] -->  content: \"\";<!-- [et_pb_line_break_holder] -->  display: block;<!-- [et_pb_line_break_holder] -->  width: 100%;<!-- [et_pb_line_break_holder] -->  height: 100%;<!-- [et_pb_line_break_holder] -->  border: 5px solid rgba(255, 255, 255, 0.3);<!-- [et_pb_line_break_holder] -->  border-radius: 100%;<!-- [et_pb_line_break_holder] -->  position: absolute;<!-- [et_pb_line_break_holder] -->  margin: 0;<!-- [et_pb_line_break_holder] -->  padding: 0;<!-- [et_pb_line_break_holder] -->  box-sizing: border-box;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.audio__slider .rs-container {<!-- [et_pb_line_break_holder] -->  position: relative;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.audio__slider .rs-bar {<!-- [et_pb_line_break_holder] -->  top: 50%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.audio__slider .rs-tooltip {<!-- [et_pb_line_break_holder] -->  display: none;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-control {<!-- [et_pb_line_break_holder] -->  position: relative;<!-- [et_pb_line_break_holder] -->  outline: 0 none;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-container {<!-- [et_pb_line_break_holder] -->  position: relative;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-control *,<!-- [et_pb_line_break_holder] -->.rs-control *:before,<!-- [et_pb_line_break_holder] -->.rs-control *:after {<!-- [et_pb_line_break_holder] -->  box-sizing: border-box;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-animation .rs-transition {<!-- [et_pb_line_break_holder] -->  transition: all 0.5s linear 0s;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-bar {<!-- [et_pb_line_break_holder] -->  transform-origin: 100% 50%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-control .rs-split .rs-path,<!-- [et_pb_line_break_holder] -->.rs-control .rs-overlay1,<!-- [et_pb_line_break_holder] -->.rs-control .rs-overlay2 {<!-- [et_pb_line_break_holder] -->  transform-origin: 50% 100%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-control .rs-overlay {<!-- [et_pb_line_break_holder] -->  transform-origin: 100% 100%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-control.rs-error {<!-- [et_pb_line_break_holder] -->  border: 1px dotted;<!-- [et_pb_line_break_holder] -->  text-align: center;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-inner-container {<!-- [et_pb_line_break_holder] -->  height: 100%;<!-- [et_pb_line_break_holder] -->  width: 100%;<!-- [et_pb_line_break_holder] -->  position: relative;<!-- [et_pb_line_break_holder] -->  overflow: hidden;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-block {<!-- [et_pb_line_break_holder] -->  height: 100%;<!-- [et_pb_line_break_holder] -->  width: 100%;<!-- [et_pb_line_break_holder] -->  display: block;<!-- [et_pb_line_break_holder] -->  position: absolute;<!-- [et_pb_line_break_holder] -->  top: 0;<!-- [et_pb_line_break_holder] -->  overflow: hidden;<!-- [et_pb_line_break_holder] -->  z-index: 3;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-block .rs-inner {<!-- [et_pb_line_break_holder] -->  border-radius: 1000px;<!-- [et_pb_line_break_holder] -->  display: block;<!-- [et_pb_line_break_holder] -->  height: 100%;<!-- [et_pb_line_break_holder] -->  width: 100%;<!-- [et_pb_line_break_holder] -->  position: relative;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-bar {<!-- [et_pb_line_break_holder] -->  position: absolute;<!-- [et_pb_line_break_holder] -->  height: 0;<!-- [et_pb_line_break_holder] -->  z-index: 10;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-bar .rs-seperator {<!-- [et_pb_line_break_holder] -->  height: 0;<!-- [et_pb_line_break_holder] -->  border-bottom: medium none;<!-- [et_pb_line_break_holder] -->  display: block;<!-- [et_pb_line_break_holder] -->  float: left;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.full .rs-bar,<!-- [et_pb_line_break_holder] -->.half .rs-bar {<!-- [et_pb_line_break_holder] -->  width: 50%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.full .rs-bar,<!-- [et_pb_line_break_holder] -->.half.left .rs-bar,<!-- [et_pb_line_break_holder] -->.half.right .rs-bar {<!-- [et_pb_line_break_holder] -->  top: 50%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.bottom .rs-bar {<!-- [et_pb_line_break_holder] -->  top: 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.half.right .rs-bar,<!-- [et_pb_line_break_holder] -->.quarter.right .rs-bar {<!-- [et_pb_line_break_holder] -->  right: 100%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-handle.rs-move {<!-- [et_pb_line_break_holder] -->  cursor: move;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-readonly .rs-handle.rs-move {<!-- [et_pb_line_break_holder] -->  cursor: default;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-path {<!-- [et_pb_line_break_holder] -->  display: block;<!-- [et_pb_line_break_holder] -->  height: 100%;<!-- [et_pb_line_break_holder] -->  width: 100%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-split .rs-path {<!-- [et_pb_line_break_holder] -->  border-radius: 1000px 1000px 0 0;<!-- [et_pb_line_break_holder] -->  overflow: hidden;<!-- [et_pb_line_break_holder] -->  height: 50%;<!-- [et_pb_line_break_holder] -->  position: absolute;<!-- [et_pb_line_break_holder] -->  top: 0;<!-- [et_pb_line_break_holder] -->  z-index: 2;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-tooltip {<!-- [et_pb_line_break_holder] -->  text-align: center;<!-- [et_pb_line_break_holder] -->  position: absolute;<!-- [et_pb_line_break_holder] -->  cursor: default;<!-- [et_pb_line_break_holder] -->  border: 1px solid transparent;<!-- [et_pb_line_break_holder] -->  z-index: 10;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-handle {<!-- [et_pb_line_break_holder] -->  border-radius: 1000px;<!-- [et_pb_line_break_holder] -->  outline: 0 none;<!-- [et_pb_line_break_holder] -->  float: left;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-handle.rs-handle-square {<!-- [et_pb_line_break_holder] -->  border-radius: 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.paused .rs-handle,<!-- [et_pb_line_break_holder] -->.playing .rs-handle,<!-- [et_pb_line_break_holder] -->.active .rs-handle {<!-- [et_pb_line_break_holder] -->  background-color: #0c2;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.rs-handle {<!-- [et_pb_line_break_holder] -->  background-color: #838383;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.slide__audio #circle {<!-- [et_pb_line_break_holder] -->  position: absolute;<!-- [et_pb_line_break_holder] -->  top: 50px;<!-- [et_pb_line_break_holder] -->  left: 50px;<!-- [et_pb_line_break_holder] -->  bottom: 0;<!-- [et_pb_line_break_holder] -->  stroke: #0c2;<!-- [et_pb_line_break_holder] -->  width: 100px;<!-- [et_pb_line_break_holder] -->  height: 100px;<!-- [et_pb_line_break_holder] -->  border-radius: 100%;<!-- [et_pb_line_break_holder] -->  transform: translate(-50%, -50%);<!-- [et_pb_line_break_holder] -->  pointer-events: none;<!-- [et_pb_line_break_holder] -->  z-index: 4;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.play-pause {<!-- [et_pb_line_break_holder] -->  position: absolute;<!-- [et_pb_line_break_holder] -->  left: 50px;<!-- [et_pb_line_break_holder] -->  top: 50px;<!-- [et_pb_line_break_holder] -->  z-index: 3;<!-- [et_pb_line_break_holder] -->  width: 50px;<!-- [et_pb_line_break_holder] -->  background: transparent !important;<!-- [et_pb_line_break_holder] -->  height: 50px;<!-- [et_pb_line_break_holder] -->  cursor: pointer;<!-- [et_pb_line_break_holder] -->  transform: translate(-50%, -50%);<!-- [et_pb_line_break_holder] -->  border: 0;<!-- [et_pb_line_break_holder] -->  padding: 0;<!-- [et_pb_line_break_holder] -->  margin: 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.play-pause:focus {<!-- [et_pb_line_break_holder] -->  outline: none;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.play-pause::after {<!-- [et_pb_line_break_holder] -->  content: \"\";<!-- [et_pb_line_break_holder] -->  position: absolute;<!-- [et_pb_line_break_holder] -->  top: 0;<!-- [et_pb_line_break_holder] -->  left: 0;<!-- [et_pb_line_break_holder] -->  width: 100%;<!-- [et_pb_line_break_holder] -->  height: 100%;<!-- [et_pb_line_break_holder] -->  background-image: url(\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAZdJREFUeNrs29FNQjEYBlAgDuAIuAFugBvgBrABTiBOgE4AGzgCbCAbwAayAbZJb0KMT77wt\/ecpO\/39qP9CqGDAQAAAAAAAAAAAAAA8A+Xy2WWxr2ZiBPILo1jGlOzESeQzmcaY7MSJ5DsO42lmYkTSOcrjYkZihNIZ630YwVyKaU\/M1txAunsWir9UQPvkI\/GuVtWPsoxVsjv0p9aIXHkE9iu5tIfNbrI8neWXPpzgcSRV8imttJvOZDr0j\/WUvp9CKTzWsMPln0KJBuX0t9ELf2+BdKZl21sKZBYpb8upT8RSMBv+hG2MYFclX4JZioQBPKHtzQeh8Ph\/pYPcSeHQQ7gJQVxsEJu61yCeIoSRp9XyLaEcY72YH0L5JTG4tY9YcsqpZ2CeIgcRl9WyL6sipNj7+1Le1FK+1TLQ7cayHsaeXva1vbgrW1Zh3J62tf6Aq0EkrenjxTEqvYXaSGQqkq75Q7JATzXVtpV8mfregJxHSFIIC7sBArElbYggbj0GSgQ16IBAAAAAAAAAAAAACCsHwEGACfr+SLf7BaJAAAAAElFTkSuQmCC\");<!-- [et_pb_line_break_holder] -->  background-size: 150%;<!-- [et_pb_line_break_holder] -->  background-position: 50% 50%;<!-- [et_pb_line_break_holder] -->  background-repeat: no-repeat;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->#seekbar {<!-- [et_pb_line_break_holder] -->  stroke-width: 6;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.playing #seekbar {<!-- [et_pb_line_break_holder] -->  visibility: visible;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.playing .play-pause::after {<!-- [et_pb_line_break_holder] -->  content: none;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.playing .play-pause::before {<!-- [et_pb_line_break_holder] -->  opacity: 1;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.equalizer {<!-- [et_pb_line_break_holder] -->  height: 100px;<!-- [et_pb_line_break_holder] -->  width: 50px;<!-- [et_pb_line_break_holder] -->  transform: rotate(180deg);<!-- [et_pb_line_break_holder] -->  left: 25px;<!-- [et_pb_line_break_holder] -->  top: 10px;<!-- [et_pb_line_break_holder] -->  position: absolute;<!-- [et_pb_line_break_holder] -->  transform-origin: center;<!-- [et_pb_line_break_holder] -->  opacity: 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.playing .equalizer {<!-- [et_pb_line_break_holder] -->  opacity: 1;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.equalizer-group {<!-- [et_pb_line_break_holder] -->  width: 100%;<!-- [et_pb_line_break_holder] -->  height: 100%;<!-- [et_pb_line_break_holder] -->  display: block;<!-- [et_pb_line_break_holder] -->  transform-origin: center;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.bar {<!-- [et_pb_line_break_holder] -->  fill: #0c2;<!-- [et_pb_line_break_holder] -->  width: 5px;<!-- [et_pb_line_break_holder] -->  -webkit-animation: equalize 1.25s steps(25, end) 0s infinite;<!-- [et_pb_line_break_holder] -->          animation: equalize 1.25s steps(25, end) 0s infinite;<!-- [et_pb_line_break_holder] -->  transform-origin: center;<!-- [et_pb_line_break_holder] -->  position: relative;<!-- [et_pb_line_break_holder] -->  margin-top: -50px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.bar:nth-child(1) {<!-- [et_pb_line_break_holder] -->  -webkit-animation-duration: 1.9s;<!-- [et_pb_line_break_holder] -->          animation-duration: 1.9s;<!-- [et_pb_line_break_holder] -->  transform: translate(5px, 50%);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.bar:nth-child(2) {<!-- [et_pb_line_break_holder] -->  -webkit-animation-duration: 2s;<!-- [et_pb_line_break_holder] -->          animation-duration: 2s;<!-- [et_pb_line_break_holder] -->  transform: translate(25%, 50%);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.bar:nth-child(3) {<!-- [et_pb_line_break_holder] -->  -webkit-animation-duration: 2.3s;<!-- [et_pb_line_break_holder] -->          animation-duration: 2.3s;<!-- [et_pb_line_break_holder] -->  transform: translate(50%, 50%);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.bar:nth-child(4) {<!-- [et_pb_line_break_holder] -->  -webkit-animation-duration: 2.4s;<!-- [et_pb_line_break_holder] -->          animation-duration: 2.4s;<!-- [et_pb_line_break_holder] -->  transform: translate(75%, 50%);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.bar:nth-child(5) {<!-- [et_pb_line_break_holder] -->  -webkit-animation-duration: 2.1s;<!-- [et_pb_line_break_holder] -->          animation-duration: 2.1s;<!-- [et_pb_line_break_holder] -->  transform: translate(95%, 50%);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->@-webkit-keyframes equalize {<!-- [et_pb_line_break_holder] -->  0% {<!-- [et_pb_line_break_holder] -->    height: 10px;<!-- [et_pb_line_break_holder] -->    margin-top: -10px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  4% {<!-- [et_pb_line_break_holder] -->    height: 5px;<!-- [et_pb_line_break_holder] -->    margin-top: -5px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  8% {<!-- [et_pb_line_break_holder] -->    height: 40px;<!-- [et_pb_line_break_holder] -->    margin-top: -40px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  12% {<!-- [et_pb_line_break_holder] -->    height: 30px;<!-- [et_pb_line_break_holder] -->    margin-top: -30px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  16% {<!-- [et_pb_line_break_holder] -->    height: 20px;<!-- [et_pb_line_break_holder] -->    margin-top: -20px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  20% {<!-- [et_pb_line_break_holder] -->    height: 30px;<!-- [et_pb_line_break_holder] -->    margin-top: -30px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  24% {<!-- [et_pb_line_break_holder] -->    height: 40px;<!-- [et_pb_line_break_holder] -->    margin-top: -40px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  28% {<!-- [et_pb_line_break_holder] -->    height: 10px;<!-- [et_pb_line_break_holder] -->    margin-top: -10px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  32% {<!-- [et_pb_line_break_holder] -->    height: 40px;<!-- [et_pb_line_break_holder] -->    margin-top: -40px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  36% {<!-- [et_pb_line_break_holder] -->    height: 10px;<!-- [et_pb_line_break_holder] -->    margin-top: -10px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  40% {<!-- [et_pb_line_break_holder] -->    height: 20px;<!-- [et_pb_line_break_holder] -->    margin-top: -20px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  44% {<!-- [et_pb_line_break_holder] -->    height: 40px;<!-- [et_pb_line_break_holder] -->    margin-top: -40px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  48% {<!-- [et_pb_line_break_holder] -->    height: 15px;<!-- [et_pb_line_break_holder] -->    margin-top: -15px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  52% {<!-- [et_pb_line_break_holder] -->    height: 30px;<!-- [et_pb_line_break_holder] -->    margin-top: -30px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  56% {<!-- [et_pb_line_break_holder] -->    height: 10px;<!-- [et_pb_line_break_holder] -->    margin-top: -10px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  60% {<!-- [et_pb_line_break_holder] -->    height: 30px;<!-- [et_pb_line_break_holder] -->    margin-top: -30px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  64% {<!-- [et_pb_line_break_holder] -->    height: 35px;<!-- [et_pb_line_break_holder] -->    margin-top: -35px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  68% {<!-- [et_pb_line_break_holder] -->    height: 15px;<!-- [et_pb_line_break_holder] -->    margin-top: -15px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  72% {<!-- [et_pb_line_break_holder] -->    height: 5px;<!-- [et_pb_line_break_holder] -->    margin-top: -5px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  76% {<!-- [et_pb_line_break_holder] -->    height: 45px;<!-- [et_pb_line_break_holder] -->    margin-top: -45px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  80% {<!-- [et_pb_line_break_holder] -->    height: 25px;<!-- [et_pb_line_break_holder] -->    margin-top: -25px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  84% {<!-- [et_pb_line_break_holder] -->    height: 5px;<!-- [et_pb_line_break_holder] -->    margin-top: -5px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  88% {<!-- [et_pb_line_break_holder] -->    height: 50px;<!-- [et_pb_line_break_holder] -->    margin-top: -50px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  92% {<!-- [et_pb_line_break_holder] -->    height: 30px;<!-- [et_pb_line_break_holder] -->    margin-top: -30px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  96% {<!-- [et_pb_line_break_holder] -->    height: 50px;<!-- [et_pb_line_break_holder] -->    margin-top: -50px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  100% {<!-- [et_pb_line_break_holder] -->    height: 25px;<!-- [et_pb_line_break_holder] -->    margin-top: -25px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->@keyframes equalize {<!-- [et_pb_line_break_holder] -->  0% {<!-- [et_pb_line_break_holder] -->    height: 10px;<!-- [et_pb_line_break_holder] -->    margin-top: -10px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  4% {<!-- [et_pb_line_break_holder] -->    height: 5px;<!-- [et_pb_line_break_holder] -->    margin-top: -5px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  8% {<!-- [et_pb_line_break_holder] -->    height: 40px;<!-- [et_pb_line_break_holder] -->    margin-top: -40px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  12% {<!-- [et_pb_line_break_holder] -->    height: 30px;<!-- [et_pb_line_break_holder] -->    margin-top: -30px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  16% {<!-- [et_pb_line_break_holder] -->    height: 20px;<!-- [et_pb_line_break_holder] -->    margin-top: -20px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  20% {<!-- [et_pb_line_break_holder] -->    height: 30px;<!-- [et_pb_line_break_holder] -->    margin-top: -30px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  24% {<!-- [et_pb_line_break_holder] -->    height: 40px;<!-- [et_pb_line_break_holder] -->    margin-top: -40px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  28% {<!-- [et_pb_line_break_holder] -->    height: 10px;<!-- [et_pb_line_break_holder] -->    margin-top: -10px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  32% {<!-- [et_pb_line_break_holder] -->    height: 40px;<!-- [et_pb_line_break_holder] -->    margin-top: -40px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  36% {<!-- [et_pb_line_break_holder] -->    height: 10px;<!-- [et_pb_line_break_holder] -->    margin-top: -10px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  40% {<!-- [et_pb_line_break_holder] -->    height: 20px;<!-- [et_pb_line_break_holder] -->    margin-top: -20px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  44% {<!-- [et_pb_line_break_holder] -->    height: 40px;<!-- [et_pb_line_break_holder] -->    margin-top: -40px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  48% {<!-- [et_pb_line_break_holder] -->    height: 15px;<!-- [et_pb_line_break_holder] -->    margin-top: -15px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  52% {<!-- [et_pb_line_break_holder] -->    height: 30px;<!-- [et_pb_line_break_holder] -->    margin-top: -30px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  56% {<!-- [et_pb_line_break_holder] -->    height: 10px;<!-- [et_pb_line_break_holder] -->    margin-top: -10px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  60% {<!-- [et_pb_line_break_holder] -->    height: 30px;<!-- [et_pb_line_break_holder] -->    margin-top: -30px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  64% {<!-- [et_pb_line_break_holder] -->    height: 35px;<!-- [et_pb_line_break_holder] -->    margin-top: -35px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  68% {<!-- [et_pb_line_break_holder] -->    height: 15px;<!-- [et_pb_line_break_holder] -->    margin-top: -15px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  72% {<!-- [et_pb_line_break_holder] -->    height: 5px;<!-- [et_pb_line_break_holder] -->    margin-top: -5px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  76% {<!-- [et_pb_line_break_holder] -->    height: 45px;<!-- [et_pb_line_break_holder] -->    margin-top: -45px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  80% {<!-- [et_pb_line_break_holder] -->    height: 25px;<!-- [et_pb_line_break_holder] -->    margin-top: -25px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  84% {<!-- [et_pb_line_break_holder] -->    height: 5px;<!-- [et_pb_line_break_holder] -->    margin-top: -5px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  88% {<!-- [et_pb_line_break_holder] -->    height: 50px;<!-- [et_pb_line_break_holder] -->    margin-top: -50px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  92% {<!-- [et_pb_line_break_holder] -->    height: 30px;<!-- [et_pb_line_break_holder] -->    margin-top: -30px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  96% {<!-- [et_pb_line_break_holder] -->    height: 50px;<!-- [et_pb_line_break_holder] -->    margin-top: -50px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  100% {<!-- [et_pb_line_break_holder] -->    height: 25px;<!-- [et_pb_line_break_holder] -->    margin-top: -25px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  <\/style>\n<p><!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.3.1\/jquery.js\"><\/script><!-- [et_pb_line_break_holder] -->  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/roundSlider\/1.3\/roundslider.js\"><\/script><!-- [et_pb_line_break_holder] -->  <script><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->$('.js-audio').each(function (index, el) {<!-- [et_pb_line_break_holder] -->  initAudioPlayer($(this), index);<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->$('.audio__slider').roundSlider({<!-- [et_pb_line_break_holder] -->  radius: 50,<!-- [et_pb_line_break_holder] -->  value: 0,<!-- [et_pb_line_break_holder] -->  startAngle: 90,<!-- [et_pb_line_break_holder] -->  width: 5,<!-- [et_pb_line_break_holder] -->  handleSize: '+6',<!-- [et_pb_line_break_holder] -->  handleShape: 'round',<!-- [et_pb_line_break_holder] -->  sliderType: 'min-range' });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->$('.audio__slider').on('drag, change', function (e) {<!-- [et_pb_line_break_holder] -->  let $this = $(this);<!-- [et_pb_line_break_holder] -->  let $elem = $this.closest('.js-audio');<!-- [et_pb_line_break_holder] -->  updateAudio(e, $elem);<!-- [et_pb_line_break_holder] -->  $this.addClass('active');<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->function updateAudio(e, $elem) {<!-- [et_pb_line_break_holder] -->  console.log(e.handle.value);<!-- [et_pb_line_break_holder] -->  let value = e.handle.value;<!-- [et_pb_line_break_holder] -->  \/\/ var thisPlayer = el.find('.js-audio'),<!-- [et_pb_line_break_holder] -->  var play = $elem.find('.play-pause'),<!-- [et_pb_line_break_holder] -->  circle = $elem.find('#seekbar'),<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  getCircle = circle.get(0),<!-- [et_pb_line_break_holder] -->  totalLength = getCircle.getTotalLength(),<!-- [et_pb_line_break_holder] -->  \/\/currentTime = $elem.find('audio')[0].currentTime,<!-- [et_pb_line_break_holder] -->  maxduration = $elem.find('audio')[0].duration;<!-- [et_pb_line_break_holder] -->  var y = value * maxduration \/ 100;<!-- [et_pb_line_break_holder] -->  $elem.find('audio')[0].currentTime = y;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->function initAudioPlayer(player) {<!-- [et_pb_line_break_holder] -->  let audio = player.find('audio'),<!-- [et_pb_line_break_holder] -->  play = player.find('.play-pause'),<!-- [et_pb_line_break_holder] -->  circle = player.find('#seekbar'),<!-- [et_pb_line_break_holder] -->  getCircle = circle.get(0),<!-- [et_pb_line_break_holder] -->  totalLength = getCircle.getTotalLength();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  circle.attr({<!-- [et_pb_line_break_holder] -->    'stroke-dasharray': totalLength,<!-- [et_pb_line_break_holder] -->    'stroke-dashoffset': totalLength });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  play.on('click', () => {<!-- [et_pb_line_break_holder] -->    if (audio[0].paused) {<!-- [et_pb_line_break_holder] -->      $('audio').each((index, el) => {<!-- [et_pb_line_break_holder] -->        $('audio')[index].pause();<!-- [et_pb_line_break_holder] -->      });<!-- [et_pb_line_break_holder] -->      $('.js-audio').removeClass('playing');<!-- [et_pb_line_break_holder] -->      audio[0].play();<!-- [et_pb_line_break_holder] -->      player.removeClass('paused');<!-- [et_pb_line_break_holder] -->      player.addClass('playing');<!-- [et_pb_line_break_holder] -->    } else {<!-- [et_pb_line_break_holder] -->      audio[0].pause();<!-- [et_pb_line_break_holder] -->      player.removeClass('playing');<!-- [et_pb_line_break_holder] -->      player.addClass('paused');<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->  });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  audio.on('timeupdate', () => {<!-- [et_pb_line_break_holder] -->    let currentTime = audio[0].currentTime,<!-- [et_pb_line_break_holder] -->    maxduration = audio[0].duration,<!-- [et_pb_line_break_holder] -->    calc = totalLength - currentTime \/ maxduration * totalLength;<!-- [et_pb_line_break_holder] -->    console.log(currentTime);<!-- [et_pb_line_break_holder] -->    circle.attr('stroke-dashoffset', calc);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    let value = Math.floor(currentTime \/ maxduration * 100);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    var slider = audio.closest('.js-audio').find('.audio__slider');<!-- [et_pb_line_break_holder] -->    $(slider).roundSlider('setValue', value);<!-- [et_pb_line_break_holder] -->  });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  audio.on('ended', () => {<!-- [et_pb_line_break_holder] -->    player.removeClass('playing');<!-- [et_pb_line_break_holder] -->    circle.attr('stroke-dashoffset', totalLength);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  });<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->\/\/# sourceURL=pen.js<!-- [et_pb_line_break_holder] -->    <!-- [et_pb_line_break_holder] -->  <\/script>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=\u00bb1&#8243; _builder_version=\u00bb4.22.2&#8243; _module_preset=\u00bbdefault\u00bb background_color=\u00bb#250084&#8243; custom_css_main_element=\u00bb    z-index: 9999;||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_row admin_label=\u00bbrow\u00bb _builder_version=\u00bb4.16&#8243; background_size=\u00bbinitial\u00bb background_position=\u00bbtop_left\u00bb background_repeat=\u00bbrepeat\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.16&#8243; custom_padding=\u00bb|||\u00bb global_colors_info=\u00bb{}\u00bb custom_padding__hover=\u00bb|||\u00bb][et_pb_code disabled_on=\u00bbon|on|on\u00bb admin_label=\u00bbbarras\u00bb _builder_version=\u00bb4.22.2&#8243; _module_preset=\u00bbdefault\u00bb disabled=\u00bbon\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<div class=\"music-player__wrapper\"><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"music-player\" id=\"music-container\"><!-- [et_pb_line_break_holder] -->    <audio id=\"audio-player\" autoplay loop><!-- [et_pb_line_break_holder] --><source src=\"https:\/\/quincepartyestudio.com\/wp-content\/uploads\/2023\/09\/happy-days-underscore-163730.mp3\" type=\"audio\/mpeg\"><!-- [et_pb_line_break_holder] -->      <pee class=\"sr-only\">Your browser does not support the audio element.<\/pee><!-- [et_pb_line_break_holder] --><\/audio><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"music-player__bar music-player__bar1\"><\/div>\n<p><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"music-player__bar music-player__bar2\"><\/div>\n<p><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"music-player__bar music-player__bar3\"><\/div>\n<p><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"music-player__bar music-player__bar4\"><\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    <button onclick=\"playMusic()\" class=\"music-player__button music-player__play\"><!-- [et_pb_line_break_holder] -->      <span class=\"sr-only\">Play<\/span><!-- [et_pb_line_break_holder] -->    <\/button><!-- [et_pb_line_break_holder] -->    <button onclick=\"pauseMusic()\" class=\"music-player__button music-player__pause\"><!-- [et_pb_line_break_holder] -->      <span class=\"sr-only\">Pause<\/span><!-- [et_pb_line_break_holder] -->    <\/button><!-- [et_pb_line_break_holder] -->  <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.2.1\/jquery.js\"><\/script><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/p>\n<style><!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  .music-player__wrapper{<!-- [et_pb_line_break_holder] -->    z-index: 9999;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.music-player {<!-- [et_pb_line_break_holder] -->  width: 75px;<!-- [et_pb_line_break_holder] -->  height: 50px;<!-- [et_pb_line_break_holder] -->  position: relative;<!-- [et_pb_line_break_holder] -->  opacity: 1;<!-- [et_pb_line_break_holder] -->  transition: opacity 200ms;<!-- [et_pb_line_break_holder] -->  background-color: red;<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.music-player.music-player--disabled {<!-- [et_pb_line_break_holder] -->  opacity: 0.26;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.music-player__wrapper {<!-- [et_pb_line_break_holder] -->  position: fixed;<!-- [et_pb_line_break_holder] -->  right: 2rem;<!-- [et_pb_line_break_holder] -->  bottom: 1.5rem;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.music-player__button {<!-- [et_pb_line_break_holder] -->  position: absolute;<!-- [et_pb_line_break_holder] -->  top: 0;<!-- [et_pb_line_break_holder] -->  left: 0;<!-- [et_pb_line_break_holder] -->  right: 0;<!-- [et_pb_line_break_holder] -->  bottom: 0;<!-- [et_pb_line_break_holder] -->  background: transparent;<!-- [et_pb_line_break_holder] -->  width: 100%;<!-- [et_pb_line_break_holder] -->  border: 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.music-player__play {<!-- [et_pb_line_break_holder] -->  background: transparent;<!-- [et_pb_line_break_holder] -->  display: none;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.music-player--disabled .music-player__play {<!-- [et_pb_line_break_holder] -->  display: block;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.music-player--disabled .music-player__pause {<!-- [et_pb_line_break_holder] -->  display: none;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.music-player__bar {<!-- [et_pb_line_break_holder] -->  background: #fff;<!-- [et_pb_line_break_holder] -->  width: 10px;<!-- [et_pb_line_break_holder] -->  height: 100%;<!-- [et_pb_line_break_holder] -->  position: absolute;<!-- [et_pb_line_break_holder] -->  bottom: 0;<!-- [et_pb_line_break_holder] -->  animation-name: music-bar-anim;<!-- [et_pb_line_break_holder] -->  animation-iteration-count: infinite;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.music-player--disabled .music-player__bar {<!-- [et_pb_line_break_holder] -->  animation-play-state: paused;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.music-player__bar1 {<!-- [et_pb_line_break_holder] -->  animation-duration: 1.3s;<!-- [et_pb_line_break_holder] -->  left: 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.music-player__bar2 {<!-- [et_pb_line_break_holder] -->  animation-duration: 1.8s;<!-- [et_pb_line_break_holder] -->  left: 15px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.music-player__bar3 {<!-- [et_pb_line_break_holder] -->  animation-duration: 2.2s;<!-- [et_pb_line_break_holder] -->  left: 30px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.music-player__bar4 {<!-- [et_pb_line_break_holder] -->  animation-duration: 2s;<!-- [et_pb_line_break_holder] -->  left: 45px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.music-player__bar5 {<!-- [et_pb_line_break_holder] -->  animation-duration: 1.5s;<!-- [et_pb_line_break_holder] -->  left: 75px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->@keyframes music-bar-anim {<!-- [et_pb_line_break_holder] -->  0% {<!-- [et_pb_line_break_holder] -->    height: 10px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  50% {<!-- [et_pb_line_break_holder] -->    height: 50px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  100% {<!-- [et_pb_line_break_holder] -->    height: 10px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.sr-only {<!-- [et_pb_line_break_holder] -->  clip: rect(1px, 1px, 1px, 1px);<!-- [et_pb_line_break_holder] -->  height: 1px;<!-- [et_pb_line_break_holder] -->  overflow: hidden;<!-- [et_pb_line_break_holder] -->  position: absolute !important;<!-- [et_pb_line_break_holder] -->  width: 1px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/style>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script id=\"rendered-js\"><!-- [et_pb_line_break_holder] -->function pauseMusic(){<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  var audioPlayer = document.getElementById('audio-player');<!-- [et_pb_line_break_holder] -->  var audioContainer = $('#music-container');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  audioPlayer.pause();<!-- [et_pb_line_break_holder] -->  audioContainer.addClass(\"music-player--disabled\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  console.log(\"pause music\");<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->function playMusic(){<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  var audioPlayer = document.getElementById('audio-player');<!-- [et_pb_line_break_holder] -->  var audioContainer = $('#music-container');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  audioPlayer.play();<!-- [et_pb_line_break_holder] -->  audioContainer.removeClass(\"music-player--disabled\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  console.log(\"play music\");<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=\u00bb1&#8243; _builder_version=\u00bb4.22.2&#8243; _module_preset=\u00bbdefault\u00bb background_color=\u00bb#250084&#8243; custom_css_main_element=\u00bb    z-index: 9999;||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_row admin_label=\u00bbrow\u00bb _builder_version=\u00bb4.16&#8243; background_size=\u00bbinitial\u00bb background_position=\u00bbtop_left\u00bb background_repeat=\u00bbrepeat\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.16&#8243; custom_padding=\u00bb|||\u00bb global_colors_info=\u00bb{}\u00bb custom_padding__hover=\u00bb|||\u00bb][et_pb_code disabled_on=\u00bbon|on|on\u00bb admin_label=\u00bbdisco ukelele\u00bb _builder_version=\u00bb4.22.2&#8243; _module_preset=\u00bbdefault\u00bb disabled=\u00bbon\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<div class=\"player\"><!-- [et_pb_line_break_holder] -->  <audio class=\"player__audio viewer\"><!-- [et_pb_line_break_holder] --><source src=\"https:\/\/www.bensound.com\/bensound-music\/bensound-ukulele.mp3\" type=\"audio\/mpeg\" data-trackid=\"1\"><!-- [et_pb_line_break_holder] -->    Your browser does not support the audio element.<!-- [et_pb_line_break_holder] --><\/audio><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"song-panel\"><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"song-info\"><!-- [et_pb_line_break_holder] -->      <\/p>\n<div class=\"song-info__title\">Ukulele<\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<div class=\"song-info__artist\">Bensound<\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<div class=\"progress\"><!-- [et_pb_line_break_holder] -->        <\/p>\n<div class=\"progress__filled\"><\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/div>\n<p><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] -->  <\/div>\n<p><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"player-controls\"><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"spinner\"><!-- [et_pb_line_break_holder] -->      <\/p>\n<div class=\"spinner__disc\" style=\"background-image: url(https:\/\/www.bensound.com\/bensound-img\/ukulele.jpg)\"><!-- [et_pb_line_break_holder] -->        <\/p>\n<div class=\"center__disc\"><\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/div>\n<p><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] -->    <button class=\"backward\"><i class=\"fas fa-backward fa-2x\"><\/i><\/button><!-- [et_pb_line_break_holder] -->    <button class=\"play\"><!-- [et_pb_line_break_holder] -->      <i class=\"fas fa-play fa-3x\"><\/i><!-- [et_pb_line_break_holder] -->      <span class=\"pause left\"><\/span><!-- [et_pb_line_break_holder] -->      <span class=\"pause right\"><\/span><!-- [et_pb_line_break_holder] -->    <\/button><!-- [et_pb_line_break_holder] -->    <button class=\"forward\"><i class=\"fas fa-forward fa-2x\"><\/i><\/button><!-- [et_pb_line_break_holder] -->  <\/div>\n<p><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/p>\n<style><!-- [et_pb_line_break_holder] -->@import url('https:\/\/fonts.googleapis.com\/css?family=Roboto');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->* {<!-- [et_pb_line_break_holder] -->  box-sizing: border-box;<!-- [et_pb_line_break_holder] -->  font-family: 'Roboto', sans-serif;<!-- [et_pb_line_break_holder] -->  outline: none;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->body {<!-- [et_pb_line_break_holder] -->  font-size: 62.5%;<!-- [et_pb_line_break_holder] -->  background-color: #FCF1F5;<!-- [et_pb_line_break_holder] -->  height: 100vh;<!-- [et_pb_line_break_holder] -->  width: 100vw;<!-- [et_pb_line_break_holder] -->  margin: 0;<!-- [et_pb_line_break_holder] -->  padding: 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.player {<!-- [et_pb_line_break_holder] -->  display: flex;<!-- [et_pb_line_break_holder] -->  align-items: center;<!-- [et_pb_line_break_holder] -->  justify-content: center;<!-- [et_pb_line_break_holder] -->  flex-direction: column;<!-- [et_pb_line_break_holder] -->  height: 100%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.player-controls {<!-- [et_pb_line_break_holder] -->  background-color: #fff;<!-- [et_pb_line_break_holder] -->  border-radius: 15px;<!-- [et_pb_line_break_holder] -->  width: 425px;<!-- [et_pb_line_break_holder] -->  display: flex;<!-- [et_pb_line_break_holder] -->  justify-content: flex-end;<!-- [et_pb_line_break_holder] -->  padding: 10px;<!-- [et_pb_line_break_holder] -->  box-shadow: 0px 33px 90px 11px rgba(147,84,103,.6);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->* {<!-- [et_pb_line_break_holder] -->  box-sizing: border-box;  <!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.song-panel {<!-- [et_pb_line_break_holder] -->  background-color: #FCF8FA;<!-- [et_pb_line_break_holder] -->  border-radius: 15px 15px 0 0;<!-- [et_pb_line_break_holder] -->  display: flex;<!-- [et_pb_line_break_holder] -->  height: 75px;<!-- [et_pb_line_break_holder] -->  justify-content: flex-end;<!-- [et_pb_line_break_holder] -->  padding: 0 12px 12px 12px;<!-- [et_pb_line_break_holder] -->  transform: translate3d(0, 100%, 0);<!-- [et_pb_line_break_holder] -->  transition: all 1s ease;<!-- [et_pb_line_break_holder] -->  width: 395px;<!-- [et_pb_line_break_holder] -->  z-index: 0;<!-- [et_pb_line_break_holder] -->  box-shadow: 0px 33px 90px 11px rgba(147,84,103,.6);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  .song-info {<!-- [et_pb_line_break_holder] -->    display: flex;<!-- [et_pb_line_break_holder] -->    flex-direction: column;<!-- [et_pb_line_break_holder] -->    justify-content: flex-end;<!-- [et_pb_line_break_holder] -->    width: 230px;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    .song-info__title {<!-- [et_pb_line_break_holder] -->      color: #444b59;<!-- [et_pb_line_break_holder] -->      font-size: 0.8rem;<!-- [et_pb_line_break_holder] -->      font-weight: bold;<!-- [et_pb_line_break_holder] -->      margin-bottom: 5px;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    .song-info__artist {<!-- [et_pb_line_break_holder] -->      color: #a5a7af;<!-- [et_pb_line_break_holder] -->      font-size: 0.7rem;<!-- [et_pb_line_break_holder] -->      margin-bottom: 10px;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    .progress {<!-- [et_pb_line_break_holder] -->      background: #fff;<!-- [et_pb_line_break_holder] -->      border-radius: 3px;<!-- [et_pb_line_break_holder] -->      cursor: ew-resize;<!-- [et_pb_line_break_holder] -->      display: flex;<!-- [et_pb_line_break_holder] -->      flex: 10;<!-- [et_pb_line_break_holder] -->      flex-basis: 100%;<!-- [et_pb_line_break_holder] -->      max-height: 5px;<!-- [et_pb_line_break_holder] -->      position: relative;<!-- [et_pb_line_break_holder] -->      transition: height 0.3s;<!-- [et_pb_line_break_holder] -->      width: 100%;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      .progress__filled {<!-- [et_pb_line_break_holder] -->        background: #fc8da8;<!-- [et_pb_line_break_holder] -->        flex: 0;<!-- [et_pb_line_break_holder] -->        flex-basis: 0%;<!-- [et_pb_line_break_holder] -->        width: 50%;<!-- [et_pb_line_break_holder] -->      }<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  &.playing {<!-- [et_pb_line_break_holder] -->    transform: translate3d(0, 0, 0);<!-- [et_pb_line_break_holder] -->    transition: all 1s ease;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->button {<!-- [et_pb_line_break_holder] -->  height: 80px;<!-- [et_pb_line_break_holder] -->  width: 80px;<!-- [et_pb_line_break_holder] -->  cursor: pointer;<!-- [et_pb_line_break_holder] -->  border: none;<!-- [et_pb_line_break_holder] -->  background-color: transparent;<!-- [et_pb_line_break_holder] -->  color: #DFDBE0;<!-- [et_pb_line_break_holder] -->  margin: 0 5px;<!-- [et_pb_line_break_holder] -->  border-radius: 15px;<!-- [et_pb_line_break_holder] -->  position: relative;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->button:hover, button.playing {<!-- [et_pb_line_break_holder] -->  background-color: #E0DEE1;<!-- [et_pb_line_break_holder] -->  color: #fff;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->button.play span.pause {<!-- [et_pb_line_break_holder] -->  background-color: white;<!-- [et_pb_line_break_holder] -->  position: absolute;<!-- [et_pb_line_break_holder] -->  top: 23px;<!-- [et_pb_line_break_holder] -->  height: 34px;<!-- [et_pb_line_break_holder] -->  width: 10px;<!-- [et_pb_line_break_holder] -->  display: block;<!-- [et_pb_line_break_holder] -->  border-radius: 3px;<!-- [et_pb_line_break_holder] -->  opacity: 0;<!-- [et_pb_line_break_holder] -->  transition: all .5s ease;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->button.play span.pause.left {<!-- [et_pb_line_break_holder] -->  left: 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->button.play.playing span.pause.left {<!-- [et_pb_line_break_holder] -->  left: 25px;<!-- [et_pb_line_break_holder] -->  opacity: 1;<!-- [et_pb_line_break_holder] -->  transition: left .5s ease, opacity .8s ease;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->button.play span.pause.right {<!-- [et_pb_line_break_holder] -->  right: 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->button.play.playing span.pause.right {<!-- [et_pb_line_break_holder] -->  right: 25px;<!-- [et_pb_line_break_holder] -->  opacity: 1;<!-- [et_pb_line_break_holder] -->  transition: right .5s ease, opacity .8s ease;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->button.play i {<!-- [et_pb_line_break_holder] -->  opacity: 1;<!-- [et_pb_line_break_holder] -->  transition: opacity .5s ease;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->button.play.playing i {<!-- [et_pb_line_break_holder] -->  opacity: 0;<!-- [et_pb_line_break_holder] -->  transition: all .5s ease;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.player-controls {<!-- [et_pb_line_break_holder] -->  position: relative;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  .spinner {<!-- [et_pb_line_break_holder] -->    height: 130px;<!-- [et_pb_line_break_holder] -->    width: 130px;<!-- [et_pb_line_break_holder] -->    position: absolute;<!-- [et_pb_line_break_holder] -->    top: -40px;<!-- [et_pb_line_break_holder] -->    left: 15px;<!-- [et_pb_line_break_holder] -->    display: flex;<!-- [et_pb_line_break_holder] -->    align-items: center;<!-- [et_pb_line_break_holder] -->    justify-content: center;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    &.spin {<!-- [et_pb_line_break_holder] -->      animation: spin 5s linear infinite;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    .spinner__disc {<!-- [et_pb_line_break_holder] -->      height: 110px;<!-- [et_pb_line_break_holder] -->      width: 110px;<!-- [et_pb_line_break_holder] -->      border-radius: 50%;<!-- [et_pb_line_break_holder] -->      transition: all 1s ease;<!-- [et_pb_line_break_holder] -->      background-image: url(http:\/\/www.placecage.com\/c\/127\/127);<!-- [et_pb_line_break_holder] -->      background-size: cover;<!-- [et_pb_line_break_holder] -->      background-position: center;<!-- [et_pb_line_break_holder] -->      display: flex;<!-- [et_pb_line_break_holder] -->      align-items: center;<!-- [et_pb_line_break_holder] -->      justify-content: center;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      &.scale {<!-- [et_pb_line_break_holder] -->        transform: scale(1.17);<!-- [et_pb_line_break_holder] -->        transition: all 1s ease;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        .center__disc {<!-- [et_pb_line_break_holder] -->          color: #e4d6e9;<!-- [et_pb_line_break_holder] -->          transition: all 1s ease;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->      }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      .center__disc {<!-- [et_pb_line_break_holder] -->        background-color: white;<!-- [et_pb_line_break_holder] -->        height: 25px;<!-- [et_pb_line_break_holder] -->        width: 25px;<!-- [et_pb_line_break_holder] -->        border-radius: 50%;<!-- [et_pb_line_break_holder] -->      }<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->@keyframes spin {<!-- [et_pb_line_break_holder] -->  100% {<!-- [et_pb_line_break_holder] -->    transform: rotate(360deg);<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><\/style>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* TODO:<!-- [et_pb_line_break_holder] -->  - ADD timer (currentTime and duration)<!-- [et_pb_line_break_holder] -->*\/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->const tracks = [<!-- [et_pb_line_break_holder] -->  {<!-- [et_pb_line_break_holder] -->    id: '1',<!-- [et_pb_line_break_holder] -->    title: 'Ukulele',<!-- [et_pb_line_break_holder] -->    artist: 'Bensound',<!-- [et_pb_line_break_holder] -->    src: 'https:\/\/www.bensound.com\/bensound-music\/bensound-ukulele.mp3',<!-- [et_pb_line_break_holder] -->    cover: 'https:\/\/www.bensound.com\/bensound-img\/ukulele.jpg'<!-- [et_pb_line_break_holder] -->  },<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] -->];<!-- [et_pb_line_break_holder] -->const player = document.querySelector('.player');<!-- [et_pb_line_break_holder] -->const audio = player.querySelector('.player__audio');<!-- [et_pb_line_break_holder] -->const audioSource = audio.querySelector('source');<!-- [et_pb_line_break_holder] -->const songPanel = player.querySelector('.song-panel');<!-- [et_pb_line_break_holder] -->const songTitle = player.querySelector('.song-info__title');<!-- [et_pb_line_break_holder] -->const songArtist = player.querySelector('.song-info__artist');<!-- [et_pb_line_break_holder] -->const backButton = player.querySelector('.backward');<!-- [et_pb_line_break_holder] -->const playButton = player.querySelector('.play');<!-- [et_pb_line_break_holder] -->const forwardButton = player.querySelector('.forward');<!-- [et_pb_line_break_holder] -->const spinner = player.querySelector('.spinner');<!-- [et_pb_line_break_holder] -->const spinnerDisc = player.querySelector('.spinner__disc');<!-- [et_pb_line_break_holder] -->const progress = player.querySelector('.progress');<!-- [et_pb_line_break_holder] -->const progressBar = player.querySelector('.progress__filled');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->let playing = false;<!-- [et_pb_line_break_holder] -->let trackSwitch = false;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->const togglePlay = () => {<!-- [et_pb_line_break_holder] -->  \/\/ Play \/ pause the audio<!-- [et_pb_line_break_holder] -->  const method = audio.paused ? 'play' : 'pause';<!-- [et_pb_line_break_holder] -->  playing = audio.paused ? true : false;<!-- [et_pb_line_break_holder] -->  audio[method]();<!-- [et_pb_line_break_holder] -->};<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->const toggleSongPanel = () => {<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  if (!trackSwitch) {<!-- [et_pb_line_break_holder] -->    \/\/ Scale the disc<!-- [et_pb_line_break_holder] -->    spinnerDisc.classList.toggle('scale');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Show \/ hide song panel<!-- [et_pb_line_break_holder] -->    songPanel.classList.toggle('playing');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Change button icon<!-- [et_pb_line_break_holder] -->    playButton.classList.toggle('playing');<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->};<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->const startSpin = () => {<!-- [et_pb_line_break_holder] -->  \/\/ Start spinning the disc<!-- [et_pb_line_break_holder] -->  spinner.classList.add('spin');<!-- [et_pb_line_break_holder] -->};<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->const stopSpin = () => {<!-- [et_pb_line_break_holder] -->  \/\/ Stop spinning the disc<!-- [et_pb_line_break_holder] -->  const spin = document.querySelector('.spin');<!-- [et_pb_line_break_holder] -->  spin.addEventListener(\"animationiteration\", () => {<!-- [et_pb_line_break_holder] -->    if (!playing) {<!-- [et_pb_line_break_holder] -->      spin.style.animation = 'none';<!-- [et_pb_line_break_holder] -->      spinner.classList.remove('spin');<!-- [et_pb_line_break_holder] -->      spin.style.animation = '';<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->  }, {<!-- [et_pb_line_break_holder] -->    once: true<!-- [et_pb_line_break_holder] -->  });<!-- [et_pb_line_break_holder] -->};<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->const handleProgress = () => {<!-- [et_pb_line_break_holder] -->  \/\/ Update the progress bar.<!-- [et_pb_line_break_holder] -->  const percent = (audio.currentTime \/ audio.duration) * 100;<!-- [et_pb_line_break_holder] -->  progressBar.style.flexBasis = `${percent}%`;<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  \/\/ Skip to next track if at the end of the song.<!-- [et_pb_line_break_holder] -->  if (percent === 100) {<!-- [et_pb_line_break_holder] -->    trackSwitch = true;<!-- [et_pb_line_break_holder] -->    handleForwardButton();<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->};<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->const handleBackButton = () => {<!-- [et_pb_line_break_holder] -->  if (audio.currentTime <= 3) {<!-- [et_pb_line_break_holder] -->    const currentTrackId = parseInt(audioSource.dataset.trackid);<!-- [et_pb_line_break_holder] -->    const previousTrackId = currentTrackId === 1 ? '10' : (currentTrackId - 1).toString();<!-- [et_pb_line_break_holder] -->    const previousTrack = tracks.find(o => o.id === previousTrackId);<!-- [et_pb_line_break_holder] -->    changeTrack(previousTrack);<!-- [et_pb_line_break_holder] -->  } else {<!-- [et_pb_line_break_holder] -->    audio.currentTime = 0;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->};<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->const handleForwardButton = () => {<!-- [et_pb_line_break_holder] -->  const currentTrackId = parseInt(audioSource.dataset.trackid);<!-- [et_pb_line_break_holder] -->  const nextTrackId = currentTrackId === 10 ? '1' : (currentTrackId + 1).toString();<!-- [et_pb_line_break_holder] -->  const nextTrack = tracks.find(o => o.id === nextTrackId);<!-- [et_pb_line_break_holder] -->  changeTrack(nextTrack);<!-- [et_pb_line_break_holder] -->};<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->const changeTrack = (track) => {<!-- [et_pb_line_break_holder] -->  if (playing) trackSwitch = true;<!-- [et_pb_line_break_holder] -->  audioSource.setAttribute('src', track.src);<!-- [et_pb_line_break_holder] -->  audioSource.dataset.trackid = track.id;<!-- [et_pb_line_break_holder] -->  songTitle.innerHTML = track.title;<!-- [et_pb_line_break_holder] -->  songArtist.innerHTML = track.artist;<!-- [et_pb_line_break_holder] -->  spinnerDisc.style.backgroundImage = `url(${track.cover})`;<!-- [et_pb_line_break_holder] -->  audio.load();<!-- [et_pb_line_break_holder] -->  if (playing) {<!-- [et_pb_line_break_holder] -->    audio.addEventListener('canplay', () => {<!-- [et_pb_line_break_holder] -->      audio.play();<!-- [et_pb_line_break_holder] -->    }, {<!-- [et_pb_line_break_holder] -->      once: true<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] -->    audio.addEventListener('play', () => {<!-- [et_pb_line_break_holder] -->      trackSwitch = false;<!-- [et_pb_line_break_holder] -->    }, {<!-- [et_pb_line_break_holder] -->      once: true<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->};<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->function scrub(e) {<!-- [et_pb_line_break_holder] -->    const scrubTime = (e.offsetX \/ progress.offsetWidth) * audio.duration;<!-- [et_pb_line_break_holder] -->    audio.currentTime = scrubTime;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->audio.addEventListener('play', startSpin);<!-- [et_pb_line_break_holder] -->audio.addEventListener('play', toggleSongPanel);<!-- [et_pb_line_break_holder] -->audio.addEventListener('pause', stopSpin)<!-- [et_pb_line_break_holder] -->audio.addEventListener('pause', toggleSongPanel);<!-- [et_pb_line_break_holder] -->audio.addEventListener('timeupdate', handleProgress);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->backButton.addEventListener('click', handleBackButton);<!-- [et_pb_line_break_holder] -->playButton.addEventListener('click', togglePlay);<!-- [et_pb_line_break_holder] -->forwardButton.addEventListener('click', handleForwardButton);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->let mousedown = false;<!-- [et_pb_line_break_holder] -->progress.addEventListener('click', scrub);<!-- [et_pb_line_break_holder] -->progress.addEventListener('mousemove', (e) => mousedown && scrub(e));<!-- [et_pb_line_break_holder] -->progress.addEventListener('mousedown', () => mousedown = true);<!-- [et_pb_line_break_holder] -->progress.addEventListener('mouseup', () => mousedown = false);<!-- [et_pb_line_break_holder] --><\/script>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=\u00bb1&#8243; _builder_version=\u00bb4.22.2&#8243; _module_preset=\u00bbdefault\u00bb background_color=\u00bb#250084&#8243; custom_css_main_element=\u00bb    z-index: 9999;||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_row admin_label=\u00bbrow\u00bb _builder_version=\u00bb4.16&#8243; background_size=\u00bbinitial\u00bb background_position=\u00bbtop_left\u00bb background_repeat=\u00bbrepeat\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.16&#8243; custom_padding=\u00bb|||\u00bb global_colors_info=\u00bb{}\u00bb custom_padding__hover=\u00bb|||\u00bb][et_pb_code disabled_on=\u00bbon|on|on\u00bb admin_label=\u00bbbarras\u00bb _builder_version=\u00bb4.22.2&#8243; _module_preset=\u00bbdefault\u00bb disabled=\u00bbon\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<div class=\"player\"><!-- [et_pb_line_break_holder] -->\t<\/p>\n<div id=\"info\" class=\"info\"><!-- [et_pb_line_break_holder] -->\t\t<span class=\"artist\">Flume<\/span><!-- [et_pb_line_break_holder] -->\t\t<span class=\"name\">Say it<\/span><!-- [et_pb_line_break_holder] -->\t\t<\/p>\n<div class=\"progress-bar\"><!-- [et_pb_line_break_holder] -->\t\t\t<\/p>\n<div class=\"bar\"><\/div>\n<p><!-- [et_pb_line_break_holder] -->\t\t<\/div>\n<p><!-- [et_pb_line_break_holder] -->\t<\/div>\n<p><!-- [et_pb_line_break_holder] -->\t<\/p>\n<div id=\"control-panel\" class=\"control-panel\"><!-- [et_pb_line_break_holder] -->    <audio class=\"musicPlayer\"><!-- [et_pb_line_break_holder] --><source src=\"https:\/\/www.bensound.com\/bensound-music\/bensound-ukulele.mp3\" type=\"audio\/mpeg\" ><!-- [et_pb_line_break_holder] -->    Your browser does not support the audio element.<!-- [et_pb_line_break_holder] --><\/audio><!-- [et_pb_line_break_holder] -->\t\t<\/p>\n<div class=\"album-art\"><\/div>\n<p><!-- [et_pb_line_break_holder] -->\t\t<\/p>\n<div class=\"controls\"><!-- [et_pb_line_break_holder] -->\t\t\t<\/p>\n<div class=\"prev\"><\/div>\n<p><!-- [et_pb_line_break_holder] -->\t\t\t<\/p>\n<div id=\"play\" class=\"play\"><\/div>\n<p><!-- [et_pb_line_break_holder] -->\t\t\t<\/p>\n<div class=\"next\"><\/div>\n<p><!-- [et_pb_line_break_holder] -->\t\t<\/div>\n<p><!-- [et_pb_line_break_holder] -->\t<\/div>\n<p><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/p>\n<style><!-- [et_pb_line_break_holder] -->@import url(\"https:\/\/fonts.googleapis.com\/css?family=Fira+Sans\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->html,body {<!-- [et_pb_line_break_holder] -->\tposition: relative;<!-- [et_pb_line_break_holder] -->\tmin-height: 100vh;<!-- [et_pb_line_break_holder] -->\tbackground-color: #FFF0F5;<!-- [et_pb_line_break_holder] -->\tdisplay: flex;<!-- [et_pb_line_break_holder] -->\talign-items: center;<!-- [et_pb_line_break_holder] -->\tjustify-content: center;<!-- [et_pb_line_break_holder] -->\tfont-family: \"Fira Sans\", Helvetica, Arial, sans-serif;<!-- [et_pb_line_break_holder] -->  -webkit-font-smoothing: antialiased;<!-- [et_pb_line_break_holder] -->  -moz-osx-font-smoothing: grayscale;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.player {<!-- [et_pb_line_break_holder] -->\tposition: relative;<!-- [et_pb_line_break_holder] -->\t<!-- [et_pb_line_break_holder] -->\t.info {<!-- [et_pb_line_break_holder] -->\t\tposition: absolute;<!-- [et_pb_line_break_holder] -->\t\theight: 60px;<!-- [et_pb_line_break_holder] -->\t\ttop: 0;<!-- [et_pb_line_break_holder] -->\t\topacity: 0;<!-- [et_pb_line_break_holder] -->\t\tleft: 10px;<!-- [et_pb_line_break_holder] -->\t\tright: 10px;<!-- [et_pb_line_break_holder] -->\t\tbackground-color: rgba(255, 255, 255, 0.5);<!-- [et_pb_line_break_holder] -->\t\tpadding: 5px 15px 5px 110px;<!-- [et_pb_line_break_holder] -->\t\tborder-radius: 15px;<!-- [et_pb_line_break_holder] -->\t\ttransition: all .5s ease;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\t\t.artist,<!-- [et_pb_line_break_holder] -->\t\t.name {<!-- [et_pb_line_break_holder] -->\t\t\tdisplay: block;<!-- [et_pb_line_break_holder] -->\t\t}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\t\t.artist {<!-- [et_pb_line_break_holder] -->\t\t\tcolor: #222;<!-- [et_pb_line_break_holder] -->\t\t\tfont-size: 16px;<!-- [et_pb_line_break_holder] -->\t\t\tmargin-bottom: 5px;<!-- [et_pb_line_break_holder] -->\t\t}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\t\t.name {<!-- [et_pb_line_break_holder] -->\t\t\tcolor: #999;<!-- [et_pb_line_break_holder] -->\t\t\tfont-size: 12px;<!-- [et_pb_line_break_holder] -->\t\t\tmargin-bottom: 8px;<!-- [et_pb_line_break_holder] -->\t\t}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\t\t.progress-bar {<!-- [et_pb_line_break_holder] -->\t\t\tbackground-color: #ddd;<!-- [et_pb_line_break_holder] -->\t\t\theight: 2px;<!-- [et_pb_line_break_holder] -->\t\t\twidth: 100%;<!-- [et_pb_line_break_holder] -->\t\t\tposition: relative;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\t\t\t.bar {<!-- [et_pb_line_break_holder] -->\t\t\t\tposition:absolute;<!-- [et_pb_line_break_holder] -->\t\t\t\tleft: 0;<!-- [et_pb_line_break_holder] -->\t\t\t\ttop: 0;<!-- [et_pb_line_break_holder] -->\t\t\t\tbottom: 0;<!-- [et_pb_line_break_holder] -->\t\t\t\tbackground-color: red;<!-- [et_pb_line_break_holder] -->\t\t\t\twidth: 10%;<!-- [et_pb_line_break_holder] -->\t\t\t\ttransition: all .2s ease;<!-- [et_pb_line_break_holder] -->\t\t\t}<!-- [et_pb_line_break_holder] -->\t\t}<!-- [et_pb_line_break_holder] -->\t\t&.active {<!-- [et_pb_line_break_holder] -->\t\t\ttop: -60px;<!-- [et_pb_line_break_holder] -->\t\t\topacity: 1;<!-- [et_pb_line_break_holder] -->\t\t\ttransition: all .5s ease;<!-- [et_pb_line_break_holder] -->\t\t}<!-- [et_pb_line_break_holder] -->\t}<!-- [et_pb_line_break_holder] -->\t.control-panel {<!-- [et_pb_line_break_holder] -->\t\tposition: relative;<!-- [et_pb_line_break_holder] -->\t\tbackground-color: #fff;<!-- [et_pb_line_break_holder] -->\t\tborder-radius: 15px;<!-- [et_pb_line_break_holder] -->\t\twidth: 300px;<!-- [et_pb_line_break_holder] -->\t\theight: 80px;<!-- [et_pb_line_break_holder] -->\t\tz-index: 5;<!-- [et_pb_line_break_holder] -->\t\tbox-shadow: 0px 20px 20px 5px rgba(132, 132, 132, 0.3);<!-- [et_pb_line_break_holder] -->\t\t<!-- [et_pb_line_break_holder] -->\t\t.album-art {<!-- [et_pb_line_break_holder] -->\t\t\tposition: absolute;<!-- [et_pb_line_break_holder] -->\t\t\tleft: 20px;<!-- [et_pb_line_break_holder] -->\t\t\ttop: -15px;<!-- [et_pb_line_break_holder] -->\t\t\theight: 80px;<!-- [et_pb_line_break_holder] -->\t\t\twidth: 80px;<!-- [et_pb_line_break_holder] -->\t\t\tborder-radius: 50%;<!-- [et_pb_line_break_holder] -->\t\t\tbox-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0);<!-- [et_pb_line_break_holder] -->\t\t\ttransform: scale(1);<!-- [et_pb_line_break_holder] -->\t\t\ttransition: all .5s ease;<!-- [et_pb_line_break_holder] -->\t<!-- [et_pb_line_break_holder] -->\t\t\t&::after {<!-- [et_pb_line_break_holder] -->\t\t\t\tcontent: '';<!-- [et_pb_line_break_holder] -->\t\t\t\tposition: absolute;<!-- [et_pb_line_break_holder] -->\t\t\t\ttop: 50%;<!-- [et_pb_line_break_holder] -->\t\t\t\tleft: 50%;<!-- [et_pb_line_break_holder] -->\t\t\t\twidth: 15px;<!-- [et_pb_line_break_holder] -->\t\t\t\theight: 15px;<!-- [et_pb_line_break_holder] -->\t\t\t\tbackground-color: #fff;<!-- [et_pb_line_break_holder] -->\t\t\t\tborder-radius: 50%;<!-- [et_pb_line_break_holder] -->\t\t\t\tz-index: 5;<!-- [et_pb_line_break_holder] -->\t\t\t\ttransform: translate(-50%, -50%);<!-- [et_pb_line_break_holder] -->\t\t\t\t-webkit-transform: translate(-50%, -50%);<!-- [et_pb_line_break_holder] -->\t\t\t}<!-- [et_pb_line_break_holder] -->\t\t\t<!-- [et_pb_line_break_holder] -->\t\t\t&::before {<!-- [et_pb_line_break_holder] -->\t\t\t\tcontent: '';<!-- [et_pb_line_break_holder] -->\t\t\t\tposition: absolute;<!-- [et_pb_line_break_holder] -->\t\t\t\ttop: 0;<!-- [et_pb_line_break_holder] -->\t\t\t\tleft: 0;<!-- [et_pb_line_break_holder] -->\t\t\t\tright: 0;<!-- [et_pb_line_break_holder] -->\t\t\t\tbottom: 0;<!-- [et_pb_line_break_holder] -->\t\t\t\tborder-radius: 50%;<!-- [et_pb_line_break_holder] -->\t\t\t\tbackground-position: center;<!-- [et_pb_line_break_holder] -->\t\t\t\tbackground-repeat: no-repeat;<!-- [et_pb_line_break_holder] -->\t\t\t\tbackground-size: 80px;<!-- [et_pb_line_break_holder] -->\t\t\t\tbackground-image: \turl('https:\/\/i.scdn.co\/image\/9dcbd30dbe0c621cbaeae427cf80eff9877b4fcd');<!-- [et_pb_line_break_holder] -->\t\t\t}<!-- [et_pb_line_break_holder] -->\t\t}<!-- [et_pb_line_break_holder] -->\t\t<!-- [et_pb_line_break_holder] -->\t\t&.active .album-art {<!-- [et_pb_line_break_holder] -->\t\t\tbox-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.2);<!-- [et_pb_line_break_holder] -->\t\t\ttransform: scale(1.2);<!-- [et_pb_line_break_holder] -->\t\t\ttransition: all .5s ease;<!-- [et_pb_line_break_holder] -->\t\t}<!-- [et_pb_line_break_holder] -->\t\t<!-- [et_pb_line_break_holder] -->\t\t&.active .album-art::before {<!-- [et_pb_line_break_holder] -->\t\t\tanimation: rotation 3s infinite linear;<!-- [et_pb_line_break_holder] -->\t\t\t-webkit-animation: rotation 3s infinite linear;<!-- [et_pb_line_break_holder] -->\t\t\tanimation-fill-mode: forwards;<!-- [et_pb_line_break_holder] -->\t\t}<!-- [et_pb_line_break_holder] -->\t\t<!-- [et_pb_line_break_holder] -->\t\t@keyframes rotation {<!-- [et_pb_line_break_holder] -->\t\t\t0% {<!-- [et_pb_line_break_holder] -->\t\t\t\ttransform: rotate(0deg);<!-- [et_pb_line_break_holder] -->\t\t\t}<!-- [et_pb_line_break_holder] -->\t\t\t<!-- [et_pb_line_break_holder] -->\t\t\t100% {<!-- [et_pb_line_break_holder] -->\t\t\t\ttransform: rotate(360deg);<!-- [et_pb_line_break_holder] -->\t\t\t}<!-- [et_pb_line_break_holder] -->\t\t}<!-- [et_pb_line_break_holder] -->\t\t<!-- [et_pb_line_break_holder] -->\t\t.controls {<!-- [et_pb_line_break_holder] -->\t\t\tdisplay: flex;<!-- [et_pb_line_break_holder] -->\t\t\tjustify-content: flex-end;<!-- [et_pb_line_break_holder] -->\t\t\theight: 80px;<!-- [et_pb_line_break_holder] -->\t\t\tpadding: 0 15px;<!-- [et_pb_line_break_holder] -->\t\t\t<!-- [et_pb_line_break_holder] -->\t\t\t.prev, <!-- [et_pb_line_break_holder] -->\t\t\t.play, <!-- [et_pb_line_break_holder] -->\t\t\t.next {<!-- [et_pb_line_break_holder] -->\t\t\t\twidth: 55px;<!-- [et_pb_line_break_holder] -->\t\t\t\theight: auto;<!-- [et_pb_line_break_holder] -->\t\t\t\tborder-radius: 10px;<!-- [et_pb_line_break_holder] -->\t\t\t\tbackground-position: center center;<!-- [et_pb_line_break_holder] -->\t\t\t\tbackground-repeat: no-repeat;<!-- [et_pb_line_break_holder] -->\t\t\t\tbackground-size: 20px;<!-- [et_pb_line_break_holder] -->\t\t\t\tmargin: 5px 0;<!-- [et_pb_line_break_holder] -->\t\t\t\tbackground-color: #fff;<!-- [et_pb_line_break_holder] -->\t\t\t\tcursor: pointer;<!-- [et_pb_line_break_holder] -->\t\t\t\ttransition: background-color .3s ease;<!-- [et_pb_line_break_holder] -->\t\t\t\t-webkit-transition: background-color .3s ease;<!-- [et_pb_line_break_holder] -->\t\t\t}<!-- [et_pb_line_break_holder] -->\t\t\t<!-- [et_pb_line_break_holder] -->\t\t\t.prev:hover, <!-- [et_pb_line_break_holder] -->\t\t\t.play:hover, <!-- [et_pb_line_break_holder] -->\t\t\t.next:hover {<!-- [et_pb_line_break_holder] -->\t\t\t\tbackground-color: #eee;<!-- [et_pb_line_break_holder] -->\t\t\t\ttransition: background-color .3s ease;<!-- [et_pb_line_break_holder] -->\t\t\t\t-webkit-transition: background-color .3s ease;<!-- [et_pb_line_break_holder] -->\t\t\t}<!-- [et_pb_line_break_holder] -->\t\t\t<!-- [et_pb_line_break_holder] -->\t\t\t.prev {<!-- [et_pb_line_break_holder] -->\t\t\t\tbackground-image: url(data:image\/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI\/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI1MC40ODggMjUwLjQ4OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjUwLjQ4OCAyNTAuNDg4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjEyOHB4IiBoZWlnaHQ9IjEyOHB4Ij4KPGcgaWQ9IlByZXZpb3VzX3RyYWNrIj4KCTxwYXRoIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDsiIGQ9Ik0yMzcuNDg0LDIyLjU4N2MtMy4yNjYsMC03LjU5MS0wLjQwMS0xMS4wNzIsMi4wMDVsLTkyLjI2NCw3Ny45MVYzNy4yNTIgICBjMC0yLjUwNywwLjA1Ny0xNC42NjYtMTMuMDA0LTE0LjY2NmMtMy4yNjUsMC03LjU5LTAuNDAxLTExLjA3MiwyLjAwNUw4LjEwNywxMTAuNjkzYy05LjY2OSw2LjY3NC03Ljk5NywxNC41NTEtNy45OTcsMTQuNTUxICAgcy0xLjY3MSw3Ljg3OCw3Ljk5NywxNC41NTFsMTAxLjk2NSw4Ni4xMDJjMy40ODIsMi40MDUsNy44MDcsMi4wMDQsMTEuMDcyLDIuMDA0YzEzLjA2MiwwLDEzLjAwNC0xMS43LDEzLjAwNC0xNC42NjZ2LTY1LjI0OSAgIGw5Mi4yNjQsNzcuOTExYzMuNDgyLDIuNDA1LDcuODA3LDIuMDA0LDExLjA3MiwyLjAwNGMxMy4wNjIsMCwxMy4wMDQtMTEuNywxMy4wMDQtMTQuNjY2VjM3LjI1MiAgIEMyNTAuNDg4LDM0Ljc0NiwyNTAuNTQ2LDIyLjU4NywyMzcuNDg0LDIyLjU4N3oiIGZpbGw9IiNjMmM2Y2YiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);<!-- [et_pb_line_break_holder] -->\t\t\t}<!-- [et_pb_line_break_holder] -->\t\t\t<!-- [et_pb_line_break_holder] -->\t\t\t.play {<!-- [et_pb_line_break_holder] -->\t\t\t\tbackground-image: url(data:image\/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI\/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIzMi4xNTMgMjMyLjE1MyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjMyLjE1MyAyMzIuMTUzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjEyOHB4IiBoZWlnaHQ9IjEyOHB4Ij4KPGcgaWQ9IlBsYXkiPgoJPHBhdGggc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkOyIgZD0iTTIwMy43OTEsOTkuNjI4TDQ5LjMwNywyLjI5NGMtNC41NjctMi43MTktMTAuMjM4LTIuMjY2LTE0LjUyMS0yLjI2NiAgIGMtMTcuMTMyLDAtMTcuMDU2LDEzLjIyNy0xNy4wNTYsMTYuNTc4djE5OC45NGMwLDIuODMzLTAuMDc1LDE2LjU3OSwxNy4wNTYsMTYuNTc5YzQuMjgzLDAsOS45NTUsMC40NTEsMTQuNTIxLTIuMjY3ICAgbDE1NC40ODMtOTcuMzMzYzEyLjY4LTcuNTQ1LDEwLjQ4OS0xNi40NDksMTAuNDg5LTE2LjQ0OVMyMTYuNDcxLDEwNy4xNzIsMjAzLjc5MSw5OS42Mjh6IiBmaWxsPSIjYzJjNmNmIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);<!-- [et_pb_line_break_holder] -->\t\t\t}<!-- [et_pb_line_break_holder] -->\t\t\t<!-- [et_pb_line_break_holder] -->\t\t\t.next {<!-- [et_pb_line_break_holder] -->\t\t\t\tbackground-image: url(data:image\/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI\/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI1MC40ODggMjUwLjQ4OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjUwLjQ4OCAyNTAuNDg4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjEyOHB4IiBoZWlnaHQ9IjEyOHB4Ij4KPGcgaWQ9Ik5leHRfdHJhY2tfMiI+Cgk8cGF0aCBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7IiBkPSJNMjQyLjM4MSwxMTAuNjkzTDE0MC40MTUsMjQuNTkxYy0zLjQ4LTIuNDA2LTcuODA1LTIuMDA1LTExLjA3MS0yLjAwNSAgIGMtMTMuMDYxLDAtMTMuMDAzLDExLjctMTMuMDAzLDE0LjY2NnY2NS4yNDlsLTkyLjI2NS03Ny45MWMtMy40ODItMi40MDYtNy44MDctMi4wMDUtMTEuMDcyLTIuMDA1ICAgQy0wLjA1NywyMi41ODcsMCwzNC4yODcsMCwzNy4yNTJ2MTc1Ljk4M2MwLDIuNTA3LTAuMDU3LDE0LjY2NiwxMy4wMDQsMTQuNjY2YzMuMjY1LDAsNy41OSwwLjQwMSwxMS4wNzItMi4wMDVsOTIuMjY1LTc3LjkxICAgdjY1LjI0OWMwLDIuNTA3LTAuMDU4LDE0LjY2NiwxMy4wMDMsMTQuNjY2YzMuMjY2LDAsNy41OTEsMC40MDEsMTEuMDcxLTIuMDA1bDEwMS45NjYtODYuMTAxICAgYzkuNjY4LTYuNjc1LDcuOTk3LTE0LjU1MSw3Ljk5Ny0xNC41NTFTMjUyLjA0OSwxMTcuMzY3LDI0Mi4zODEsMTEwLjY5M3oiIGZpbGw9IiNjMmM2Y2YiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K)<!-- [et_pb_line_break_holder] -->\t\t\t}<!-- [et_pb_line_break_holder] -->\t\t}<!-- [et_pb_line_break_holder] -->\t\t<!-- [et_pb_line_break_holder] -->\t\t&.active .controls .play {<!-- [et_pb_line_break_holder] -->\t\t\tbackground-image: url(data:image\/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI\/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIzMi42NzkgMjMyLjY3OSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjMyLjY3OSAyMzIuNjc5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjEyOHB4IiBoZWlnaHQ9IjEyOHB4Ij4KPGcgaWQ9IlBhdXNlIj4KCTxwYXRoIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDsiIGQ9Ik04MC41NDMsMEgzNS43OTdjLTkuODg1LDAtMTcuODk4LDguMDE0LTE3Ljg5OCwxNy44OTh2MTk2Ljg4MyAgIGMwLDkuODg1LDguMDEzLDE3Ljg5OCwxNy44OTgsMTcuODk4aDQ0Ljc0NmM5Ljg4NSwwLDE3Ljg5OC04LjAxMywxNy44OTgtMTcuODk4VjE3Ljg5OEM5OC40NCw4LjAxNCw5MC40MjcsMCw4MC41NDMsMHogTTE5Ni44ODIsMCAgIGgtNDQuNzQ2Yy05Ljg4NiwwLTE3Ljg5OSw4LjAxNC0xNy44OTksMTcuODk4djE5Ni44ODNjMCw5Ljg4NSw4LjAxMywxNy44OTgsMTcuODk5LDE3Ljg5OGg0NC43NDYgICBjOS44ODUsMCwxNy44OTgtOC4wMTMsMTcuODk4LTE3Ljg5OFYxNy44OThDMjE0Ljc4MSw4LjAxNCwyMDYuNzY3LDAsMTk2Ljg4MiwweiIgZmlsbD0iI2MyYzZjZiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=)<!-- [et_pb_line_break_holder] -->\t\t}<!-- [et_pb_line_break_holder] -->\t}<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><\/style>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->console.clear();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->class musicPlayer {<!-- [et_pb_line_break_holder] -->\tconstructor() {<!-- [et_pb_line_break_holder] -->\t\tthis.play = this.play.bind(this);<!-- [et_pb_line_break_holder] -->\t\tthis.playBtn = document.getElementById('play');<!-- [et_pb_line_break_holder] -->\t\tthis.playBtn.addEventListener('click', this.play);<!-- [et_pb_line_break_holder] -->\t\tthis.controlPanel = document.getElementById('control-panel');<!-- [et_pb_line_break_holder] -->\t\tthis.infoBar = document.getElementById('info');<!-- [et_pb_line_break_holder] -->\t}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\tplay() {<!-- [et_pb_line_break_holder] -->\t\tlet controlPanelObj = this.controlPanel,<!-- [et_pb_line_break_holder] -->\t\tinfoBarObj = this.infoBar<!-- [et_pb_line_break_holder] -->\t\tArray.from(controlPanelObj.classList).find(function(element){<!-- [et_pb_line_break_holder] -->\t\t\t\t\treturn element !== \"active\" ? controlPanelObj.classList.add('active') : \t\tcontrolPanelObj.classList.remove('active');<!-- [et_pb_line_break_holder] -->\t\t\t});<!-- [et_pb_line_break_holder] -->\t\t<!-- [et_pb_line_break_holder] -->\t\tArray.from(infoBarObj.classList).find(function(element){<!-- [et_pb_line_break_holder] -->\t\t\t\t\treturn element !== \"active\" ? infoBarObj.classList.add('active') : \t\tinfoBarObj.classList.remove('active');<!-- [et_pb_line_break_holder] -->\t\t\t});<!-- [et_pb_line_break_holder] -->\t}<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->const newMusicplayer = new musicPlayer();<!-- [et_pb_line_break_holder] --><\/script>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=\u00bb1&#8243; _builder_version=\u00bb4.22.2&#8243; _module_preset=\u00bbdefault\u00bb background_color=\u00bb#250084&#8243; custom_css_main_element=\u00bb    z-index: 9999;||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_row admin_label=\u00bbrow\u00bb _builder_version=\u00bb4.16&#8243; background_size=\u00bbinitial\u00bb background_position=\u00bbtop_left\u00bb background_repeat=\u00bbrepeat\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.16&#8243; custom_padding=\u00bb|||\u00bb global_colors_info=\u00bb{}\u00bb custom_padding__hover=\u00bb|||\u00bb][et_pb_code disabled_on=\u00bboff|off|off\u00bb admin_label=\u00bbqueen disco\u00bb _builder_version=\u00bb4.22.2&#8243; _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0&#8243; locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0&#8243;]<!-- [et_pb_line_break_holder] --><script src='https:\/\/kit.fontawesome.com\/a076d05399.js'><\/script><!-- [et_pb_line_break_holder] --><!--Get your own code at fontawesome.com--><!-- [et_pb_line_break_holder] --><\/p>\n<div class=\"container\"><!-- [et_pb_line_break_holder] --><\/p>\n<section class=\"implementation\"><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"now-playing-board\" id=\"now-playing-board-id\"><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"now-playing-details\"><!-- [et_pb_line_break_holder] -->      <\/p>\n<h4>Radio GaGa<\/h4>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<h6 style=\"color:rgb(71,71,71);\">Queen<\/h6>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<div class=\"slidecontainer-one\"><!-- [et_pb_line_break_holder] -->        <input type=\"range\" min=\"1\" max=\"100\" value=\"1\" class=\"slider\" id=\"range\"><!-- [et_pb_line_break_holder] -->        <\/p>\n<div id=\"completionBar\"><\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/div>\n<p><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] -->  <\/div>\n<p><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"now-playing-board-bottom-bar\" id=\"now-playing-board-bottom-bar-id\"><!-- [et_pb_line_break_holder] -->  <\/div>\n<p><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"play-controls\"><!-- [et_pb_line_break_holder] -->    <img decoding=\"async\" src=\"https:\/\/pngimg.com\/uploads\/vinyl\/vinyl_PNG21.png\" width=100 height=100 id=\"vynl-id\" class=\"vynl\"\/><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"play-buttons\"><!-- [et_pb_line_break_holder] -->            <i class='fa fa-step-backward' style='font-size:20px'><\/i><!-- [et_pb_line_break_holder] -->            <\/p>\n<div class='play-circle' id=\"playpause\" onclick=\"play(this)\"><\/div>\n<p><!-- [et_pb_line_break_holder] -->            <i class='fa fa-step-forward' style='font-size:20px'><\/i><!-- [et_pb_line_break_holder] -->    <\/div>\n<p>\t<!-- [et_pb_line_break_holder] -->    <!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"volume-button\"><!-- [et_pb_line_break_holder] -->      <i class='fa fa-volume-up' style='font-size:15px'><\/i><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] -->  <\/div>\n<p><!-- [et_pb_line_break_holder] -->  <audio id=\"audioSrc\"><!-- [et_pb_line_break_holder] --><source src=\"https:\/\/www.cjoint.com\/doc\/21_06\/KFibDJfanp7_Queen---Radio-Ga-Ga-Official-Video-.mp3\"><!-- [et_pb_line_break_holder] --><\/audio><!-- [et_pb_line_break_holder] --><\/section>\n<p><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/p>\n<style><!-- [et_pb_line_break_holder] -->.container<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] -->  height:100vh;<!-- [et_pb_line_break_holder] -->  width:100%;<!-- [et_pb_line_break_holder] -->  display:flex;<!-- [et_pb_line_break_holder] -->  justify-content:space-evenly;<!-- [et_pb_line_break_holder] -->  background-color:rgb(247,193,55);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.design<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] -->      height: 100vh;<!-- [et_pb_line_break_holder] -->    background-color: rgb(247,193,55);<!-- [et_pb_line_break_holder] -->    display: flex;<!-- [et_pb_line_break_holder] -->    align-items: center;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.implementation<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] -->  min-width:400px;<!-- [et_pb_line_break_holder] -->  height:100vh;<!-- [et_pb_line_break_holder] -->  margin-left:20px;<!-- [et_pb_line_break_holder] -->  display: flex;<!-- [et_pb_line_break_holder] -->  justify-content: center;<!-- [et_pb_line_break_holder] -->  align-items: center;<!-- [et_pb_line_break_holder] -->  flex-direction:column;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.now-playing-board<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] -->  height:70px;<!-- [et_pb_line_break_holder] -->  width:300px;<!-- [et_pb_line_break_holder] -->  background-color:rgba(255,255,255,0.4);<!-- [et_pb_line_break_holder] -->  border-radius:10px;<!-- [et_pb_line_break_holder] -->  display: flex;<!-- [et_pb_line_break_holder] -->  justify-content:flex-end;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.now-playing-board-bottom-bar<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] -->  height:50px;<!-- [et_pb_line_break_holder] -->  width:300px;<!-- [et_pb_line_break_holder] -->  background-color:rgba(255,255,255,0.4);<!-- [et_pb_line_break_holder] -->  border-radius:10px;<!-- [et_pb_line_break_holder] -->  display: flex;<!-- [et_pb_line_break_holder] -->  justify-content:flex-end;<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->#now-playing-board-id<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] -->  transform:translatey(56%);<!-- [et_pb_line_break_holder] -->  transition:transform 2s;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->#now-playing-board-bottom-bar-id<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  transform:translatey(-20%);<!-- [et_pb_line_break_holder] -->  transition:transform 2s;<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.now-playing-details<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] -->  display: flex;<!-- [et_pb_line_break_holder] -->  flex-direction: column;<!-- [et_pb_line_break_holder] -->  color:black;<!-- [et_pb_line_break_holder] -->  padding-top:2px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.now-playing-details > h4,h6,.slidecontainer-one<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] -->  font-family: \"Lucida Console\", Courier, monospace;<!-- [et_pb_line_break_holder] -->  width:180px;<!-- [et_pb_line_break_holder] -->margin-top: 10px;<!-- [et_pb_line_break_holder] -->    margin-bottom: -15px;<!-- [et_pb_line_break_holder] -->  color:black;<!-- [et_pb_line_break_holder] -->  opacity:1;<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* seek bar style *\/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.slidecontainer-one {<!-- [et_pb_line_break_holder] -->  width: 90%;<!-- [et_pb_line_break_holder] -->  position:relative;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->#completionBar {<!-- [et_pb_line_break_holder] -->position:relative;<!-- [et_pb_line_break_holder] -->  top:0;<!-- [et_pb_line_break_holder] -->  width: 0%;<!-- [et_pb_line_break_holder] -->  height: 5px;<!-- [et_pb_line_break_holder] -->  background: rgba(0,0,0,1);<!-- [et_pb_line_break_holder] -->  z-index:0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.slider {<!-- [et_pb_line_break_holder] -->position:absolute;<!-- [et_pb_line_break_holder] -->  top:-2px;<!-- [et_pb_line_break_holder] -->  -webkit-appearance: none;<!-- [et_pb_line_break_holder] -->  width: 100%;<!-- [et_pb_line_break_holder] -->  height: 5px;<!-- [et_pb_line_break_holder] -->  z-index:1;<!-- [et_pb_line_break_holder] -->  background: rgba(0,0,0,0.1);<!-- [et_pb_line_break_holder] -->  outline: none;<!-- [et_pb_line_break_holder] -->  opacity: 1;<!-- [et_pb_line_break_holder] -->  -webkit-transition: .2s;<!-- [et_pb_line_break_holder] -->  transition: opacity .2s;<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.slider:hover {<!-- [et_pb_line_break_holder] -->  opacity: 1;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.slider::-webkit-slider-thumb {<!-- [et_pb_line_break_holder] -->  position:relative;<!-- [et_pb_line_break_holder] -->  -webkit-appearance: none;<!-- [et_pb_line_break_holder] -->  appearance: none;<!-- [et_pb_line_break_holder] -->  width: 5px;<!-- [et_pb_line_break_holder] -->  height: 5px;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  background: #000000;<!-- [et_pb_line_break_holder] -->  cursor: pointer;<!-- [et_pb_line_break_holder] -->  z-index:3;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* -------------- *\/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.play-controls<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] -->  height:70px;<!-- [et_pb_line_break_holder] -->  width:320px;<!-- [et_pb_line_break_holder] -->  margin-top:-20%;<!-- [et_pb_line_break_holder] -->  background:white;<!-- [et_pb_line_break_holder] -->  border-radius:10px;<!-- [et_pb_line_break_holder] -->  display:flex;<!-- [et_pb_line_break_holder] -->  justify-content: space-around;<!-- [et_pb_line_break_holder] -->  align-items: center;<!-- [et_pb_line_break_holder] -->  z-index:2;<!-- [et_pb_line_break_holder] -->\/*   visibility: hidden; *\/<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.vynl<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] -->  margin-top:-14%;<!-- [et_pb_line_break_holder] -->  margin-left:-4%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.vynl-animation<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] -->  animation: rotation 3s infinite linear;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->@keyframes rotation {<!-- [et_pb_line_break_holder] -->\t\tfrom {<!-- [et_pb_line_break_holder] -->\t\t\t\t-webkit-transform: rotate(0deg);<!-- [et_pb_line_break_holder] -->\t\t}<!-- [et_pb_line_break_holder] -->\t\tto {<!-- [et_pb_line_break_holder] -->\t\t\t\t-webkit-transform: rotate(359deg);<!-- [et_pb_line_break_holder] -->\t\t}<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.play-buttons<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] -->  width:100px;<!-- [et_pb_line_break_holder] -->  height:30px;<!-- [et_pb_line_break_holder] -->  display:flex;<!-- [et_pb_line_break_holder] -->  justify-content:space-around;<!-- [et_pb_line_break_holder] -->  align-items:center;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.volume-button<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] -->  display:flex;<!-- [et_pb_line_break_holder] -->  justify-content: space-around;<!-- [et_pb_line_break_holder] -->  align-items: center;<!-- [et_pb_line_break_holder] -->  width:30px;<!-- [et_pb_line_break_holder] -->  height:30px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.play-circle<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] --> width:32px; <!-- [et_pb_line_break_holder] --> height:32px;<!-- [et_pb_line_break_holder] -->  background-image: url(https:\/\/cdn1.iconfinder.com\/data\/icons\/ios-11-glyphs\/30\/circled_play-512.png);<!-- [et_pb_line_break_holder] -->  background-size: cover;<!-- [et_pb_line_break_holder] -->  background-repeat: no-repeat;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.pause-circle<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] --> width:28px; <!-- [et_pb_line_break_holder] --> height:28px;<!-- [et_pb_line_break_holder] -->  background-image: url(https:\/\/cdn2.iconfinder.com\/data\/icons\/ios-tab-bar\/25\/Pause_Filled-512.png);<!-- [et_pb_line_break_holder] -->  background-size: cover;<!-- [et_pb_line_break_holder] -->  background-repeat: no-repeat;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.btn {<!-- [et_pb_line_break_holder] -->      position: fixed;<!-- [et_pb_line_break_holder] -->      bottom: 5%;<!-- [et_pb_line_break_holder] -->      right: 0px;<!-- [et_pb_line_break_holder] -->      transform: translateX(-50%);<!-- [et_pb_line_break_holder] -->      border: 1px solid #000;<!-- [et_pb_line_break_holder] -->      border-radius: 5px;<!-- [et_pb_line_break_holder] -->      font-size: 0.9rem;<!-- [et_pb_line_break_holder] -->      padding: 0.5rem 0.7em;<!-- [et_pb_line_break_holder] -->      background-color: transparent;<!-- [et_pb_line_break_holder] -->      color: #000;<!-- [et_pb_line_break_holder] -->      font-family: Verdana, Geneva, Tahoma, sans-serif;<!-- [et_pb_line_break_holder] -->      -webkit-font-smoothing: antialiased;<!-- [et_pb_line_break_holder] -->      cursor: pointer;<!-- [et_pb_line_break_holder] -->      transition: all .3s;<!-- [et_pb_line_break_holder] -->      z-index: 11;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><\/style>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/\/ seek bar---------------------------------<!-- [et_pb_line_break_holder] -->var range = document.getElementById(\"range\");<!-- [et_pb_line_break_holder] -->var completionBar = document.getElementById(\"completionBar\");<!-- [et_pb_line_break_holder] -->var slide = document.querySelector('.slide input[type=\"range\"]');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->var audioSeek = document.getElementById(\"audioSrc\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->range.oninput = function () {<!-- [et_pb_line_break_holder] -->  completionBar.style.width = this.value + '%';<!-- [et_pb_line_break_holder] -->  audioSeek.currentTime = this.value \/ 100 * audioSeek.duration;<!-- [et_pb_line_break_holder] -->};<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/\/------------------------------------------<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->function play(element)<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  var nowPlayingBoardId = document.getElementById(\"now-playing-board-id\");<!-- [et_pb_line_break_holder] -->  var nowPlayingBoardBottomBarId = document.getElementById(\"now-playing-board-bottom-bar-id\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  var vynlId = document.getElementById(\"vynl-id\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  var audio = document.getElementById(\"audioSrc\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  audio.loop = true;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/\/ Assign an ontimeupdate event to the video element, and execute a function if the current playback position has changed<!-- [et_pb_line_break_holder] -->  audio.ontimeupdate = function () {<!-- [et_pb_line_break_holder] -->    completionBar.style.width = this.currentTime \/ this.duration * 100 + '%';<!-- [et_pb_line_break_holder] -->    if (completionBar.style.width > \"99%\")<!-- [et_pb_line_break_holder] -->    {<!-- [et_pb_line_break_holder] -->      range.value = 0;<!-- [et_pb_line_break_holder] -->    } else<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    {<!-- [et_pb_line_break_holder] -->      console.log(' ' + completionBar.style.width);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->  };<!-- [et_pb_line_break_holder] -->  if (document.getElementById(\"playpause\").classList.contains(\"play-circle\"))<!-- [et_pb_line_break_holder] -->  {<!-- [et_pb_line_break_holder] -->    vynlId.classList.add(\"vynl-animation\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    document.getElementById(\"audioSrc\").play();<!-- [et_pb_line_break_holder] -->    nowPlayingBoardId.style.transform = \"translatey(-30%)\";<!-- [et_pb_line_break_holder] -->    nowPlayingBoardBottomBarId.style.transform = \"translatey(-30%)\";<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    document.getElementById(\"playpause\").classList.remove(\"play-circle\");<!-- [et_pb_line_break_holder] -->    document.getElementById(\"playpause\").classList.add(\"pause-circle\");<!-- [et_pb_line_break_holder] -->  } else<!-- [et_pb_line_break_holder] -->  if (document.getElementById(\"playpause\").classList.contains(\"pause-circle\"))<!-- [et_pb_line_break_holder] -->  {<!-- [et_pb_line_break_holder] -->    vynlId.classList.remove(\"vynl-animation\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    document.getElementById(\"audioSrc\").pause();<!-- [et_pb_line_break_holder] -->    nowPlayingBoardId.style.transform = \"translatey(56%)\";<!-- [et_pb_line_break_holder] -->    nowPlayingBoardBottomBarId.style.transform = \"translatey(-20%)\";<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    document.getElementById(\"playpause\").classList.remove(\"pause-circle\");<!-- [et_pb_line_break_holder] -->    document.getElementById(\"playpause\").classList.add(\"play-circle\");<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script>[\/et_pb_code][et_pb_code disabled_on=\u00bbon|on|on\u00bb admin_label=\u00bbqueen disco\u00bb _builder_version=\u00bb4.22.2&#8243; _module_preset=\u00bbdefault\u00bb disabled=\u00bbon\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb]<!-- [et_pb_line_break_holder] --><script src='https:\/\/kit.fontawesome.com\/a076d05399.js'><\/script><!-- [et_pb_line_break_holder] --><!--Get your own code at fontawesome.com--><!-- [et_pb_line_break_holder] --><\/p>\n<div class=\"container\"><!-- [et_pb_line_break_holder] --><\/p>\n<section class=\"implementation\"><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"now-playing-board\" id=\"now-playing-board-id\"><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"now-playing-details\"><!-- [et_pb_line_break_holder] -->      <\/p>\n<h4>Radio GaGa<\/h4>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<h6 style=\"color:rgb(71,71,71);\">Queen<\/h6>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<div class=\"slidecontainer-one\"><!-- [et_pb_line_break_holder] -->        <input type=\"range\" min=\"1\" max=\"100\" value=\"1\" class=\"slider\" id=\"range\"><!-- [et_pb_line_break_holder] -->        <\/p>\n<div id=\"completionBar\"><\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/div>\n<p><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] -->  <\/div>\n<p><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"now-playing-board-bottom-bar\" id=\"now-playing-board-bottom-bar-id\"><!-- [et_pb_line_break_holder] -->  <\/div>\n<p><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"play-controls\"><!-- [et_pb_line_break_holder] -->    <img decoding=\"async\" src=\"https:\/\/pngimg.com\/uploads\/vinyl\/vinyl_PNG21.png\" width=100 height=100 id=\"vynl-id\" class=\"vynl\"\/><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"play-buttons\"><!-- [et_pb_line_break_holder] -->            <i class='fa fa-step-backward' style='font-size:20px'><\/i><!-- [et_pb_line_break_holder] -->            <\/p>\n<div class='play-circle' id=\"playpause\" onclick=\"play(this)\"><\/div>\n<p><!-- [et_pb_line_break_holder] -->            <i class='fa fa-step-forward' style='font-size:20px'><\/i><!-- [et_pb_line_break_holder] -->    <\/div>\n<p>\t<!-- [et_pb_line_break_holder] -->    <!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"volume-button\"><!-- [et_pb_line_break_holder] -->      <i class='fa fa-volume-up' style='font-size:15px'><\/i><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] -->  <\/div>\n<p><!-- [et_pb_line_break_holder] -->  <audio id=\"audioSrc\"><!-- [et_pb_line_break_holder] --><source src=\"https:\/\/www.cjoint.com\/doc\/21_06\/KFibDJfanp7_Queen---Radio-Ga-Ga-Official-Video-.mp3\"><!-- [et_pb_line_break_holder] --><\/audio><!-- [et_pb_line_break_holder] --><\/section>\n<p><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/p>\n<style><!-- [et_pb_line_break_holder] -->body<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] -->  background:rgb(247,193,57);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.container<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] -->  height:100vh;<!-- [et_pb_line_break_holder] -->  width:100%;<!-- [et_pb_line_break_holder] -->  display:flex;<!-- [et_pb_line_break_holder] -->  justify-content:space-evenly;<!-- [et_pb_line_break_holder] -->  background-color:rgb(247,193,55);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.design<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] -->      height: 100vh;<!-- [et_pb_line_break_holder] -->    background-color: rgb(247,193,55);<!-- [et_pb_line_break_holder] -->    display: flex;<!-- [et_pb_line_break_holder] -->    align-items: center;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.implementation<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] -->  min-width:400px;<!-- [et_pb_line_break_holder] -->  height:100vh;<!-- [et_pb_line_break_holder] -->  background:rgb(247,193,55);<!-- [et_pb_line_break_holder] -->  margin-left:20px;<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  display: flex;<!-- [et_pb_line_break_holder] -->  justify-content: center;<!-- [et_pb_line_break_holder] -->  align-items: center;<!-- [et_pb_line_break_holder] -->  flex-direction:column;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.now-playing-board<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] -->  height:70px;<!-- [et_pb_line_break_holder] -->  width:300px;<!-- [et_pb_line_break_holder] -->  background-color:rgba(255,255,255,0.4);<!-- [et_pb_line_break_holder] -->  border-radius:10px;<!-- [et_pb_line_break_holder] -->  display: flex;<!-- [et_pb_line_break_holder] -->  justify-content:flex-end;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.now-playing-board-bottom-bar<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] -->  height:50px;<!-- [et_pb_line_break_holder] -->  width:300px;<!-- [et_pb_line_break_holder] -->  background-color:rgba(255,255,255,0.4);<!-- [et_pb_line_break_holder] -->  border-radius:10px;<!-- [et_pb_line_break_holder] -->  display: flex;<!-- [et_pb_line_break_holder] -->  justify-content:flex-end;<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->#now-playing-board-id<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] -->  transform:translatey(56%);<!-- [et_pb_line_break_holder] -->  transition:transform 2s;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->#now-playing-board-bottom-bar-id<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  transform:translatey(-20%);<!-- [et_pb_line_break_holder] -->  transition:transform 2s;<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.now-playing-details<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] -->  display: flex;<!-- [et_pb_line_break_holder] -->  flex-direction: column;<!-- [et_pb_line_break_holder] -->  color:black;<!-- [et_pb_line_break_holder] -->  padding-top:2px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.now-playing-details > h4,h6,.slidecontainer-one<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] -->  font-family: \"Lucida Console\", Courier, monospace;<!-- [et_pb_line_break_holder] -->  width:180px;<!-- [et_pb_line_break_holder] -->  margin: 0px;<!-- [et_pb_line_break_holder] -->  margin-top:5px;<!-- [et_pb_line_break_holder] -->  color:black;<!-- [et_pb_line_break_holder] -->  opacity:1;<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* seek bar style *\/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.slidecontainer-one {<!-- [et_pb_line_break_holder] -->  width: 90%;<!-- [et_pb_line_break_holder] -->  position:relative;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->#completionBar {<!-- [et_pb_line_break_holder] -->position:relative;<!-- [et_pb_line_break_holder] -->  top:0;<!-- [et_pb_line_break_holder] -->  width: 0%;<!-- [et_pb_line_break_holder] -->  height: 5px;<!-- [et_pb_line_break_holder] -->  background: rgba(0,0,0,1);<!-- [et_pb_line_break_holder] -->  z-index:0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.slider {<!-- [et_pb_line_break_holder] -->position:absolute;<!-- [et_pb_line_break_holder] -->  top:-2px;<!-- [et_pb_line_break_holder] -->  -webkit-appearance: none;<!-- [et_pb_line_break_holder] -->  width: 100%;<!-- [et_pb_line_break_holder] -->  height: 5px;<!-- [et_pb_line_break_holder] -->  z-index:1;<!-- [et_pb_line_break_holder] -->  background: rgba(0,0,0,0.1);<!-- [et_pb_line_break_holder] -->  outline: none;<!-- [et_pb_line_break_holder] -->  opacity: 1;<!-- [et_pb_line_break_holder] -->  -webkit-transition: .2s;<!-- [et_pb_line_break_holder] -->  transition: opacity .2s;<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.slider:hover {<!-- [et_pb_line_break_holder] -->  opacity: 1;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.slider::-webkit-slider-thumb {<!-- [et_pb_line_break_holder] -->  position:relative;<!-- [et_pb_line_break_holder] -->  -webkit-appearance: none;<!-- [et_pb_line_break_holder] -->  appearance: none;<!-- [et_pb_line_break_holder] -->  width: 5px;<!-- [et_pb_line_break_holder] -->  height: 5px;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  background: #000000;<!-- [et_pb_line_break_holder] -->  cursor: pointer;<!-- [et_pb_line_break_holder] -->  z-index:3;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* -------------- *\/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.play-controls<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] -->  height:70px;<!-- [et_pb_line_break_holder] -->  width:320px;<!-- [et_pb_line_break_holder] -->  margin-top:-20%;<!-- [et_pb_line_break_holder] -->  background:white;<!-- [et_pb_line_break_holder] -->  border-radius:10px;<!-- [et_pb_line_break_holder] -->  display:flex;<!-- [et_pb_line_break_holder] -->  justify-content: space-around;<!-- [et_pb_line_break_holder] -->  align-items: center;<!-- [et_pb_line_break_holder] -->  z-index:2;<!-- [et_pb_line_break_holder] -->\/*   visibility: hidden; *\/<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.vynl<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] -->  margin-top:-14%;<!-- [et_pb_line_break_holder] -->  margin-left:-4%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.vynl-animation<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] -->  animation: rotation 3s infinite linear;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->@keyframes rotation {<!-- [et_pb_line_break_holder] -->\t\tfrom {<!-- [et_pb_line_break_holder] -->\t\t\t\t-webkit-transform: rotate(0deg);<!-- [et_pb_line_break_holder] -->\t\t}<!-- [et_pb_line_break_holder] -->\t\tto {<!-- [et_pb_line_break_holder] -->\t\t\t\t-webkit-transform: rotate(359deg);<!-- [et_pb_line_break_holder] -->\t\t}<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.play-buttons<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] -->  width:100px;<!-- [et_pb_line_break_holder] -->  height:30px;<!-- [et_pb_line_break_holder] -->  display:flex;<!-- [et_pb_line_break_holder] -->  justify-content:space-around;<!-- [et_pb_line_break_holder] -->  align-items:center;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.volume-button<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] -->  display:flex;<!-- [et_pb_line_break_holder] -->  justify-content: space-around;<!-- [et_pb_line_break_holder] -->  align-items: center;<!-- [et_pb_line_break_holder] -->  width:30px;<!-- [et_pb_line_break_holder] -->  height:30px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.play-circle<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] --> width:32px; <!-- [et_pb_line_break_holder] --> height:32px;<!-- [et_pb_line_break_holder] -->  background-image: url(https:\/\/cdn1.iconfinder.com\/data\/icons\/ios-11-glyphs\/30\/circled_play-512.png);<!-- [et_pb_line_break_holder] -->  background-size: cover;<!-- [et_pb_line_break_holder] -->  background-repeat: no-repeat;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.pause-circle<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] --> width:28px; <!-- [et_pb_line_break_holder] --> height:28px;<!-- [et_pb_line_break_holder] -->  background-image: url(https:\/\/cdn2.iconfinder.com\/data\/icons\/ios-tab-bar\/25\/Pause_Filled-512.png);<!-- [et_pb_line_break_holder] -->  background-size: cover;<!-- [et_pb_line_break_holder] -->  background-repeat: no-repeat;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.btn {<!-- [et_pb_line_break_holder] -->      position: fixed;<!-- [et_pb_line_break_holder] -->      bottom: 5%;<!-- [et_pb_line_break_holder] -->      right: 0px;<!-- [et_pb_line_break_holder] -->      transform: translateX(-50%);<!-- [et_pb_line_break_holder] -->      border: 1px solid #000;<!-- [et_pb_line_break_holder] -->      border-radius: 5px;<!-- [et_pb_line_break_holder] -->      font-size: 0.9rem;<!-- [et_pb_line_break_holder] -->      padding: 0.5rem 0.7em;<!-- [et_pb_line_break_holder] -->      background-color: transparent;<!-- [et_pb_line_break_holder] -->      color: #000;<!-- [et_pb_line_break_holder] -->      font-family: Verdana, Geneva, Tahoma, sans-serif;<!-- [et_pb_line_break_holder] -->      -webkit-font-smoothing: antialiased;<!-- [et_pb_line_break_holder] -->      cursor: pointer;<!-- [et_pb_line_break_holder] -->      transition: all .3s;<!-- [et_pb_line_break_holder] -->      z-index: 11;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><\/style>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/\/ seek bar---------------------------------<!-- [et_pb_line_break_holder] -->var range = document.getElementById(\"range\");<!-- [et_pb_line_break_holder] -->var completionBar = document.getElementById(\"completionBar\");<!-- [et_pb_line_break_holder] -->var slide = document.querySelector('.slide input[type=\"range\"]');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->var audioSeek = document.getElementById(\"audioSrc\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->range.oninput = function () {<!-- [et_pb_line_break_holder] -->  completionBar.style.width = this.value + '%';<!-- [et_pb_line_break_holder] -->  audioSeek.currentTime = this.value \/ 100 * audioSeek.duration;<!-- [et_pb_line_break_holder] -->};<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/\/------------------------------------------<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->function play(element)<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  var nowPlayingBoardId = document.getElementById(\"now-playing-board-id\");<!-- [et_pb_line_break_holder] -->  var nowPlayingBoardBottomBarId = document.getElementById(\"now-playing-board-bottom-bar-id\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  var vynlId = document.getElementById(\"vynl-id\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  var audio = document.getElementById(\"audioSrc\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  audio.loop = true;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/\/ Assign an ontimeupdate event to the video element, and execute a function if the current playback position has changed<!-- [et_pb_line_break_holder] -->  audio.ontimeupdate = function () {<!-- [et_pb_line_break_holder] -->    completionBar.style.width = this.currentTime \/ this.duration * 100 + '%';<!-- [et_pb_line_break_holder] -->    if (completionBar.style.width > \"99%\")<!-- [et_pb_line_break_holder] -->    {<!-- [et_pb_line_break_holder] -->      range.value = 0;<!-- [et_pb_line_break_holder] -->    } else<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    {<!-- [et_pb_line_break_holder] -->      console.log(' ' + completionBar.style.width);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->  };<!-- [et_pb_line_break_holder] -->  if (document.getElementById(\"playpause\").classList.contains(\"play-circle\"))<!-- [et_pb_line_break_holder] -->  {<!-- [et_pb_line_break_holder] -->    vynlId.classList.add(\"vynl-animation\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    document.getElementById(\"audioSrc\").play();<!-- [et_pb_line_break_holder] -->    nowPlayingBoardId.style.transform = \"translatey(-30%)\";<!-- [et_pb_line_break_holder] -->    nowPlayingBoardBottomBarId.style.transform = \"translatey(0)\";<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    document.getElementById(\"playpause\").classList.remove(\"play-circle\");<!-- [et_pb_line_break_holder] -->    document.getElementById(\"playpause\").classList.add(\"pause-circle\");<!-- [et_pb_line_break_holder] -->  } else<!-- [et_pb_line_break_holder] -->  if (document.getElementById(\"playpause\").classList.contains(\"pause-circle\"))<!-- [et_pb_line_break_holder] -->  {<!-- [et_pb_line_break_holder] -->    vynlId.classList.remove(\"vynl-animation\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    document.getElementById(\"audioSrc\").pause();<!-- [et_pb_line_break_holder] -->    nowPlayingBoardId.style.transform = \"translatey(56%)\";<!-- [et_pb_line_break_holder] -->    nowPlayingBoardBottomBarId.style.transform = \"translatey(-20%)\";<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    document.getElementById(\"playpause\").classList.remove(\"pause-circle\");<!-- [et_pb_line_break_holder] -->    document.getElementById(\"playpause\").classList.add(\"play-circle\");<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"<!-- wp:paragraph -->\r\n<p>This is an example page. It's different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:<\/p>\r\n<!-- \/wp:paragraph -->\r\n\r\n<!-- wp:quote -->\r\n<blockquote class=\"wp-block-quote\"><p>Hi there! I'm a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like pi\u00f1a coladas. (And gettin' caught in the rain.)<\/p><\/blockquote>\r\n<!-- \/wp:quote -->\r\n\r\n<!-- wp:paragraph -->\r\n<p>...or something like this:<\/p>\r\n<!-- \/wp:paragraph -->\r\n\r\n<!-- wp:quote -->\r\n<blockquote class=\"wp-block-quote\"><p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.<\/p><\/blockquote>\r\n<!-- \/wp:quote -->\r\n\r\n<!-- wp:paragraph -->\r\n<p>As a new WordPress user, you should go to <a href=\"https:\/\/quincepartyestudio.com\/core\/wp-admin\/\">your dashboard<\/a> to delete this page and create new pages for your content. Have fun!<\/p>\r\n<!-- \/wp:paragraph -->","_et_gb_content_width":"","_joinchat":[],"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Sample Page | Quince Party Estudio<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/quincepartyestudio.com\/index.php\/sample-page\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sample Page | Quince Party Estudio\" \/>\n<meta property=\"og:url\" content=\"https:\/\/quincepartyestudio.com\/index.php\/sample-page\/\" \/>\n<meta property=\"og:site_name\" content=\"Quince Party Estudio\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-02T17:28:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pngimg.com\/uploads\/vinyl\/vinyl_PNG21.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/quincepartyestudio.com\/index.php\/sample-page\/\",\"url\":\"https:\/\/quincepartyestudio.com\/index.php\/sample-page\/\",\"name\":\"Sample Page | Quince Party Estudio\",\"isPartOf\":{\"@id\":\"https:\/\/quincepartyestudio.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/quincepartyestudio.com\/index.php\/sample-page\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/quincepartyestudio.com\/index.php\/sample-page\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/pngimg.com\/uploads\/vinyl\/vinyl_PNG21.png\",\"datePublished\":\"2023-06-26T14:49:15+00:00\",\"dateModified\":\"2023-10-02T17:28:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/quincepartyestudio.com\/index.php\/sample-page\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/quincepartyestudio.com\/index.php\/sample-page\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/quincepartyestudio.com\/index.php\/sample-page\/#primaryimage\",\"url\":\"https:\/\/pngimg.com\/uploads\/vinyl\/vinyl_PNG21.png\",\"contentUrl\":\"https:\/\/pngimg.com\/uploads\/vinyl\/vinyl_PNG21.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/quincepartyestudio.com\/index.php\/sample-page\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/quincepartyestudio.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sample Page\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/quincepartyestudio.com\/#website\",\"url\":\"https:\/\/quincepartyestudio.com\/\",\"name\":\"Quince Party Estudio\",\"description\":\"Invitaciones Digitales Personalizadas\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/quincepartyestudio.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"es\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Sample Page | Quince Party Estudio","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/quincepartyestudio.com\/index.php\/sample-page\/","og_locale":"es_ES","og_type":"article","og_title":"Sample Page | Quince Party Estudio","og_url":"https:\/\/quincepartyestudio.com\/index.php\/sample-page\/","og_site_name":"Quince Party Estudio","article_modified_time":"2023-10-02T17:28:47+00:00","og_image":[{"url":"https:\/\/pngimg.com\/uploads\/vinyl\/vinyl_PNG21.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/quincepartyestudio.com\/index.php\/sample-page\/","url":"https:\/\/quincepartyestudio.com\/index.php\/sample-page\/","name":"Sample Page | Quince Party Estudio","isPartOf":{"@id":"https:\/\/quincepartyestudio.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/quincepartyestudio.com\/index.php\/sample-page\/#primaryimage"},"image":{"@id":"https:\/\/quincepartyestudio.com\/index.php\/sample-page\/#primaryimage"},"thumbnailUrl":"https:\/\/pngimg.com\/uploads\/vinyl\/vinyl_PNG21.png","datePublished":"2023-06-26T14:49:15+00:00","dateModified":"2023-10-02T17:28:47+00:00","breadcrumb":{"@id":"https:\/\/quincepartyestudio.com\/index.php\/sample-page\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/quincepartyestudio.com\/index.php\/sample-page\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/quincepartyestudio.com\/index.php\/sample-page\/#primaryimage","url":"https:\/\/pngimg.com\/uploads\/vinyl\/vinyl_PNG21.png","contentUrl":"https:\/\/pngimg.com\/uploads\/vinyl\/vinyl_PNG21.png"},{"@type":"BreadcrumbList","@id":"https:\/\/quincepartyestudio.com\/index.php\/sample-page\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/quincepartyestudio.com\/"},{"@type":"ListItem","position":2,"name":"Sample Page"}]},{"@type":"WebSite","@id":"https:\/\/quincepartyestudio.com\/#website","url":"https:\/\/quincepartyestudio.com\/","name":"Quince Party Estudio","description":"Invitaciones Digitales Personalizadas","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/quincepartyestudio.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"es"}]}},"_links":{"self":[{"href":"https:\/\/quincepartyestudio.com\/index.php\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/quincepartyestudio.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/quincepartyestudio.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/quincepartyestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/quincepartyestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":0,"href":"https:\/\/quincepartyestudio.com\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"wp:attachment":[{"href":"https:\/\/quincepartyestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}