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

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(
        <div className='container'>
            <AudioPlayer
                className="AudioPlayerExample"
                customData='Example'
                onInteraction={interactionEvent}
                src="https://res.cloudinary.com/dcldwtvku/video/upload/v1646757629/Sipster/waves_eq05zf.mp3"
              />
        </div>
    );
}

Components Dependency

For this component elaboration, the following internal components were used:

• Slider

• Button

Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.​

React

Storybook