var Component=(()=>{var m=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var g=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),w=(a,e)=>{for(var s in e)c(a,s,{get:e[s],enumerable:!0})},i=(a,e,s,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of h(e))!k.call(a,l)&&l!==s&&c(a,l,{get:()=>e[l],enumerable:!(t=u(e,l))||t.enumerable});return a};var y=(a,e,s)=>(s=a!=null?m(N(a)):{},i(e||!a||!a.__esModule?c(s,"default",{value:a,enumerable:!0}):s,a)),b=a=>i(c({},"__esModule",{value:!0}),a);var r=g((P,o)=>{o.exports=_jsx_runtime});var x={};w(x,{default:()=>d,frontmatter:()=>f});var n=y(r()),f={title:"How to Create an Audio Sample Player in React",description:"A blog post on how to create an audio sample player in react.",date:"2025-03-28",summary:"Ever wanted to build your own audio sample player in React? Whether you're a music producer, sound designer, or just someone who loves working with audio, creating a custom player can give you more control over how you share and experience sounds. In this blog, I'll show you how to create an audio sample player using @wavesurfer/react.",imageUrl:"https://images.jordanwu.xyz/posts/2025-03-28-how-to-create-an-audio-sample-player-in-react/frank-mckenna-4V8JxijgZ_c-unsplash.jpg",imageDescription:"San Diego Beach Sunrise Image.",tags:["music_production"]};function p(a){let e={a:"a",code:"code",h2:"h2",p:"p",path:"path",pre:"pre",span:"span",strong:"strong",svg:"svg",...a.components},{AudioSamplePlayer:s}=e;return s||v("AudioSamplePlayer",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.h2,{id:"what-is-a-audio-sample-player",children:["What is a Audio Sample Player",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",className:"icon icon-link",href:"#what-is-a-audio-sample-player",children:(0,n.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",version:"1.1",width:"16",height:"16","aria-hidden":"true",fill:"currentColor",children:(0,n.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),` `,(0,n.jsxs)(e.p,{children:["An ",(0,n.jsx)(e.strong,{children:"audio sample player"})," is a tool used to load, play, and manipulate audio samples, including drums, loops, vocals, synths, one-shots, effects, and instruments. Widely used in music production, sound design, and live performances, it allows users to trigger sounds, adjust pitch and tempo, apply looping, and map samples to keys or pads for seamless playback. These players are essential across various creative industries, enabling musicians, producers, and content creators to explore new sounds and enhance their projects with dynamic audio elements."]}),` `,(0,n.jsxs)(e.h2,{id:"wavesurferjs",children:["Wavesurfer.js",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",className:"icon icon-link",href:"#wavesurferjs",children:(0,n.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",version:"1.1",width:"16",height:"16","aria-hidden":"true",fill:"currentColor",children:(0,n.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.a,{href:"https://wavesurfer.xyz/",children:"Wavesurfer.js"})," is a lightweight JavaScript library for visualizing and interacting with audio waveforms in web applications using HTML5 and the Web Audio API. It enables customizable waveform displays, audio playback controls, and features like markers, looping, and spectrograms. With support for plugins and responsive design, it\u2019s widely used in music players, podcast tools, and audio editing applications, making it a powerful choice for web-based audio visualization and manipulation."]}),` `,(0,n.jsxs)(e.h2,{id:"create-audio-sample-player-react-component",children:["Create Audio Sample Player React Component",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",className:"icon icon-link",href:"#create-audio-sample-player-react-component",children:(0,n.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",version:"1.1",width:"16",height:"16","aria-hidden":"true",fill:"currentColor",children:(0,n.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),` `,(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.a,{href:"https://github.com/katspaugh/wavesurfer-react",children:"@wavesurfer/react"})," library makes it easy to integrate Wavesurfer.js into React applications. We\u2019ll use it to build a simple audio sample player component that plays back sound samples. This component will be especially useful for sound designers looking to share their samples with creators."]}),` `,(0,n.jsx)(e.p,{children:"First install all the dependencies for this component."}),` `,(0,n.jsx)(e.pre,{className:"language-shell",packageManager:"pnpm",children:(0,n.jsx)(e.code,{className:"language-shell code-highlight",children:(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[(0,n.jsx)(e.span,{className:"token function",children:"pnpm"})," ",(0,n.jsx)(e.span,{className:"token function",children:"add"}),` wavesurfer.js @wavesurfer/react `]})})}),` `,(0,n.jsx)(e.p,{children:"Next create the audio sample player component."}),` `,(0,n.jsx)(e.pre,{className:"language-tsx",filename:"audio-sample-player.tsx",children:(0,n.jsxs)(e.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," useState ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'react'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"WavesurferPlayer"})})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'@wavesurfer/react'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"3",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PauseIcon"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PlayIcon"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'@/components/icons'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"4",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"WaveSurfer"})})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'wavesurfer.js'"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"5",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"6",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"type"})," ",(0,n.jsx)(e.span,{className:"token class-name",children:"AudioSamplePlayerProps"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"7",children:[" url",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"string"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"8",children:[" name",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"string"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"9",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"10",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"11",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"default"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:"AudioSamplePlayer"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"props",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"AudioSamplePlayerProps"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"12",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," url",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," name ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="}),` props `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"13",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"wavesurfer",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," setWavesurfer",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsxs)(e.span,{className:"token generic-function",children:[(0,n.jsx)(e.span,{className:"token function",children:"useState"}),(0,n.jsxs)(e.span,{className:"token generic class-name",children:[(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"WaveSurfer ",(0,n.jsx)(e.span,{className:"token operator",children:"|"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"null"}),(0,n.jsx)(e.span,{className:"token operator",children:">"})]})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token keyword",children:"null"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"14",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"isPlaying",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," setIsPlaying",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"useState"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token boolean",children:"false"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"15",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"16",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token function-variable function",children:"handleReady"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"ws",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"WaveSurfer"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"17",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"setWavesurfer"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"ws",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"18",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"setIsPlaying"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token boolean",children:"false"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"19",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"20",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"21",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token function-variable function",children:"handlePlayPause"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"22",children:[" wavesurfer",(0,n.jsx)(e.span,{className:"token operator",children:"?."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"playPause"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"23",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"24",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"25",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token function-variable function",children:"handleFinish"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"26",children:[" wavesurfer",(0,n.jsx)(e.span,{className:"token operator",children:"?."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"seekTo"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token number",children:"0"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"27",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"setIsPlaying"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token boolean",children:"false"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"28",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"29",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"30",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"31",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"!mt-6 flex flex-col text-center",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"32",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"flex justify-center",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"33",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"button"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"w-[24px]",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"onClick"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"handlePlayPause",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"34",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"isPlaying ",(0,n.jsx)(e.span,{className:"token operator",children:"?"})," ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"PauseIcon"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"size"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token number",children:"20"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]})," ",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"PlayIcon"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"size"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token number",children:"20"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"35",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"36",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"WavesurferPlayer"})]}),` `]})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"37",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"backend"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"WebAudio",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"38",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"height"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token number",children:"35"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"39",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"width"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token number",children:"250"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"40",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"cursorWidth"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token number",children:"0"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"41",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"waveColor"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"#a1a1a1",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"42",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"progressColor"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"#fefefa",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"43",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"url"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"url",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"44",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"onReady"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"handleReady",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"45",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"onPlay"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token function",children:"setIsPlaying"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token boolean",children:"true"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"46",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"onPause"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token function",children:"setIsPlaying"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token boolean",children:"false"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"47",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"onFinish"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"handleFinish",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"48",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"49",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"50",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"p"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"!m-2 text-sm",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"name",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"51",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"52",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"53",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,n.jsx)(e.p,{children:"Now to use the component."}),` `,(0,n.jsx)(e.pre,{className:"language-ts",children:(0,n.jsx)(e.code,{className:"language-ts code-highlight",children:(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"AudioSamplePlayer url",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"/audio.wav"'})," name",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"Melodic Loop - 178bpm Bm"'})," ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]})})}),` `,(0,n.jsx)("div",{className:"flex justify-center",children:(0,n.jsx)(s,{url:"https://tracks.jordanwu.xyz/posts/2025-03-28-how-to-create-an-audio-sample-player-in-react/XLNT-Xeno+-+Melodic+Loop+37+-+176bpm+-+Bm.wav",name:"Medloic Loop - 178bpm Bm"})}),` `,(0,n.jsxs)(e.h2,{id:"summary",children:["Summary",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",className:"icon icon-link",href:"#summary",children:(0,n.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",version:"1.1",width:"16",height:"16","aria-hidden":"true",fill:"currentColor",children:(0,n.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),` `,(0,n.jsxs)(e.p,{children:["And that\u2019s it, you\u2019ve successfully built an audio sample player component! This is a powerful way to share sounds on a website and is widely used in applications for music production, sound design, and content creation. Platforms like ",(0,n.jsx)(e.a,{href:"https://splice.com/",children:"Splice"})," utilize audio sample players to showcase a vast library of sounds. Allowing users to preview and explore new samples before downloading. Whether you're browsing for new sounds or purchasing sound packs from designers, audio sample players are an essential tool in the creative industry."]}),` `,(0,n.jsx)(e.p,{children:"Hope you found this blog post helpful and feel inspired to explore new sounds! Here are a few of my favorite random sounds! Enjoy!"}),` `,(0,n.jsxs)("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 p-6",children:[(0,n.jsxs)("div",{children:[(0,n.jsx)(s,{url:"https://tracks.jordanwu.xyz/posts/2025-03-28-how-to-create-an-audio-sample-player-in-react/sport_basses_donk_02_Eb.wav",name:"BA - Donk Eb"}),(0,n.jsx)(s,{url:"https://tracks.jordanwu.xyz/posts/2025-03-28-how-to-create-an-audio-sample-player-in-react/XLNT-Xeno+-+Bass+Loop+34+-+174bpm+-+E.wav",name:"Bass Loop"}),(0,n.jsx)(s,{url:"https://tracks.jordanwu.xyz/posts/2025-03-28-how-to-create-an-audio-sample-player-in-react/XLNT-Xeno+-+FX+Atmos+Filler+12+-+A%23min.wav",name:"FX - Atmos Filler"}),(0,n.jsx)(s,{url:"https://tracks.jordanwu.xyz/posts/2025-03-28-how-to-create-an-audio-sample-player-in-react/DS_GREX_vocal_adlib_one_shot_runnit.wav",name:"Vocal - Run it"}),(0,n.jsx)(s,{url:"https://tracks.jordanwu.xyz/posts/2025-03-28-how-to-create-an-audio-sample-player-in-react/XLNT-Boombox+Cartel+-+Short+Siren+-+Reaper.wav",name:"FX - Siren"}),(0,n.jsx)(s,{url:"https://tracks.jordanwu.xyz/posts/2025-03-28-how-to-create-an-audio-sample-player-in-react/XLNT-Boombox+Cartel+-+Glass+Break+-+Reaper.wav",name:"FX - Glass Break"}),(0,n.jsx)(s,{url:"https://tracks.jordanwu.xyz/posts/2025-03-28-how-to-create-an-audio-sample-player-in-react/CRYSTALIZE_synth_chords_03_140_Dm.wav",name:"Synth Chord"})]}),(0,n.jsxs)("div",{children:[(0,n.jsx)(s,{url:"https://tracks.jordanwu.xyz/posts/2025-03-28-how-to-create-an-audio-sample-player-in-react/XLNT-Travis+Scott+808+-+Highest+In+The+Room+%5B+D+%5D.wav",name:"BA - 808"}),(0,n.jsx)(s,{url:"https://tracks.jordanwu.xyz/posts/2025-03-28-how-to-create-an-audio-sample-player-in-react/DS_VPT_fx_sub_drop_default.wav",name:"BA - Sub"}),(0,n.jsx)(s,{url:"https://tracks.jordanwu.xyz/posts/2025-03-28-how-to-create-an-audio-sample-player-in-react/DWILLY_bass_0xxr08cyclotron_01.wav",name:"BA - DWILLY"}),(0,n.jsx)(s,{url:"https://tracks.jordanwu.xyz/posts/2025-03-28-how-to-create-an-audio-sample-player-in-react/XLNT-Xeno+-+Tonal+Snare+14+-+F%23.wav",name:"Drum - Snare"}),(0,n.jsx)(s,{url:"https://tracks.jordanwu.xyz/posts/2025-03-28-how-to-create-an-audio-sample-player-in-react/XLNT-Boombox+Cartel+Build+Loop+-+Alamo+-+170bpm.wav",name:"Drum Build Loop"}),(0,n.jsx)(s,{url:"https://tracks.jordanwu.xyz/posts/2025-03-28-how-to-create-an-audio-sample-player-in-react/31-Audio+0001+%5B2024-10-09+145811%5D.wav",name:"Sample Loop"}),(0,n.jsx)(s,{url:"https://tracks.jordanwu.xyz/posts/2025-03-28-how-to-create-an-audio-sample-player-in-react/XLNT-Boombox+Cartel+-+Main+Bass+-+Reaper.wav",name:"BA - Growl"})]})]})]})}function d(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(p,{...a})}):p(a)}function v(a,e){throw new Error("Expected "+(e?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return b(x);})(); ;return Component;

Dreamer