Sound Player

Features multiple steps with validation.

Sign up to copy to

Copy this <script> to your <head>or <body> of your page to make this work

<script src="https://cdn.jsdelivr.net/gh/manuelogomigo/flowscriipt@main/custom-toast-notification/script.js"></script>

{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"da4cf79e-c394-c0bc-422c-0d4fb5b7336f","type":"Block","tag":"div","classes":["b76eff1c-ed93-6029-3277-b0128706e073"],"children":["1c02fe63-d5c3-5fd6-453f-8ccfb4a62e39","adb98b67-7cf5-1c1b-a35e-794c5ebab383","ec85c2d5-b43d-257d-53e0-7fdf2900e56b"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"1c02fe63-d5c3-5fd6-453f-8ccfb4a62e39","type":"Block","tag":"div","classes":["ba0132ee-7e29-4c1d-edad-c4ae56585f0c"],"children":["1c02fe63-d5c3-5fd6-453f-8ccfb4a62e3a"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"1c02fe63-d5c3-5fd6-453f-8ccfb4a62e3a","type":"Block","tag":"div","classes":["c3d449d0-3936-e923-1f9e-9792fd6ba8db"],"children":["1c02fe63-d5c3-5fd6-453f-8ccfb4a62e3b","1c02fe63-d5c3-5fd6-453f-8ccfb4a62e43"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"1c02fe63-d5c3-5fd6-453f-8ccfb4a62e3b","type":"Block","tag":"div","classes":["c7a59ed5-aa14-2cbb-c2e1-6c9f23b0b4c8"],"children":["1c02fe63-d5c3-5fd6-453f-8ccfb4a62e3c","1c02fe63-d5c3-5fd6-453f-8ccfb4a62e3e"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"1c02fe63-d5c3-5fd6-453f-8ccfb4a62e3c","type":"Block","tag":"div","classes":["b5a7214d-175d-c9a8-df93-6c6b777b2d01"],"children":["1c02fe63-d5c3-5fd6-453f-8ccfb4a62e3d"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"1c02fe63-d5c3-5fd6-453f-8ccfb4a62e3d","type":"Image","tag":"img","classes":["83c32d36-b2b4-9f16-16bf-51b2af8f0cfd"],"children":[],"data":{"attr":{"src":"https://cdn.prod.website-files.com/6493377f1a80e7fd23cf1812/64b662356e64fe4278ce55cb_Never%20gonna%20give%20yu%20%20up.png","loading":"lazy","width":"auto","height":"auto","alt":"__wf_reserved_inherit"},"img":{"id":"6500717d9db2c329b4efc587","sizes":[{"max":48,"size":"100vw"},{"max":10000,"size":"48px"}]}}},{"_id":"1c02fe63-d5c3-5fd6-453f-8ccfb4a62e3e","type":"Block","tag":"div","classes":["674b348c-be41-0bf1-cf0f-dd059f2365a0"],"children":["1c02fe63-d5c3-5fd6-453f-8ccfb4a62e3f","1c02fe63-d5c3-5fd6-453f-8ccfb4a62e41"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"1c02fe63-d5c3-5fd6-453f-8ccfb4a62e3f","type":"Block","tag":"div","classes":["83ab7a08-0401-0b7f-ba3c-38f6d10a1287"],"children":["1c02fe63-d5c3-5fd6-453f-8ccfb4a62e40"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"1c02fe63-d5c3-5fd6-453f-8ccfb4a62e40","text":true,"v":"Never Gonna Give You Up"},{"_id":"1c02fe63-d5c3-5fd6-453f-8ccfb4a62e41","type":"Block","tag":"div","classes":["b715d87a-f036-a9d6-78ea-e00c2c5d3489"],"children":["1c02fe63-d5c3-5fd6-453f-8ccfb4a62e42"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"1c02fe63-d5c3-5fd6-453f-8ccfb4a62e42","text":true,"v":"Rick Astley"},{"_id":"1c02fe63-d5c3-5fd6-453f-8ccfb4a62e43","type":"Block","tag":"div","classes":["0706795a-66d2-3eb2-a11c-fdf30a458f8a"],"children":["1c02fe63-d5c3-5fd6-453f-8ccfb4a62e44","1c02fe63-d5c3-5fd6-453f-8ccfb4a62e52","3f10de83-d2ef-d5e7-b5e2-cfab301cc687"],"data":{"search":{"exclude":false},"xattr":[{"name":"ct-audio-element","value":"wrapper"}],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"1c02fe63-d5c3-5fd6-453f-8ccfb4a62e44","type":"Block","tag":"div","classes":["5a72b1b3-f7f6-c2ca-a17d-34640157ff45"],"children":["1c02fe63-d5c3-5fd6-453f-8ccfb4a62e45","1c02fe63-d5c3-5fd6-453f-8ccfb4a62e48"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"1c02fe63-d5c3-5fd6-453f-8ccfb4a62e45","type":"Block","tag":"div","classes":["c2d85406-ecd6-84b5-180d-af4d7acc6545"],"children":["1c02fe63-d5c3-5fd6-453f-8ccfb4a62e46","1c02fe63-d5c3-5fd6-453f-8ccfb4a62e47"],"data":{"search":{"exclude":false},"xattr":[{"name":"ct-audio-trigger","value":"click"},{"name":"ct-audio-url","value":"https://mp3.vevosongs.com/wp-content/uploads/2022/09/Rick_Astley_-_Never_Gonna_Give_You_Up.mp3"},{"name":"ct-audio-loop","value":"true"}],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"1c02fe63-d5c3-5fd6-453f-8ccfb4a62e46","type":"Image","tag":"img","classes":["19978d40-05ae-d82b-271a-78ff7f4f31ba"],"children":[],"data":{"attr":{"src":"https://cdn.prod.website-files.com/6493377f1a80e7fd23cf1812/64b4304d8883c0cbf9d18297_Pause-button.svg","loading":"lazy","height":"auto","width":"auto","alt":"__wf_reserved_inherit"},"img":{"id":"6500717d9db2c329b4efc580"},"xattr":[{"name":"ct-audio-control","value":"pause-icon"}]}},{"_id":"1c02fe63-d5c3-5fd6-453f-8ccfb4a62e47","type":"Image","tag":"img","classes":["19978d40-05ae-d82b-271a-78ff7f4f31ba"],"children":[],"data":{"img":{"id":"6500717d9db2c329b4efc586"},"attr":{"src":"https://cdn.prod.website-files.com/6493377f1a80e7fd23cf1812/64b541f67cabeaaa12ebc675_Play%20Icon.svg","loading":"lazy","height":"auto","width":"auto","alt":"__wf_reserved_inherit"},"xattr":[{"name":"ct-audio-control","value":"play-icon"}]}},{"_id":"1c02fe63-d5c3-5fd6-453f-8ccfb4a62e48","type":"Block","tag":"div","classes":["771028d2-e69d-d3d8-a266-5d8403e4b58f"],"children":["1c02fe63-d5c3-5fd6-453f-8ccfb4a62e49","1c02fe63-d5c3-5fd6-453f-8ccfb4a62e4b","1c02fe63-d5c3-5fd6-453f-8ccfb4a62e4d"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"1c02fe63-d5c3-5fd6-453f-8ccfb4a62e49","type":"Block","tag":"div","classes":["b715d87a-f036-a9d6-78ea-e00c2c5d3489"],"children":["1c02fe63-d5c3-5fd6-453f-8ccfb4a62e4a"],"data":{"search":{"exclude":false},"xattr":[{"name":"ct-audio-time","value":"current"}],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"1c02fe63-d5c3-5fd6-453f-8ccfb4a62e4a","text":true,"v":"00:00"},{"_id":"1c02fe63-d5c3-5fd6-453f-8ccfb4a62e4b","type":"Block","tag":"div","classes":["b715d87a-f036-a9d6-78ea-e00c2c5d3489"],"children":["1c02fe63-d5c3-5fd6-453f-8ccfb4a62e4c"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"1c02fe63-d5c3-5fd6-453f-8ccfb4a62e4c","text":true,"v":"/"},{"_id":"1c02fe63-d5c3-5fd6-453f-8ccfb4a62e4d","type":"Block","tag":"div","classes":["b715d87a-f036-a9d6-78ea-e00c2c5d3489"],"children":["1c02fe63-d5c3-5fd6-453f-8ccfb4a62e4e"],"data":{"search":{"exclude":false},"xattr":[{"name":"ct-audio-time","value":"total"}],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"1c02fe63-d5c3-5fd6-453f-8ccfb4a62e4e","text":true,"v":"00:00"},{"_id":"1c02fe63-d5c3-5fd6-453f-8ccfb4a62e52","type":"Block","tag":"div","classes":["50c8c05d-8a14-49d9-81bb-8f582b178ee3","c221f816-ab48-28dc-bc4a-716f634167f8"],"children":["1c02fe63-d5c3-5fd6-453f-8ccfb4a62e53"],"data":{"search":{"exclude":false},"xattr":[{"name":"ct-audio-progress","value":"wrapper"}],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"1c02fe63-d5c3-5fd6-453f-8ccfb4a62e53","type":"Block","tag":"div","classes":["a57908e9-a5f0-5a21-3fba-47e05d9d3602","31587e16-98b6-985d-de8e-521d273c53f1"],"children":[],"data":{"xattr":[{"name":"ct-audio-progress","value":"line"}],"text":false,"tag":"div"}},{"_id":"3f10de83-d2ef-d5e7-b5e2-cfab301cc687","type":"Block","tag":"div","classes":["0ceaff85-7152-847c-29e0-1cf819221c79"],"children":["1c02fe63-d5c3-5fd6-453f-8ccfb4a62e4f","199b6d2c-4b36-dc80-11bf-7425fbb3f976"],"data":{"tag":"div","text":false}},{"_id":"1c02fe63-d5c3-5fd6-453f-8ccfb4a62e4f","type":"Block","tag":"div","classes":["c2d85406-ecd6-84b5-180d-af4d7acc6545"],"children":["1c02fe63-d5c3-5fd6-453f-8ccfb4a62e50","1c02fe63-d5c3-5fd6-453f-8ccfb4a62e51"],"data":{"search":{"exclude":false},"xattr":[{"name":"ct-audio-mute","value":""}],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"1c02fe63-d5c3-5fd6-453f-8ccfb4a62e50","type":"Image","tag":"img","classes":["19978d40-05ae-d82b-271a-78ff7f4f31ba"],"children":[],"data":{"attr":{"src":"https://cdn.prod.website-files.com/6493377f1a80e7fd23cf1812/64b4300cc23603e56fc9bb9b_Icon-Sound%20(1).svg","loading":"lazy","height":"auto","width":"auto","alt":"__wf_reserved_inherit"},"img":{"id":"6500717d9db2c329b4efc57f"},"xattr":[{"name":"ct-audio-control","value":"mute-icon"}]}},{"_id":"1c02fe63-d5c3-5fd6-453f-8ccfb4a62e51","type":"Image","tag":"img","classes":["19978d40-05ae-d82b-271a-78ff7f4f31ba"],"children":[],"data":{"img":{"id":"6500717d9db2c329b4efc585"},"attr":{"src":"https://cdn.prod.website-files.com/6493377f1a80e7fd23cf1812/64b541f2d4242575cd8fc297_Unmute.svg","loading":"lazy","height":"auto","width":"auto","alt":"__wf_reserved_inherit"},"xattr":[{"name":"ct-audio-control","value":"unmute-icon"}]}},{"_id":"199b6d2c-4b36-dc80-11bf-7425fbb3f976","type":"Block","tag":"div","classes":["665f6935-a0cb-4d15-b51a-412df06fc834"],"children":["199b6d2c-4b36-dc80-11bf-7425fbb3f977"],"data":{"search":{"exclude":false},"xattr":[{"name":"ct-audio-volume","value":"wrapper"}],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"199b6d2c-4b36-dc80-11bf-7425fbb3f977","type":"Block","tag":"div","classes":["30ff6ba4-ba61-2db1-7eb3-7a91c4cd704b","d700ceb5-3c4d-2d9f-fb53-90d7a4fad4df"],"children":["199b6d2c-4b36-dc80-11bf-7425fbb3f978"],"data":{"search":{"exclude":false},"xattr":[{"name":"ct-audio-volume","value":"track"}],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"199b6d2c-4b36-dc80-11bf-7425fbb3f978","type":"Block","tag":"div","classes":["90a1e69b-f9c9-22e3-a74e-0b0175d094a9"],"children":[],"data":{"xattr":[{"name":"ct-audio-volume","value":"handle"}],"text":false,"tag":"div"}},{"_id":"adb98b67-7cf5-1c1b-a35e-794c5ebab383","type":"HtmlEmbed","tag":"div","classes":[],"children":[],"v":"\n<script src=\"https://cdn.jsdelivr.net/gh/manuelogomigo/flowscriipt/sound-and-control/script.js\"></script>","data":{"insideRTE":false,"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"\n<script src=\"https://cdn.jsdelivr.net/gh/manuelogomigo/flowscriipt/sound-and-control/script.js\"></script>","div":false,"iframe":false,"script":true,"compilable":false}}}},{"_id":"ec85c2d5-b43d-257d-53e0-7fdf2900e56b","type":"Block","tag":"div","classes":["cb66b330-f923-23d0-7bd2-59d33b83ca95"],"children":["ec85c2d5-b43d-257d-53e0-7fdf2900e56c","ec85c2d5-b43d-257d-53e0-7fdf2900e56d","ec85c2d5-b43d-257d-53e0-7fdf2900e56f","ec85c2d5-b43d-257d-53e0-7fdf2900e570","ec85c2d5-b43d-257d-53e0-7fdf2900e572"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"ec85c2d5-b43d-257d-53e0-7fdf2900e56c","text":true,"v":"This component will only work"},{"_id":"ec85c2d5-b43d-257d-53e0-7fdf2900e56d","type":"Strong","tag":"strong","classes":[],"children":["ec85c2d5-b43d-257d-53e0-7fdf2900e56e"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"ec85c2d5-b43d-257d-53e0-7fdf2900e56e","text":true,"v":" "},{"_id":"ec85c2d5-b43d-257d-53e0-7fdf2900e56f","text":true,"v":"on the published/exported site. Full documentation in Flowscriipt "},{"_id":"ec85c2d5-b43d-257d-53e0-7fdf2900e570","type":"Link","tag":"a","classes":[],"children":["ec85c2d5-b43d-257d-53e0-7fdf2900e571"],"data":{"search":{"exclude":false},"xattr":[],"block":"","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"target":"_blank","href":"http://finsweet.com/","id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"https://www.flowscriipt.com/library/sounds","target":"_blank"}}},{"_id":"ec85c2d5-b43d-257d-53e0-7fdf2900e571","text":true,"v":"Library docs"},{"_id":"ec85c2d5-b43d-257d-53e0-7fdf2900e572","text":true,"v":"."}],"styles":[{"_id":"c7a59ed5-aa14-2cbb-c2e1-6c9f23b0b4c8","fake":false,"type":"class","name":"sound-details","namespace":"","comb":"","styleLess":"display: flex; grid-column-gap: 0.75em; line-height: 1.6;","variants":{"medium":{"styleLess":"flex-grow: 0; flex-shrink: 0; flex-basis: auto;"}},"children":[],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"5a72b1b3-f7f6-c2ca-a17d-34640157ff45","fake":false,"type":"class","name":"wrapper-control","namespace":"","comb":"","styleLess":"display: flex; align-items: center; grid-column-gap: 0.5em;","variants":{},"children":[],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"50c8c05d-8a14-49d9-81bb-8f582b178ee3","fake":false,"type":"class","name":"line-wrapper","namespace":"","comb":"","styleLess":"position: fixed; left: 0%; top: 0%; right: 0%; bottom: auto; width: 100%; height: 0.6em;","variants":{},"children":["c221f816-ab48-28dc-bc4a-716f634167f8"],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"c2d85406-ecd6-84b5-180d-af4d7acc6545","fake":false,"type":"class","name":"control","namespace":"","comb":"","styleLess":"overflow: hidden; width: 2em; height: 2em; cursor: pointer;","variants":{},"children":["6daeab17-2677-d31e-f255-6bb99398df27"],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"c3d449d0-3936-e923-1f9e-9792fd6ba8db","fake":false,"type":"class","name":"card-sound-wrapper 2","namespace":"","comb":"","styleLess":"display: flex; width: 100%; flex-direction: column; grid-row-gap: 0.75em;","variants":{},"children":[],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"31587e16-98b6-985d-de8e-521d273c53f1","fake":false,"type":"class","name":"dark","namespace":"","comb":"&","styleLess":"background-color: hsla(216, 10.64%, 9.22%, 1.00);","variants":{},"children":[],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"cb66b330-f923-23d0-7bd2-59d33b83ca95","fake":false,"type":"class","name":"component_message","namespace":"","comb":"","styleLess":"margin-bottom: 16px; color: hsla(0, 0.00%, 60.78%, 1.00);","variants":{},"children":["16e614a1-132f-752c-1b0f-764cdc9ce2f7"],"selector":null},{"_id":"90a1e69b-f9c9-22e3-a74e-0b0175d094a9","fake":false,"type":"class","name":"sd-slider-track 2","namespace":"","comb":"","styleLess":"position: absolute; left: auto; top: auto; right: auto; bottom: auto; width: 1.25em; height: 1.25em; border-top-left-radius: 500em; border-top-right-radius: 500em; border-bottom-left-radius: 500em; border-bottom-right-radius: 500em; background-color: hsla(216, 10.64%, 9.22%, 1.00);","variants":{},"children":["e7cf4d89-e721-0b69-c84d-984c73695cf8"],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"674b348c-be41-0bf1-cf0f-dd059f2365a0","fake":false,"type":"class","name":"text-col-wrapper","namespace":"","comb":"","styleLess":"display: flex; width: 100%; flex-direction: column;","variants":{},"children":["bc87a662-f576-264d-4e7f-4ff85e673f23"],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"665f6935-a0cb-4d15-b51a-412df06fc834","fake":false,"type":"class","name":"sd-slider-wrapper 2","namespace":"","comb":"","styleLess":"position: relative; width: 5rem; height: 0.75em; border-top-left-radius: 500em; border-top-right-radius: 500em; border-bottom-left-radius: 500em; border-bottom-right-radius: 500em; background-color: hsla(213.33333333333331, 0.00%, 80.40%, 1.00);","variants":{"tiny":{"styleLess":"width: 4rem;"}},"children":["15ba8468-8ad5-e9f0-2e71-cfd9ad237f25"],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"0706795a-66d2-3eb2-a11c-fdf30a458f8a","fake":false,"type":"class","name":"sound-control","namespace":"","comb":"","styleLess":"position: relative; display: flex; overflow: hidden; width: 100%; padding-top: 0.5em; padding-right: 0.5em; padding-bottom: 0.5em; padding-left: 0.5em; justify-content: space-between; align-items: center; border-top-left-radius: 0.25em; border-top-right-radius: 0.25em; border-bottom-left-radius: 0.25em; border-bottom-right-radius: 0.25em; background-color: hsla(0, 0.00%, 100.00%, 1.00);","variants":{},"children":[],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"19978d40-05ae-d82b-271a-78ff7f4f31ba","fake":false,"type":"class","name":"svg-icon_2em","namespace":"","comb":"","styleLess":"width: 2em; height: 2em;","variants":{},"children":["bc65ab37-1019-88d5-7450-3ec29ac725e1","0332e566-8176-5585-5322-78c89e8c789f"],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"b76eff1c-ed93-6029-3277-b0128706e073","fake":false,"type":"class","name":"audio-element","namespace":"","comb":"","styleLess":"display: flex; margin-right: auto; margin-left: auto; flex-direction: column; align-items: center; grid-column-gap: 1rem; grid-row-gap: 1rem;","variants":{},"children":[],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"83ab7a08-0401-0b7f-ba3c-38f6d10a1287","fake":false,"type":"class","name":"font_medium","namespace":"","comb":"","styleLess":"font-weight: 500;","variants":{},"children":[],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"0ceaff85-7152-847c-29e0-1cf819221c79","fake":false,"type":"class","name":"volume-control 1","namespace":"","comb":"","styleLess":"display: flex; align-items: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; grid-column-gap: 1em;","variants":{"tiny":{"styleLess":""},"small":{"styleLess":""}},"children":[],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"771028d2-e69d-d3d8-a266-5d8403e4b58f","fake":false,"type":"class","name":"duration","namespace":"","comb":"","styleLess":"display: flex; grid-column-gap: 0.2em; font-size: 0.875em;","variants":{},"children":[],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"30ff6ba4-ba61-2db1-7eb3-7a91c4cd704b","fake":false,"type":"class","name":"sd-slider","namespace":"","comb":"","styleLess":"position: relative; display: flex; width: 30%; height: 100%; justify-content: flex-end; align-items: center; border-top-left-radius: 500em; border-top-right-radius: 500em; border-bottom-left-radius: 500em; border-bottom-right-radius: 500em; background-color: #696b6e;","variants":{},"children":["d700ceb5-3c4d-2d9f-fb53-90d7a4fad4df"],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"ba0132ee-7e29-4c1d-edad-c4ae56585f0c","fake":false,"type":"class","name":"audio-card","namespace":"","comb":"","styleLess":"display: flex; width: 100%; max-width: 28rem; padding-top: 1em; padding-right: 1em; padding-bottom: 1em; padding-left: 1em; flex-direction: column; border-top-style: solid; border-top-width: 0.0625em; border-top-color: hsla(0, 0.00%, 95.00%, 1.00); border-right-style: solid; border-right-width: 0.0625em; border-right-color: hsla(0, 0.00%, 95.00%, 1.00); border-bottom-style: solid; border-bottom-width: 0.0625em; border-bottom-color: hsla(0, 0.00%, 95.00%, 1.00); border-left-style: solid; border-left-width: 0.0625em; border-left-color: hsla(0, 0.00%, 95.00%, 1.00); border-top-left-radius: 1em; border-top-right-radius: 1em; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; background-color: #fafafa; transition-property: box-shadow, transform; transition-duration: 400ms, 400ms; transition-timing-function: ease, ease;","variants":{"main_hover":{"styleLess":"box-shadow: 0 2px 0.45em 0 hsla(0, 0.00%, 33.48%, 0.11); transform: scale(1.02);"}},"children":["f8e03eee-fd4f-000a-eeea-25d1c86c11bf","4d505f0c-6d26-089b-2318-68cc1c51d45c","36c92545-c374-06f6-792a-352259dc941b","07eac818-16cc-44ed-8fb1-d4e453839e5c","44991968-b68d-7af0-a3c5-11caeea2ea55","a0ecb06b-7e0c-5cb2-8e16-de7dd9b0242e"],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"b5a7214d-175d-c9a8-df93-6c6b777b2d01","fake":false,"type":"class","name":"sound-cover","namespace":"","comb":"","styleLess":"overflow: hidden; width: 3em; height: 3em; flex-grow: 0; flex-shrink: 0; flex-basis: auto; border-top-left-radius: 0.25em; border-top-right-radius: 0.25em; border-bottom-left-radius: 0.25em; border-bottom-right-radius: 0.25em; background-color: #e9e9e9;","variants":{},"children":[],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"a57908e9-a5f0-5a21-3fba-47e05d9d3602","fake":false,"type":"class","name":"line","namespace":"","comb":"","styleLess":"width: 0%; height: 100%; background-color: hsla(289.99999999999994, 100.00%, 77.65%, 1.00);","variants":{},"children":["3edc8c6c-36bc-a5fa-a698-cf71d80ebd45","31587e16-98b6-985d-de8e-521d273c53f1","ddb65865-2dae-e68f-f088-ffe3024dede7"],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"c221f816-ab48-28dc-bc4a-716f634167f8","fake":false,"type":"class","name":"is-2","namespace":"","comb":"&","styleLess":"position: absolute; left: 0%; top: auto; right: 0%; bottom: 0%;","variants":{},"children":[],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"b715d87a-f036-a9d6-78ea-e00c2c5d3489","fake":false,"type":"class","name":"font_small","namespace":"","comb":"","styleLess":"font-size: 0.875em; line-height: 1.25;","variants":{},"children":["699d14b3-d2d5-3c3c-e7f4-0fac32ac70c7"],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"d700ceb5-3c4d-2d9f-fb53-90d7a4fad4df","fake":false,"type":"class","name":"is-1","namespace":"","comb":"&","styleLess":"","variants":{},"children":[],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"83c32d36-b2b4-9f16-16bf-51b2af8f0cfd","fake":false,"type":"class","name":"h-w-100","namespace":"","comb":"","styleLess":"width: 100%; height: 100%;","variants":{},"children":["0cb24c42-c4ff-58e5-5cae-1677e3dea8f4"],"createdBy":"61f476eebc83e27188ab6890","selector":null}],"assets":[{"cdnUrl":"https://cdn.prod.website-files.com/6493377f1a80e7fd23cf1812/64b662356e64fe4278ce55cb_Never%20gonna%20give%20yu%20%20up.png","siteId":"6493377f1a80e7fd23cf1812","width":48,"isHD":false,"height":48,"fileName":"64b662356e64fe4278ce55cb_Never gonna give yu up.png","createdOn":"2023-07-18T09:58:13.023Z","origFileName":"Never gonna give yu up.png","alt":"Never gonna give you up by Rick Astley","fileHash":"63cd4af3e40105c0c47fb907303a1096","variants":[],"mimeType":"image/png","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/6493377f1a80e7fd23cf1812/64b662356e64fe4278ce55cb_Never%20gonna%20give%20yu%20%20up.png","thumbUrl":"https://cdn.prod.website-files.com/6493377f1a80e7fd23cf1812/64b662356e64fe4278ce55cb_Never%20gonna%20give%20yu%20%20up.png","_id":"6500717d9db2c329b4efc587","updatedOn":"2023-09-12T14:11:09.438Z","fileSize":5858,"localizedSettings":{}},{"cdnUrl":"https://cdn.prod.website-files.com/6493377f1a80e7fd23cf1812/64b4304d8883c0cbf9d18297_Pause-button.svg","siteId":"6493377f1a80e7fd23cf1812","width":33,"isHD":false,"height":33,"fileName":"64b4304d8883c0cbf9d18297_Pause-button.svg","createdOn":"2023-07-16T18:00:45.375Z","origFileName":"Pause-button.svg","alt":"Pause Icon\n","fileHash":"c64d1e563b3719cd0f609a0b3f3c1e85","variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/6493377f1a80e7fd23cf1812/64b4304d8883c0cbf9d18297_Pause-button.svg","thumbUrl":"https://cdn.prod.website-files.com/6493377f1a80e7fd23cf1812/64b4304d8883c0cbf9d18297_Pause-button.svg","_id":"6500717d9db2c329b4efc580","updatedOn":"2023-09-12T14:11:09.438Z","fileSize":1011,"localizedSettings":{}},{"cdnUrl":"https://cdn.prod.website-files.com/6493377f1a80e7fd23cf1812/64b541f67cabeaaa12ebc675_Play%20Icon.svg","siteId":"6493377f1a80e7fd23cf1812","width":33,"isHD":false,"height":33,"fileName":"64b541f67cabeaaa12ebc675_Play Icon.svg","createdOn":"2023-07-17T13:28:22.499Z","origFileName":"Play Icon.svg","alt":"Play Icon","fileHash":"5c65df8a13a8e10502349c1eb30228be","variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/6493377f1a80e7fd23cf1812/64b541f67cabeaaa12ebc675_Play%20Icon.svg","thumbUrl":"https://cdn.prod.website-files.com/6493377f1a80e7fd23cf1812/64b541f67cabeaaa12ebc675_Play%20Icon.svg","_id":"6500717d9db2c329b4efc586","updatedOn":"2023-09-12T14:11:09.438Z","fileSize":473,"localizedSettings":{}},{"cdnUrl":"https://cdn.prod.website-files.com/6493377f1a80e7fd23cf1812/64b4300cc23603e56fc9bb9b_Icon-Sound%20(1).svg","siteId":"6493377f1a80e7fd23cf1812","width":33,"isHD":false,"height":33,"fileName":"64b4300cc23603e56fc9bb9b_Icon-Sound (1).svg","createdOn":"2023-07-16T17:59:40.764Z","origFileName":"Icon-Sound (1).svg","alt":"Mute Icon","fileHash":"da7bafb8d9e25c10010fffedb3284aa3","variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/6493377f1a80e7fd23cf1812/64b4300cc23603e56fc9bb9b_Icon-Sound%20(1).svg","thumbUrl":"https://cdn.prod.website-files.com/6493377f1a80e7fd23cf1812/64b4300cc23603e56fc9bb9b_Icon-Sound%20(1).svg","_id":"6500717d9db2c329b4efc57f","updatedOn":"2023-09-12T14:11:09.438Z","fileSize":3599,"localizedSettings":{}},{"cdnUrl":"https://cdn.prod.website-files.com/6493377f1a80e7fd23cf1812/64b541f2d4242575cd8fc297_Unmute.svg","siteId":"6493377f1a80e7fd23cf1812","width":33,"isHD":false,"height":33,"fileName":"64b541f2d4242575cd8fc297_Unmute.svg","createdOn":"2023-07-17T13:28:18.368Z","origFileName":"Unmute.svg","fileHash":"785417b0ebfb58766c5c7b45ddaa21dd","variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/6493377f1a80e7fd23cf1812/64b541f2d4242575cd8fc297_Unmute.svg","thumbUrl":"https://cdn.prod.website-files.com/6493377f1a80e7fd23cf1812/64b541f2d4242575cd8fc297_Unmute.svg","_id":"6500717d9db2c329b4efc585","updatedOn":"2023-09-12T14:11:09.438Z","fileSize":3821,"localizedSettings":{}}],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}

Similar Components

Onboarding 2 - Multiforms

Multi-forms

Feedback Widget 2

Multi-forms

Input Stepper (Increase & Decrease)

Multi-forms

View all Components

Beta Testing

Get Flowscriipt Pro

Monthly Plan

$17

$37

What you'll get:

Access to all Pro Libraries

Lifetime Access & Updates

Private Support

Access to ChatGPT Prompts for webflow

Webflow Components

Get Flowscriipt

Cancel Anytime

Lifetime deal

$97

$127

What you'll get:

Access to all Pro Libraries

Lifetime Access & Updates

Private Support

Access to ChatGPT Prompts for webflow

Webflow and HTML Components

Discounts on Flowscriip Products

Popular

Get Flowscriipt

Affiliate - 35% Commission

Join Flowscriipt Affiliate Campaign and get 35% commission sharing flowscriipt to your clients - Paid Orders

Become an Affiliate

Frequently asked Questions

Hosting outside webflow, can I still use it?

Yes, as long as you add the attributes in the docs to your html attributes it will work just as webflow.

Can I get a refund?

Yes! You can request a refund within 7 days of your purchase. Reach out on Twitter or by email at manuel@flowscriipt.com

If I purchase just one Pro Library, do I have access to the rest?

If you purchase just one pro library eg, Flowscriipt Forms you'd only have access to the multiform library.

Do you provide support?

Absolutely, I'd love to hear any feedback or question you might have. Just reach out to me on my twitter or email — don't hesitate!

Do I get updates if I purchase lifetime?

Yeah sure, you have access to new updates and new library if you purchase the lifetime deal.

Is Flowscriipt Free?

Yeah there are free libraries to add functionalities to your Webflow site, and take it to the next level with the pro library.

Is any coding knowledge required?

Absolutely none! But two things are needed though COPY & PASTE :)