---
title: "InnerAudioContext - Create an internal audio context object"
---

## InnerAudioContext

### Description

Create an internal audio context object

### Demo

<div style="display: flex; flex-direction: row; align-items: center; padding: 16px; background: #f9f9f9; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
    <img src="/images/qrCode/rayAudio.png" style="width: 100px; height: 100px; border-radius: 8px; border: 1px solid #e8e8e8; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"/>
    <div style="margin-left: 24px;">
        <div style="color: #262626; font-size: 16px; font-weight: 600; margin-bottom: 12px;">Scan with the Smart Life app to try it out</div>
        <a href="https://github.com/Tuya-Community/tuya-miniapp-demo/tree/master/rayAudio" style="font-size: 14px; color: #1890ff; text-decoration: none; display: inline-flex; align-items: center;">
            <span>Demo download URL</span>
            <span style="margin-left: 4px;">→</span>
        </a>
    </div>
</div>

### Code Example

#### Request Example

```jsx | pure
import {
  Button,
  View,
  createInnerAudioContext,
} from '@ray-js/ray'
import React, { FC, useRef, useState } from 'react'

function getRandomNumberMin(): number {
  return Math.floor(Math.random() * (200 - 100 + 1) + 100)
}

const autoplay = true
const loop = true
const playbackRate = 2
const AUDIO_PATH =
  'https://images.tuyacn.com/rms-static/cf60cb10-9f19-11ee-8cd8-b117287658f4-1703064369729.mp3?tyName=1.mp3'
const AUDIO_PATH2 =
  'https://images.tuyacn.com/rms-static/4681f900-9fa4-11ee-af19-cfa45f6de59e-1703123840144.mp3?tyName=2.mp3'

const AudioDemo: FC = () => {
  const audioContext = useRef(null)
  const [audioStatus, setAudioStatus] = useState<string>('')
  const [startTime, setStartTime] = useState<number>(0)

  const operation =
    (
      ops: 'play' | 'pause' | 'stop' | 'resume' | 'seek',
      params?: {
        startTime?: number
        [key: string]: any
      }
    ) =>
    () => {
      if (ops === 'play') {
        setStartTime(params.startTime)
      }
      setAudioStatus(ops)
      audioContext.current[ops]?.({
        ...params,
        success: (res) => console.log(`${ops} success`, res),
        fail: (res) => console.log(`${ops} fail`, res),
        complete: (res) => console.log(`${ops} complete`, res),
      })
    }

  return (
    <View style={{ padding: 20 }}>
      <Button
        type="primary"
        style={{ margin: 10 }}
        onClick={() => {
          audioContext.current = createInnerAudioContext({
            success: (res) => console.log('createInnerAudioContext success', res),
            fail: (res) => console.log('createInnerAudioContext fail', res),
            complete: () => console.log('createInnerAudioContext complete'),
          })

          audioContext.current.onTimeUpdate((res) => {
            console.log('onTimeUpdate callback', res)
          })
        }}
      >
        Create instance
      </Button>
      <Button type="primary" style={{ margin: 10 }} onClick={operation('destroy')}>
        Destroy
      </Button>
      <Button
        type="primary"
        style={{ margin: 10 }}
        onClick={operation('play', {
          src: AUDIO_PATH,
          autoplay,
          startTime: getRandomNumberMin(),
          loop,
          volume: 1,
          playbackRate,
        })}
      >
        Play track 1
      </Button>
      <Button
        type="primary"
        style={{ margin: 10 }}
        onClick={operation('play', {
          src: AUDIO_PATH2,
          autoplay,
          startTime: getRandomNumberMin(),
          loop,
          volume: 1,
          playbackRate,
        })}
      >
        Play track 2
      </Button>
      <Button type="primary" style={{ margin: 10 }} onClick={operation('pause')}>
        Pause
      </Button>
      <Button type="primary" style={{ margin: 10 }} onClick={operation('stop')}>
        Stop
      </Button>
      <Button type="primary" style={{ margin: 10 }} onClick={operation('resume')}>
        Resume playback
      </Button>

      <Button
        type="primary"
        style={{ margin: 10 }}
        onClick={operation('seek', { position: getRandomNumberMin() })}
      >
        Seek
      </Button>
      <View style={{ margin: 10 }}>Current status: {audioStatus}</View>
      <View style={{ margin: 10 }}>autoplay: {'' + autoplay}</View>
      <View style={{ margin: 10 }}>startTime: {'' + startTime}</View>
      <View style={{ margin: 10 }}>loop: {'' + loop}</View>
      <View style={{ margin: 10 }}>playbackRate: {'' + playbackRate}</View>
    </View>
  )
}

export default AudioDemo
```

#### Success Example

_onTimeUpdate_

```json
{
  "time": 0.05497835
}
```

#### Q: What is the difference between destroy and destroyPlayer?

A: destroy is deprecated. Use destroyPlayer instead.