CODEWITHSUNDEEP
nuxt.jsnuxt3.jshowler.js
Clarity
Clarity

Reputation: 506

How can i integrate howler.js into nuxt3

I couldn't make it work by putting the cdn into nuxt.config.ts, nor downloading the npm package.

export default defineNuxtConfig({
app: {
    head: {
      script: [
        {
          src: "https://cdn.jsdelivr.net/npm/[email protected]/dist/howler.core.min.js",
        },
      ],
    },
  },
});

Upvotes: 2

Views: 427

Answers (1)

protob
protob

Reputation: 3583

Your head setup looks OK. This code should play sample sound in the component. The WebAudio API autoplay may be disabled by default in browsers and it requires user interaction such as click to play sound:

<template>
  <button @click="play">PLAY</button>
</template>


<script setup>
const play = () => {
  var sound = new Howl({
    src: ['https://upload.wikimedia.org/wikipedia/commons/5/56/Aplausos.ogg'],
    autoplay: true,
    loop: true,
    volume: 0.5,
    onend: function () {
      console.log('Finished!');
    }
  });
}
</script>

Upvotes: 0

Related Questions