# AudioPlayer Props (свойства) для компонента AudioPlayer: [{"name":"title","type":{"name":"string"}},{"name":"url","type":{"name":"string"}},{"name":"duration","type":{"name":"number"}},{"name":"isSelected","type":{"name":"boolean"}},{"name":"isPlaying","type":{"name":"boolean"}},{"name":"canDelete","type":{"name":"boolean"}},{"name":"onClick","type":{"name":"() => void"}},{"name":"onDelete","type":{"name":"() => void"}},{"name":"onPlay","type":{"name":"(event: MouseEvent<HTMLSpanElement, MouseEvent>) => void"}}] ## Использование
```tsx
import React, { useState, useCallback } from 'react';
import { AudioPlayer } from '@salutejs/plasma-web';
export function App() {
const song = {
name: 'I’m Not Okay',
duration: 128,
id: 123,
file: 'https://cdn1.newsback.sberdevices.ru/p-newsback/media/uploads/15/159f025fe48c54f70b7a4041edbb413044f01a61.mp3',
canDelete: true,
};
const [state, setState] = useState({
isSelected: false,
isPlaying: false,
});
const onSelect = useCallback(() => {
setState((prevState) => ({
...prevState,
isSelected: !prevState.isSelected,
}));
}, []);
const onPlay = useCallback(() => {
setState((prevState) => ({
...prevState,
isPlaying: !prevState.isPlaying,
}));
}, []);
const onDelete = useCallback((id) => {
alert(`Трек id:${id} будет удалён`);
}, []);
return (
<AudioPlayer
title={song.name}
duration={song.duration}
url={song.file}
isPlaying={state.isPlaying}
isSelected={state.isSelected}
canDelete={song.canDelete}
onClick={onSelect}
onDelete={() => onDelete(song.id)}
onPlay={(event) => {
event.stopPropagation();
onPlay();
}}
/>
);
}
```