Skip to content

Commit

Permalink
feat(cientos/positional-audio): fix lint issue, wip doc
Browse files Browse the repository at this point in the history
  • Loading branch information
@damienmontastier
damienmontastier committed Mar 16, 2024
1 parent e0d8f41 commit 4e2b5fb
Show file tree
Hide file tree
Showing 5 changed files with 238 additions and 170 deletions.
85 changes: 54 additions & 31 deletions docs/.vitepress/theme/components/PositionalAudioDemo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,23 @@ const gl = {
}
const ready = ref(false)
const positionalAudioRef = shallowRef(null);
const positionalAudioRef = shallowRef(null)
const handlerAudio = (action: string) => {
if (!positionalAudioRef.value) return
const { play, pause, stop } = positionalAudioRef.value
if (action === 'play') {
play()
}
else if (action === 'pause') {
pause()
}
else if (action === 'stop') {
stop()
}
}
const { helper, innerAngle, outerAngle, outerGain } = useControls({
playAudio: {
Expand Down Expand Up @@ -45,56 +61,46 @@ const { helper, innerAngle, outerAngle, outerGain } = useControls({
value: 180,
min: 0,
max: 360,
step: 1
step: 1,
},
outerAngle: {
label: 'outerAngle',
value: 280,
min: 0,
max: 360,
step: 1
step: 1,
},
outerGain: {
label: 'outerGain',
value: 0,
min: 0,
max: 1,
step: .01
step: .01,
},
})
watch(helper.value, () => {
innerAngle.value.visible = helper.value.value
outerAngle.value.visible = helper.value.value
outerGain.value.visible = helper.value.value
innerAngle.value.visible = outerAngle.value.visible = outerGain.value.visible = helper.value.value
})
onUnmounted(() => {
const { exposed } = positionalAudioRef.value.$
exposed.dispose()
})
const handlerAudio = (action: string) => {
if (!positionalAudioRef.value) return
const { exposed } = positionalAudioRef.value.$
if (action === 'play') {
exposed.play()
} else if (action === 'pause') {
exposed.pause()
} else if (action === 'stop') {
exposed.stop()
}
}
const { dispose } = positionalAudioRef.value
dispose()
})
</script>

<template>
<TresLeches class="important-left-initial important-right-2" />

<div v-if="!ready" class="ready">
<button @click="ready = true">click to continue</button>
<div
v-if="!ready"
class="ready"
>
<button @click="ready = true">
click to continue
</button>
</div>

<TresCanvas v-bind="gl">
Expand All @@ -104,17 +110,34 @@ const handlerAudio = (action: string) => {
<Box :args="[1, 1, 1]">
<TresMeshNormalMaterial />
<Suspense>
<PositionalAudio ref="positionalAudioRef" loop :ready :innerAngle="innerAngle.value"
:outerAngle="outerAngle.value" :outerGain="outerGain.value" :helper="helper.value"
url="/positional-audio/sound1.mp3" />
<PositionalAudio
ref="positionalAudioRef"
loop
:ready
:inner-angle="innerAngle.value"
:outer-angle="outerAngle.value"
:outer-gain="outerGain.value"
:helper="helper.value"
url="/positional-audio/sound1.mp3"
/>
</Suspense>
</Box>

<Box :args="[4, 2, 0.1]" :position="[0, 0, -1]">
<TresMeshBasicMaterial color="#ff0000" transparent :opacity="0.5" />
<Box
:args="[4, 2, 0.1]"
:position="[0, 0, -1]"
>
<TresMeshBasicMaterial
color="#ff0000"
transparent
:opacity="0.5"
/>
</Box>

<TresGridHelper :position="[0, -.01, 0]" :args="[10, 10, '#c1c1c1', '#c1c1c1']" />
<TresGridHelper
:position="[0, -.01, 0]"
:args="[10, 10, '#c1c1c1', '#c1c1c1']"
/>
</TresCanvas>
</template>

Expand Down
21 changes: 12 additions & 9 deletions docs/guide/abstractions/positional-audio.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,28 +14,31 @@ This component is still under development, so please report any problems or sugg

## Usage

The `<PositionalAudio>` component is very simple to set up and use. It lets you bring 3D scenes to life. Without setting any parameters for the props at your disposal, all you have to do is call the `<PositionalAudio>` component surrounded by the `<Suspense>` component to allow it to load the audio you've provided. Only the `url` prop is required for this abstraction to work.

:::warning
(AudioContext not allowed) WIP
:::
The `<PositionalAudio>` component is very simple to set up and use, allowing you to bring your 3D scenes to life. All you need to do is call the `<PositionalAudio>` component and set the `url`. It must be wrapped around the `<Suspense>` component to enable it to load your audio asynchronously. 💥

<DocsDemo>
<PositionalAudioDemo />
</DocsDemo>

<<< @/.vitepress/theme/components/PositionalAudioDemo.vue{4,15,72-75,106-110}
:::warning
AudioContext is authorised when an user gesture has been made on the page. `Autoplay` cannot be activated if no user gesture has been made previously (https://goo.gl/7K7WLu).
If you are sure that there will be a user gesture before your `<PositionAudio>` component appears/is created, you can directly add `:ready="true"` and `autoplay="true"` for a direct launch.
:::

<<< @/.vitepress/theme/components/PositionalAudioDemo.vue{4,15,71-72,113-122}

<img src="/positional-audio/sketch.jpg" />

## Props

| Prop | Description | Default |
| :---------------- | :--------------------------------------------------- | ------------------------- |
| **url** | `string` — **required** — The path or URL to the file. | |
| **url** | `string` - **required** — The path or URL to the file. | |
| **helper** | `boolean` — Selects whether helper mode is enabled. <br> *(Useful for visualising the angle of sound propagation)* | `false` |
| **distance** | `number` — The distance at which the volume reduction starts taking effect. ***A non-negative number.*** | `1` |
| **ready** | `boolean` — Tells `<PositionalAudio>` that `AudioContext` is authorised because an user gesture has been made on the page. This is imperative, as `autoplay` cannot be activated if no user gesture has been made previously (https://goo.gl/7K7WLu). <br> If you're sure that there will be a user gesture before your `<PositionAudio>` component appears, you can directly add `:ready="true"` and `autoplay="true"` for a direct launch. | `false` |
| **ready** | `boolean` — Tells `<PositionalAudio>` that `AudioContext` is authorised because an user gesture has been made on the page. This is imperative, as `autoplay` cannot be activated if no user gesture has been made previously (https://goo.gl/7K7WLu). <br> | `false` |
| **autoplay** | `boolean` — Selects whether the audio is launched automatically. Please refer to the `ready` prop for a better understanding of how to use autoplay. | `false` |
| **loop** | `boolean` — Specifies whether the audio should loop. | `false` |
| **innerAngle** | `number` — Value describing the angle, in degrees, of a cone inside of which there will be no volume reduction. | `360` |
| **outerAngle** | `number` — Value describing the angle, in degrees, of a cone outside of which the volume will be reduced by a constant value, defined by the `outerGain` prop. | `0` |
| **outerGain** | `number` — Value describing the amount of volume reduction outside the cone defined by the `outerAngle` prop. When the value is `0`, meaning that no sound can be heard. | `0` |
| **outerGain** | `number` — Value describing the amount of volume reduction outside the cone defined by the `outerAngle` prop. When the value is `0` no sound can be heard. | `0` |
Binary file added docs/public/positional-audio/sketch.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
73 changes: 53 additions & 20 deletions playground/src/pages/abstractions/PositionalAudio.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,21 @@ const gl = {
}
const ready = ref(false)
const positionalAudioRef = shallowRef(null);
const positionalAudioRef = shallowRef(null)
const handlerAudio = (action: string) => {
const { exposed } = positionalAudioRef.value.$
if (!positionalAudioRef.value) return
// console.log(exposed.ref)
const { play, pause, stop } = positionalAudioRef.value
if (action === 'play') {
exposed.play()
} else if (action === 'pause') {
exposed.pause()
} else if (action === 'stop') {
exposed.stop()
play()
}
else if (action === 'pause') {
pause()
}
else if (action === 'stop') {
stop()
}
}
Expand All @@ -31,15 +33,28 @@ const onContinue = () => {
</script>

<template>

<div v-if="!ready" class="playground-positional-audio__ready">
<button @click="onContinue">click to continue</button>
<div
v-if="!ready"
class="playground-positional-audio__ready"
>
<button @click="onContinue">
click to continue
</button>
</div>

<div v-if="ready" class="playground-positional-audio__controls">
<button @click="handlerAudio('play')">play</button>
<button @click="handlerAudio('pause')">pause</button>
<button @click="handlerAudio('stop')">stop</button>
<div
v-if="ready"
class="playground-positional-audio__controls"
>
<button @click="handlerAudio('play')">
play
</button>
<button @click="handlerAudio('pause')">
pause
</button>
<button @click="handlerAudio('stop')">
stop
</button>
</div>

<TresCanvas v-bind="gl">
Expand All @@ -50,16 +65,34 @@ const onContinue = () => {
<TresMeshNormalMaterial />

<Suspense>
<PositionalAudio :ready="ready" ref="positionalAudioRef" :innerAngle="180" :outerAngle="220" :outerGain=".2"
:distance="2" helper url="/positional-audio/sound1.mp3" />
<PositionalAudio
ref="positionalAudioRef"
:ready="ready"
:inner-angle="180"
:outer-angle="220"
:outer-gain=".2"
:distance="2"
helper
url="/positional-audio/sound1.mp3"
/>
</Suspense>
</Box>

<Box :args="[4, 2, 0.1]" :position="[0, 0, -1]">
<TresMeshBasicMaterial color="#ff0000" transparent :opacity="0.5" />
<Box
:args="[4, 2, 0.1]"
:position="[0, 0, -1]"
>
<TresMeshBasicMaterial
color="#ff0000"
transparent
:opacity="0.5"
/>
</Box>

<TresGridHelper :position="[0, -.01, 0]" :args="[10, 10]" />
<TresGridHelper
:position="[0, -.01, 0]"
:args="[10, 10]"
/>
</TresCanvas>
</template>

Expand Down
Loading

0 comments on commit 4e2b5fb

Please sign in to comment.