> For the complete documentation index, see [llms.txt](https://2600hz.gitbook.io/sds/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2600hz.gitbook.io/sds/sds-components/simple-components/audio-player/code.md).
# Code
## Props
Props
Data Type
Required
className
string
❌
src
string (url to audio file)
mp3 file imported as a component
✅
customData
Any
❌
onInteraction
Function Event
❌
### Event Response
| Property | Data Type |
| ---------- | --------- |
| customData | any |
### Example
```tsx
import React, {useState} from 'react';
import {AudioPlayer} from '@2600hz/sds-react-components';
const AudioPlayer = ()=>{
const [newAudio, setNewAudio] = useState(true);
const updateAudioHistory = ()=>{
if(newAudio){
setNewAudio(false);
}
}
const interactionEvent(e){
console.log(e.customData);
}
return(
);
}
```
## Components Dependency
For this component elaboration, the following internal components were used:
* [Slider](/sds/sds-components/form-controls/slider.md)
* [Button](/sds/sds-components/simple-components/button.md)
## Live Demo
For detailed code usage documentation, see the Storybooks for each framework below.
### React
{% embed url="" %}