"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[35258],{35258:(n,e,t)=>{t.r(e),t.d(e,{default:()=>o});var s=t(67841),a=t(89207);let o=()=>(0,s.jsx)(a.default,{title:"Rising Pitch Demo",layout:"split",size:"wide",splitRatio:.65,minPreviewHeight:"12rem",dependencies:{"use-sound":"4.0.3"},files:{"/App.js":"\nimport React from 'react';\nimport useSound from 'use-sound';\n\nimport styles from './RisingDemo.module.css';\n\nfunction RisingDemo() {\n  const soundUrl = '/sounds/glug-a.mp3';\n\n  const [playbackRate, setPlaybackRate] = React.useState(0.75);\n\n  const [play] = useSound(soundUrl, {\n    playbackRate,\n    volume: 0.5,\n  });\n\n  const handleClick = () => {\n    setPlaybackRate(playbackRate + 0.1);\n    play();\n  };\n\n  return (\n    <button className={styles.btn} onClick={handleClick}>\n      <span role=\"img\" aria-label=\"Like this post\">\n        \uD83D\uDC96\n      </span>\n    </button>\n  );\n}\n\nexport default RisingDemo;\n        ","/RisingDemo.module.css":{hidden:!0,code:"\n.btn {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: inline-flex;\n  align-items: center;\n  padding: 16px;\n  border: none;\n  border-radius: 1000px;\n  background: transparent;\n  font-size: 4rem;\n  font-weight: var(--font-weight-bold);\n  filter:\n    drop-shadow(1px 2px 2px hsl(0deg 0% 0% / 0.25))\n    drop-shadow(3px 6px 6px hsl(0deg 0% 0% / 0.175));\n}\n.btn span {\n  transform-origin: center center;\n}\n.btn:active span {\n  transform: scale(1.1);\n}"}}})}}]);
//# sourceMappingURL=35258.b8c56aa50a4d94c4.js.map