vueuse / sound Goto Github PK

View Code? Open in Web Editor NEW

469.0 469.0 26.0 1.4 MB

🔊 A Vue composable for playing sound effects

Home Page: https://sound.vueuse.org

License: MIT License

JavaScript 9.17% TypeScript 90.83%

audio composition-api hooks sound vue vue-composable vue3

sound's Introduction

Collection of essential Vue Composition Utilities

🚀 Features

🎪 Interactive docs & demos
🕶 Seamless migration: Works for both Vue 3 and 2
⚡ Fully tree shakeable: Only take what you want, bundle size
🦾 Type Strong: Written in TypeScript, with TS Docs
🔋 SSR Friendly
🌎 No bundler required: Usable via CDN
🔩 Flexible: Configurable event filters and targets
🔌 Optional Add-ons: Router, Firebase, RxJS, etc.

🦄 Usage

import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core'

export default {
  setup() {
    // tracks mouse position
    const { x, y } = useMouse()

    // if user prefers dark theme
    const isDark = usePreferredDark()

    // persist state in localStorage
    const store = useLocalStorage(
      'my-storage',
      {
        name: 'Apple',
        color: 'red',
      },
    )

    return { x, y, isDark, store }
  },
}

Refer to functions list or documentations for more details.

📦 Install

🎩 From v4.0, it works for Vue 2 & 3 within a single package by the power of vue-demi!

npm i @vueuse/core

Add ons | Nuxt Module

From v6.0, VueUse requires vue >= v3.2 or @vue/composition-api >= v1.1

Demos

CDN

<script src="https://unpkg.com/@vueuse/shared"></script>

<script src="https://unpkg.com/@vueuse/core"></script>

It will be exposed to global as window.VueUse

🪴 Project Activity

🧱 Contribute

See the Contributing Guide

🌸 Thanks

This project is heavily inspired by the following awesome projects.

And thanks to all the contributors on GitHub!

👨‍🚀 Contributors

Financial Contributors on Open Collective

📄 License

sound's People

Contributors

Stargazers

Watchers

sound's Issues

一个警告

dependencies:

@vueuse/sound 1.1.7
lingo3d-vue 1.0.49
vue 3.2.33

devDependencies:

@vitejs/plugin-vue 2.3.2
typescript 4.6.4
vite 2.9.8
vue-tsc 0.29.8

WARN Issues with peer dependencies found
.
└─┬ @vueuse/sound
└─┬ @vue/composition-api
└── ✕ unmet peer vue@">= 2.5 < 3": found 3.2.3

Could sound enabled perhaps be unreffed too?

It would be very useful to allow a user to toggle sound and just set the sound enabled option. But since it's not unreffed it cannot be updated.

Doesn't work in production mode

I'm using this lib and work perfectly in local development mode, but when i deployed to netlify the sound doesn't work with no error. Does anybody have the same issue?

Cannot use import statement outside a module

Hi !
Jest raises an error when I try to run my test with npm run test:unit :

   /home/nicolas/repo/smooth-pomodoro/node_modules/@vueuse/sound/dist/index.mjs:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { ref, onMounted, unref, watch } from 'vue-demi';

      SyntaxError: Cannot use import statement outside a module

If you want to reproduce, here is the link of the project, the branch is use-vueuse-for-sound

PS : thanks for the module, it's super cool !

Bump vue to vue 3.0.4

Please bump vue to the latest version. Right now it does not wanna install in my vue 3 project!

Not work with vite 2

erro:

onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup().

The sound need stop automatically

Now, if i play a sound with the loop option, i have to stop it manually when my component unmount.
I think the current howl object should be unload when the url update or the component unmount.

TypeError: Cannot read properties of undefined (reading 'version')

I'm getting this error when trying to use in my Vue3 project. Anybody encountered this before?

TypeError: Cannot read properties of undefined (reading 'version')
at eval (index.mjs?4c81:15)
at Module../node_modules/@vueuse/sound/node_modules/vue-demi/lib/index.mjs (home.js:59)
at webpack_require (app.js:854)
at fn (app.js:151)
at eval (index.js?af75:1)
at Module../node_modules/@vueuse/sound/dist/esm/index.js (home.js:35)
at webpack_require (app.js:854)
at fn (app.js:151)
at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/views/Game.vue?vue&type=script&lang=js:3)
at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/views/Game.vue?vue&type=script&lang=js (home.js:131)

Basically, what I'm trying to achieve is to play the audio when user clicks 'yes' on the <Modal /> component which emits startGame

Here is the code:

<template>
  <Modal @startGame="startGame" />
</template>

<script>
import { useSound } from '@vueuse/sound'
import bgAudio from '@/assets/audio/stranger-things.mp3'

export default {
  setup() {
      const { play } = useSound(bgAudio)

     const startGame = () => {
        /* other codes here */
        play()
    }
    return {
      startGame
    }
  }
}
</script>

You asked for my experience with nuxt and this package. I tried to get it to work after the latest update, but it seems like it doesn't work. I have a sound in my public folder like this : public/sounds/back.wav

`<script setup>
import { useSound } from '@vueuse/sound'

const { play, sound } = useSound('/sounds/back.wav')
</script>

test `

This is my test component

modules: ['@vueuse/sound/nuxt'] sound: { sounds: { scan: true, }, },

Did I have something wrong or do I need to change something to get it to work?

Thanks in advance!

Dependency Conflict in Nuxt3

My project is written using Nuxt3 and my project dependencies in package.json is shown as following

{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxtjs/color-mode": "^3.3.0",
    "@nuxtjs/supabase": "^0.3.8",
    "@pinia-plugin-persistedstate/nuxt": "^1.1.1",
    "@pinia/nuxt": "^0.4.11",
    "@types/node": "^18",
    "autoprefixer": "^10.4.14",
    "nuxt": "^3.5.2",
    "nuxt-icon": "^0.4.1",
    "postcss": "^8.4.24",
    "prettier": "^3.0.1",
    "prettier-plugin-tailwindcss": "^0.5.2",
    "tailwindcss": "^3.3.2"
  },
  "dependencies": {
    "@headlessui/vue": "^1.7.14",
    "@heroicons/vue": "^2.0.18",
    "@vueuse/core": "^10.2.1",
    "@vueuse/nuxt": "^10.3.0",
    "nuxt-headlessui": "^1.1.4",
    "nuxt-storage": "^1.2.2",
    "pinia": "^2.1.4"
  }
}

I tried install this using the following command

npm install @vueuse/sound

It returned following error (this is a full log file)

'Log files:
C:\Users\admin\AppData\Local\npm-cache\_logs\2023-08-22T08_43_25_691Z-debug-0.log

# npm resolution error report

While resolving: nuxt-app@undefined
Found: [email protected]
node_modules/vue
  peer vue@"^3.2.0" from @headlessui/[email protected]
  node_modules/@headlessui/vue
    @headlessui/vue@"^1.0.0" from [email protected]
    node_modules/nuxt-headlessui
      nuxt-headlessui@"^1.1.4" from the root project
    @headlessui/vue@"^1.7.14" from the root project
  peer vue@">= 3" from @heroicons/[email protected]
  node_modules/@heroicons/vue
    @heroicons/vue@"^2.0.18" from the root project
  peer vue@">=3" from @iconify/[email protected]
  node_modules/@iconify/vue
    @iconify/vue@"^4.1.1" from [email protected]
    node_modules/nuxt-icon
      dev nuxt-icon@"^0.4.1" from the root project
  peer vue@"^3.3.4" from @nuxt/[email protected]
  node_modules/@nuxt/vite-builder
    @nuxt/vite-builder@"3.6.5" from [email protected]
    node_modules/nuxt
      peer nuxt@"^3.6.1" from @nuxt/[email protected]
      node_modules/@nuxt/devtools
        dev @nuxt/devtools@"latest" from the root project
      peer nuxt@"^3.6.1" from @nuxt/[email protected]
      node_modules/@nuxt/devtools-kit
        @nuxt/devtools-kit@"0.6.7" from @nuxt/[email protected]
        node_modules/@nuxt/devtools
          dev @nuxt/devtools@"latest" from the root project
      nuxt@"^3.6.5" from @vueuse/[email protected]
      node_modules/@vueuse/nuxt
        @vueuse/nuxt@"^10.3.0" from the root project
      dev nuxt@"^3.5.2" from the root project
  peer vue@">=2.7 || >=3" from @unhead/[email protected]
  node_modules/@unhead/vue
    @unhead/vue@"^1.1.30" from [email protected]
    node_modules/nuxt
      peer nuxt@"^3.6.1" from @nuxt/[email protected]
      node_modules/@nuxt/devtools
        dev @nuxt/devtools@"latest" from the root project
      peer nuxt@"^3.6.1" from @nuxt/[email protected]
      node_modules/@nuxt/devtools-kit
        @nuxt/devtools-kit@"0.6.7" from @nuxt/[email protected]
        node_modules/@nuxt/devtools
          dev @nuxt/devtools@"latest" from the root project
      nuxt@"^3.6.5" from @vueuse/[email protected]
      node_modules/@vueuse/nuxt
        @vueuse/nuxt@"^10.3.0" from the root project
      dev nuxt@"^3.5.2" from the root project
  peer vue@"^3.2.25" from @vitejs/[email protected]
  node_modules/@vitejs/plugin-vue
    @vitejs/plugin-vue@"^4.2.3" from @nuxt/[email protected]
    node_modules/@nuxt/vite-builder
      @nuxt/vite-builder@"3.6.5" from [email protected]
      node_modules/nuxt
        peer nuxt@"^3.6.1" from @nuxt/[email protected]
        node_modules/@nuxt/devtools
          dev @nuxt/devtools@"latest" from the root project
        peer nuxt@"^3.6.1" from @nuxt/[email protected]
        node_modules/@nuxt/devtools-kit
          @nuxt/devtools-kit@"0.6.7" from @nuxt/[email protected]
          node_modules/@nuxt/devtools
            dev @nuxt/devtools@"latest" from the root project
        nuxt@"^3.6.5" from @vueuse/[email protected]
        node_modules/@vueuse/nuxt
          @vueuse/nuxt@"^10.3.0" from the root project
        dev nuxt@"^3.5.2" from the root project
  peer vue@"^3.0.0" from @vitejs/[email protected]
  node_modules/@vitejs/plugin-vue-jsx
    @vitejs/plugin-vue-jsx@"^3.0.1" from @nuxt/[email protected]
    node_modules/@nuxt/vite-builder
      @nuxt/vite-builder@"3.6.5" from [email protected]
      node_modules/nuxt
        peer nuxt@"^3.6.1" from @nuxt/[email protected]
        node_modules/@nuxt/devtools
          dev @nuxt/devtools@"latest" from the root project
        peer nuxt@"^3.6.1" from @nuxt/[email protected]
        node_modules/@nuxt/devtools-kit
          @nuxt/devtools-kit@"0.6.7" from @nuxt/[email protected]
          node_modules/@nuxt/devtools
            dev @nuxt/devtools@"latest" from the root project
        nuxt@"^3.6.5" from @vueuse/[email protected]
        node_modules/@vueuse/nuxt
          @vueuse/nuxt@"^10.3.0" from the root project
        dev nuxt@"^3.5.2" from the root project
  peerOptional vue@"^2.7.0 || ^3.2.25" from @vue-macros/[email protected]
  node_modules/@vue-macros/common
    @vue-macros/common@"^1.3.1" from [email protected]
    node_modules/unplugin-vue-router
      unplugin-vue-router@"^0.6.4" from [email protected]
      node_modules/nuxt
        peer nuxt@"^3.6.1" from @nuxt/[email protected]
        node_modules/@nuxt/devtools
          dev @nuxt/devtools@"latest" from the root project
        peer nuxt@"^3.6.1" from @nuxt/[email protected]
        node_modules/@nuxt/devtools-kit
          @nuxt/devtools-kit@"0.6.7" from @nuxt/[email protected]
          node_modules/@nuxt/devtools
            dev @nuxt/devtools@"latest" from the root project
        nuxt@"^3.6.5" from @vueuse/[email protected]
        node_modules/@vueuse/nuxt
          @vueuse/nuxt@"^10.3.0" from the root project
        dev nuxt@"^3.5.2" from the root project
  peer vue@"3.3.4" from @vue/[email protected]
  node_modules/@vue/server-renderer
    @vue/server-renderer@"3.3.4" from [email protected]
  peer vue@"^3.0.0-0 || ^2.6.0" from [email protected]
  node_modules/@vueuse/core/node_modules/vue-demi
    vue-demi@">=0.14.5" from @vueuse/[email protected]
    node_modules/@vueuse/core
      @vueuse/core@"10.3.0" from @vueuse/[email protected]
      node_modules/@vueuse/nuxt
        @vueuse/nuxt@"^10.3.0" from the root project
      @vueuse/core@"^10.2.1" from the root project
  peer vue@"^3.0.0-0 || ^2.6.0" from [email protected]
  node_modules/@vueuse/nuxt/node_modules/vue-demi
    vue-demi@">=0.14.5" from @vueuse/[email protected]
    node_modules/@vueuse/nuxt
      @vueuse/nuxt@"^10.3.0" from the root project
  peer vue@"^3.0.0-0 || ^2.6.0" from [email protected]
  node_modules/@vueuse/shared/node_modules/vue-demi
    vue-demi@">=0.14.5" from @vueuse/[email protected]
    node_modules/@vueuse/shared
      @vueuse/shared@"10.3.0" from @vueuse/[email protected]
      node_modules/@vueuse/core
        @vueuse/core@"10.3.0" from @vueuse/[email protected]
        node_modules/@vueuse/nuxt
          @vueuse/nuxt@"^10.3.0" from the root project
        @vueuse/core@"^10.2.1" from the root project
  vue@"^3.3.4" from [email protected]
  node_modules/nuxt
    peer nuxt@"^3.6.1" from @nuxt/[email protected]
    node_modules/@nuxt/devtools
      dev @nuxt/devtools@"latest" from the root project
    peer nuxt@"^3.6.1" from @nuxt/[email protected]
    node_modules/@nuxt/devtools-kit
      @nuxt/devtools-kit@"0.6.7" from @nuxt/[email protected]
      node_modules/@nuxt/devtools
        dev @nuxt/devtools@"latest" from the root project
    nuxt@"^3.6.5" from @vueuse/[email protected]
    node_modules/@vueuse/nuxt
      @vueuse/nuxt@"^10.3.0" from the root project
    dev nuxt@"^3.5.2" from the root project
  peer vue@"^2.6.14 || ^3.3.0" from [email protected]
  node_modules/pinia
    pinia@">=2.1.0" from @pinia/[email protected]
    node_modules/@pinia/nuxt
      peer @pinia/nuxt@"^0.4.4" from @pinia-plugin-persistedstate/[email protected]
      node_modules/@pinia-plugin-persistedstate/nuxt
        dev @pinia-plugin-persistedstate/nuxt@"^1.1.1" from the root project
      dev @pinia/nuxt@"^0.4.11" from the root project
    peer pinia@"^2.0.0" from [email protected]
    node_modules/pinia-plugin-persistedstate
      pinia-plugin-persistedstate@">=3.1.0" from @pinia-plugin-persistedstate/[email protected]
      node_modules/@pinia-plugin-persistedstate/nuxt
        dev @pinia-plugin-persistedstate/nuxt@"^1.1.1" from the root project
    pinia@"^2.1.4" from the root project
  peer vue@"^3.0.0-0 || ^2.6.0" from [email protected]
  node_modules/pinia/node_modules/vue-demi
    vue-demi@">=0.14.5" from [email protected]
    node_modules/pinia
      pinia@">=2.1.0" from @pinia/[email protected]
      node_modules/@pinia/nuxt
        peer @pinia/nuxt@"^0.4.4" from @pinia-plugin-persistedstate/[email protected]
        node_modules/@pinia-plugin-persistedstate/nuxt
          dev @pinia-plugin-persistedstate/nuxt@"^1.1.1" from the root project
        dev @pinia/nuxt@"^0.4.11" from the root project
      peer pinia@"^2.0.0" from [email protected]
      node_modules/pinia-plugin-persistedstate
        pinia-plugin-persistedstate@">=3.1.0" from @pinia-plugin-persistedstate/[email protected]
        node_modules/@pinia-plugin-persistedstate/nuxt
          dev @pinia-plugin-persistedstate/nuxt@"^1.1.1" from the root project
      pinia@"^2.1.4" from the root project
  peer vue@"^3.2.0" from [email protected]
  node_modules/vue-router
    vue-router@"^4.2.4" from [email protected]
    node_modules/nuxt
      peer nuxt@"^3.6.1" from @nuxt/[email protected]
      node_modules/@nuxt/devtools
        dev @nuxt/devtools@"latest" from the root project
      peer nuxt@"^3.6.1" from @nuxt/[email protected]
      node_modules/@nuxt/devtools-kit
        @nuxt/devtools-kit@"0.6.7" from @nuxt/[email protected]
        node_modules/@nuxt/devtools
          dev @nuxt/devtools@"latest" from the root project
      nuxt@"^3.6.5" from @vueuse/[email protected]
      node_modules/@vueuse/nuxt
        @vueuse/nuxt@"^10.3.0" from the root project
      dev nuxt@"^3.5.2" from the root project
    peerOptional vue-router@"^4.1.0" from [email protected]
    node_modules/unplugin-vue-router
      unplugin-vue-router@"^0.6.4" from [email protected]
      node_modules/nuxt
        peer nuxt@"^3.6.1" from @nuxt/[email protected]
        node_modules/@nuxt/devtools
          dev @nuxt/devtools@"latest" from the root project
        peer nuxt@"^3.6.1" from @nuxt/[email protected]
        node_modules/@nuxt/devtools-kit
          @nuxt/devtools-kit@"0.6.7" from @nuxt/[email protected]
          node_modules/@nuxt/devtools
            dev @nuxt/devtools@"latest" from the root project
        nuxt@"^3.6.5" from @vueuse/[email protected]
        node_modules/@vueuse/nuxt
          @vueuse/nuxt@"^10.3.0" from the root project
        dev nuxt@"^3.5.2" from the root project

Could not resolve dependency:
@vueuse/sound@"*" from the root project

Conflicting peer dependency: [email protected]
node_modules/vue
  peer vue@">= 2.5 < 2.7" from @vue/[email protected]
  node_modules/@vue/composition-api
    peerOptional @vue/composition-api@"^1.0.0-rc.1" from @vueuse/[email protected]
    node_modules/@vueuse/sound
      @vueuse/sound@"*" from the root project

Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Have you previously encountered this issue, or would you happen to possess insights on its resolution? Thank you in advance!

Fade is not a function

Trying to access the method "fade" out of the "sound" object doesnt work, as the "fade" is undefined

After setting autoplay in options, the isPlaying is incorrent

After setting autoplay in options, the isPlaying is incorrent.

Maybe the value of isPlaying should be set in the callback function of Howler, not in the method。

Not working with Vue3 & Vite3

I only get the error in the image

Playing Multiple Sounds

How can i use multiple sound source without using sprites?
Different buttons can be play different sounds

Sound doesn't play in mobile web browsers

This only works on desktop browsers. It would be nice if it worked on mobile too.

nuxt3 notworking

is it normal?

The AudioContext was not allowed to start

Using the vue setup composition api here:

<script setup lang="ts">
import ping from './assets/ping.wav';
import { useSound } from '@vueuse/sound';

const pingSound = useSound(ping);

async function clickTheButton() {
    pingSound.play();
}
</script>

Everything works as it should but the console leaves a warning on loading the component (clickTheButton is not yet triggered):

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.

Using Vue3.2.45 and Vite 4.1.0

Is there a way to avoid these warnings?

no effect

ex:

const props = defineProps(['url'])
const { duration } = useSound(props.url)

when url change, the duration still old

Nuxt 3 failed to resolve import "../../../index" from useSound in runtime

Hello! I was trying to use this module for nuxt 3, but it does not seem able to find some of the files, maybe it needs to be restructured so that it can find the file after being installed as a node module?

error in vue2 with typescript

Thank you to share this amazing project. But I got some problems with setup on my vue2 project.

ERROR in /Users/---/Developer/**/node_modules/@vueuse/sound/dist/esm/src/types.d.ts
1:35 Could not find a declaration file for module 'howler'. '/Users/---/Developer/---/node_modules/howler/dist/howler.js' implicitly has an 'any' type.
Try npm install @types/howler if it exists or add a new declaration (.d.ts) file containing declare module 'howler';

1 | import { Howl, HowlOptions } from 'howler';
| ^
2 | import { ComputedRef, Ref } from 'vue-demi';
3 | export interface HowlStatic {
4 | new (properties: HowlOptions): Howl;
No lint errors found

Sounds are not played in Safari

Hello,

Sound are not played in Safari but all works fine in chrome and firefox, do you have an idea to resolve this problem ?

<template>
  <button @mousedown="playSound($event)"></button>
</template>

<script>
import { useSound } from "@vueuse/sound";

export default {
  name: "Pad",
  setup(props) {
    const { play, stop } = useSound(props.soundURL, { interrupt: true });

    return {
      play,
      stop,
    };
  },
  methods: {
    playSound(event) {
      if (!event.repeat) {
        this.play();
      }
    },
  },
  props: ["soundURL"],
  beforeUnmount() {
    this.stop();
  },
};
</script>

Could not find a declaration file for module '@vueuse/sound'

I have the following compilation error when running npm run build in a fresh Vue app:

src/App.vue:21:26 - error TS7016: Could not find a declaration file for module '@vueuse/sound'. 'C:/[...redacted...]/node_modules/@vueuse/sound/dist/index.mjs' implicitly has an 'any' type.
  There are types at 'C:/[...redacted...]/node_modules/@vueuse/sound/dist/index.d.ts', but this result could not be resolved when respecting package.json "exports". The '@vueuse/sound' library may need to update its package.json or typings.

21 import { useSound } from '@vueuse/sound';
                            ~~~~~~~~~~~~~~~


Found 1 error in src/App.vue:21

ERROR: "type-check" exited with 2.

The error goes away if I manually delete the exports key in package.json:

  "exports": {
    ".": {
      "require": "./dist/index.cjs",
      "import": "./dist/index.mjs"
    },
    "./nuxt": {
      "require": "./dist/nuxt.cjs",
      "import": "./dist/nuxt.mjs"
    }
  },

Do you have any clue to solve it?

Problem when deploying to firebase

<template>   
  <nav @click="doorSoundPlay()" id="nav" class="flex items-center">     
        <router-link to="/">Bridge</router-link>
        <router-link @click="doorSoundPlay()"  to="/worlds">Research Lab</router-link>
        <router-link to="/formssummary">Mission Deck</router-link>
        <router-link  to="/dashboard">Resource Library</router-link>
      </nav>
</template>
<script>
import { useSound } from '@vueuse/sound';
import doorsFx from '../assets/sound/filename.mp3';

 setup() {
    const { doorSound } = useSound(doorsFx)

    return {
     doorSound,
    }
  },
  methods: {
    signOut() {
      firebase
        .auth()
        .signOut()
        .then(() => {
          this.$router.replace("sign-in");
        });
    },
     doorSoundPlay(){
            console.log(this.doorSound)
       this.doorSound.play();
       }
  }
</script>

works fine with yarn serve but after I deploy it, doorSound returns undefined. any ideas? Thank you in advance for this great package.

[Suggestion] Replace Vue demi with native Vue 3 composition api

It seems the package from the standard npm install is broken in two places as mentioned in the other issues before.

Since Nuxt 3 and Vue 3 are now the default version people would work/start working with I think Vue demi can be replaced with native Vue 3 (with <script setup>).

Type errors when using Ref<number> for volume

I'm likely doing something wrong, or it is an unrelated IDE issue. I am getting an error: Type Ref<number> is not assignable to type '(MaybeRef<number> & number) | undefined when I do the following:

const systemSoundVolume = ref(0.5)
const notification = useSound('url-to-asset', {
volume: systemSoundVolume // error here
})

Any ideas?

For additional context, I manage all the app audio in an audioStore using pinia. So, this is not in the setup function of a component.

duration always 0

I think this code is wrong.

duration.value = duration.value ? duration.value * 1000 : 0

Not work in Vuejs 3

Failed to compile.

./node_modules/@vueuse/sound/dist/index.mjs 11:52
Module parse failed: Unexpected token (11:52)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| if (typeof onload === "function")
| onload.call(this);

duration.value = (duration.value || sound.value?.duration() || 0) * 1e3;

| if (autoplay === true) {
| isPlaying.value = true;

howler.default is undefined

Uncaught (in promise) TypeError:

My code:

<script setup lang="ts">
import { useSound } from "@vueuse/sound";

const { play } = useSound("pop.mp3");
</script>

<template>
<button
  @click="play()"
>
</template>

my nuxt.config.ts:

export default defineNuxtConfig({
  css: ["@/assets/css/main.css"],
  devtools: {
    enabled: true,
  },
  components: [{ path: "@/components/home", prefix: "Home" }, "~/components"],

  modules: [
    "@vueuse/nuxt",
    "@vueuse/motion/nuxt",
    "@vueuse/sound/nuxt",]

  sound: {
    scan: "~/assets/sounds",
  },

  runtimeConfig: {
    public: {
      baseURL: process.env.BASE_URL,
    },
  },

  app: {
    head: {
      link: [{ rel: "icon", type: "image/png", href: "/logo.png" }],
    },
  },
});

My package.json:

{
  "name": "mob-website",
  "type": "module",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  },
  "dependencies": {
    "@formkit/icons": "^0.19.3",
    "@formkit/nuxt": "^0.19.3",
    "@formkit/themes": "^0.19.3",
    "@nuxt/image": "^1.0.0-rc.1",
    "@nuxtjs/eslint-module": "^4.1.0",
    "@pinia/nuxt": "^0.4.11",
    "@vee-validate/nuxt": "^4.11.2",
    "@vee-validate/yup": "^4.11.2",
    "@vueuse/motion": "^2.0.0",
    "@vueuse/sound": "^2.0.1",
    "eslint-plugin-tailwindcss": "^3.13.0",
    "flipbook-vue": "^1.0.0-beta.4",
    "nuxt-gtag": "^0.6.1",
    "nuxt-icon": "^0.5.0",
    "nuxt-storage": "^1.2.2",
    "nuxt-swiper": "^1.2.0",
    "nuxt-viewport": "^2.0.6",
    "vee-validate": "^4.11.2",
    "vue3-google-map": "^0.17.1",
    "yup": "^1.2.0"
  },
  "devDependencies": {
    "@nuxt/devtools": "^0.8.2",
    "@nuxt/eslint-config": "^0.1.1",
    "@nuxtjs/google-fonts": "^3.0.2",
    "@nuxtjs/i18n": "8.0.0-rc.3",
    "@types/node": "^18.17.3",
    "@types/qs": "^6.9.7",
    "@typescript-eslint/eslint-plugin": "^6.4.0",
    "@typescript-eslint/parser": "^6.4.0",
    "@vueuse/core": "^10.3.0",
    "@vueuse/nuxt": "^10.3.0",
    "autoprefixer": "^10.4.15",
    "eslint": "^8.47.0",
    "eslint-plugin-vue": "^9.17.0",
    "nuxt": "^3.6.5",
    "postcss": "^8.4.28",
    "tailwindcss": "^3.3.3"
  },
  "overrides": {
    "vue": "latest"
  }
}

I got error npm ERR! Conflicting peer dependency: [email protected]

This library seems useful for my project then I using Vue 3 Composition API which version is 3.2.31 and also Vite version 2.5.4. My Install got problem and return this error code:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vue
npm ERR!   peer vue@">= 3.0.0 < 4" from @fortawesome/[email protected]
npm ERR!   node_modules/@fortawesome/vue-fontawesome
npm ERR!     @fortawesome/vue-fontawesome@"^3.0.0-5" from the root project
npm ERR!   peer vue@"next" from @handsontable/[email protected]
npm ERR!   node_modules/@handsontable/vue3
npm ERR!     @handsontable/vue3@"^12.3.0" from the root project
npm ERR!   28 more (@highlightjs/vue-plugin, @kyvg/vue3-notification, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! @vueuse/sound@"*" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/vue
npm ERR!   peer vue@">= 2.5 < 2.7" from @vue/[email protected]
npm ERR!   node_modules/@vue/composition-api
npm ERR!     peerOptional @vue/composition-api@"^1.0.0-rc.1" from @vueuse/[email protected]
npm ERR!     node_modules/@vueuse/sound
npm ERR!       @vueuse/sound@"*" from the root project
npm ERR! 
julapps@Juls-Air gundu % npm install @vueuse/sound
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vue
npm ERR!   peer vue@">= 3.0.0 < 4" from @fortawesome/[email protected]
npm ERR!   node_modules/@fortawesome/vue-fontawesome
npm ERR!     @fortawesome/vue-fontawesome@"^3.0.0-5" from the root project
npm ERR!   peer vue@"next" from @handsontable/[email protected]
npm ERR!   node_modules/@handsontable/vue3
npm ERR!     @handsontable/vue3@"^12.3.0" from the root project
npm ERR!   28 more (@highlightjs/vue-plugin, @kyvg/vue3-notification, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! @vueuse/sound@"*" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/vue
npm ERR!   peer vue@">= 2.5 < 2.7" from @vue/[email protected]
npm ERR!   node_modules/@vue/composition-api
npm ERR!     peerOptional @vue/composition-api@"^1.0.0-rc.1" from @vueuse/[email protected]
npm ERR!     node_modules/@vueuse/sound
npm ERR!       @vueuse/sound@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/julapps/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/julapps/.npm/_logs/2023-04-15T01_58_25_131Z-debug-0.log

Anyone can Help?

File-Loader

This isn't strictly speaking an issue with the package, I'm just really struggling here, and I could imagine others too!

I'm currently not as experienced as I probably should be with anything regarding webpack/babel etc. Therefore, I have no Idea how to fix following issue

Module parse failed: Unexpected token (34:28)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     };
|     watch(() => [url], () => {
>         if (HowlConstructor?.value && sound?.value) {
|             sound.value = new HowlConstructor.value({
|                 src: [url],

 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=js 3:0-37 14:12-20
 @ ./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.178.20:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

I've tried installing the webpack file-loader, but that failed since I don't think I use Webpack but Babel in Vue 3. (Also my first Vue 3 project, I've only worked in Vue 2 before)

I've tried babel-plugin-file-loader with this configuration (basically the standard one with mp3 added as extensions)

"plugins": [
    [
      "file-loader",
      {
        "name": "[hash].[ext]",
        "extensions": ["png", "jpg", "jpeg", "gif", "svg", "mp3"],
        "publicPath": "/public",
        "outputPath": "/public",
        "context": "/src",
        "limit": 0
      }
    ]
  ]

But the error still occurs. I'm honestly just really lost with this whole loader thing, if you could include an example loader-config or something like that when you have time, that'd be awesome!

TypeError: HowlConstructor.value is not a constructor

I just tried to use vueuse/sound in my Nuxt 3 project like so:

const {play} = useSound("/sounds/alert.mp3");

I am getting the following error:

Uncaught (in promise) TypeError: HowlConstructor.value is not a constructor

which is raised here.

@vueuse/sound version: 2.0.0
The howler version installed by my package manager is: 2.2.3.

Reactive Volume

Reactive Playback-Rate works perfectly fine.

The reactive volume should work too, since it uses the same watcher and is updated/set the same way as the playbackRate, I do however get following error

Uncaught (in promise) TypeError: AudioParam.setValueAtTime: Argument 1 is not a finite floating-point value.

The error occurs right on load, I can't even update the volume ref.

const volume = ref(0.5);
const [press] = useSound(buttonPress, {volume})

I don't see what's the difference between the playbackRate value and the volume value, and I haven't looked into this further yet, so I don't know what's causing this error.