docs: remove solo feature

Author: codeacme17

example/src/App.vue

@@ -53,16 +53,11 @@ const items = reactive<Props[]>([
   },
 ])
 
-const solo = useStorage('solo', true)
 const skeleton = useStorage('skeleton', true)
 const interact = useStorage('interact', true)
 const lazy = useStorage('lazy', true)
 const fade = useStorage('fade', true)
 
-const toggleMono = () => {
-  solo.value = !solo.value
-}
-
 const toggleInteract = () => {
   interact.value = !interact.value
 }
@@ -78,15 +73,6 @@ const toggleLazy = () => {
 const toggleFade = () => {
   fade.value = !fade.value
 }
-
-const childs = reactive<(typeof Demo)[]>([])
-
-const playHandler = (id: string) => {
-  if (!solo.value) return
-  childs.forEach((child) => {
-    if (child.id !== id && child.playing) child.pause()
-  })
-}
 </script>
 
 <template>
@@ -106,11 +92,6 @@ const playHandler = (id: string) => {
     </button>
 
     <div class="mb-8 flex">
-      <button @click="toggleMono()">
-        <span :class="{ 'bg-green-500': solo }" />
-        <div>solo</div>
-      </button>
-
       <button @click="toggleInteract()">
         <span :class="{ 'bg-green-500': interact }" />
         <div>interact</div>
@@ -134,15 +115,12 @@ const playHandler = (id: string) => {
 
     <Demo
       v-for="item in items"
-      :id="item.id"
-      ref="childs"
       :key="item.id"
       :url="item.url"
       :interact="interact"
       :skeleton="skeleton"
       :lazy="lazy"
       :fade="fade"
-      @play="playHandler"
     />
   </section>
 </template>

example/src/components/Demo.vue

@@ -18,7 +18,7 @@ import ReplayIcon from './icons/Replay.vue'
 
 const darkMode = useDark()
 
-const props = defineProps(['id', 'url', 'interact', 'skeleton', 'lazy', 'fade'])
+const props = defineProps(['url', 'interact', 'skeleton', 'lazy', 'fade'])
 
 const waveOptions = reactive<IllestWaveformProps>({
   url: props.url,
@@ -78,7 +78,6 @@ const clickHandler = (el: Ref<HTMLElement>) => {
 }
 
 const play = () => {
-  emits('play', props.id)
   waveformRef.value!.play()
 }
 
@@ -101,14 +100,6 @@ const getDuration = () => {
   const duration = waveformRef.value!.getDuration()
   durationTime.value = duration
 }
-
-const emits = defineEmits(['play'])
-
-defineExpose({
-  pause,
-  playing,
-  id: props.id,
-})
 </script>
 
 <template>

src/components/IllestWaveform.vue

@@ -66,6 +66,8 @@ onUnmounted(() => {
       __illestWaveformRef__.value as HTMLElement,
       lazyLoadHandler
     )
+
+  audioController && audioController.pause()
 })
 
 function lazyLoadHandler() {