CODEWITHSUNDEEP
javascriptvue.js
Kylie
Kylie

Reputation: 11759

Playing a sound with Vue.js

How can I play a sound with Vue.js?

Seems like I cant just do the regular way.

  import Vue from 'vue'
  import AppView from './components/App.vue'

  console.log('Play outside of vue')
  var audio = new Audio('file.mp3')
  audio.play()

  new Vue({
    el: '#root',
    mounted () {
       console.log('Will it play here?? lol')
       var audio = new Audio('file.mp3')
       audio.play()
    }, 
    render: h => h(AppView)
  })

As it says Audio is not defined? Do I have to import it somehow? Is there a specific vue package for this? or npm package?

I really don't understand, I though Audio was just vanilla javascript?

Upvotes: 19

Views: 64929

Answers (6)

Smileek
Smileek

Reputation: 2797

A bit of necroposting, but I believe require is not commonly used anymore. Audio is a vanilla JS, the only issue here is the correct URL after the bundling is done. The simplest Vue solution goes like this:

import mySound from '<src>/assets/file.mp3';

new Audio(mySound).play();

Upvotes: 0

Jack Brandon
Jack Brandon

Reputation: 16

I have lots of experiences about that. Developing any applications, it is really important because it is related with user-satisfy.

<template>
  <audio id="horse_audio">
    <source src="horse.ogg" type="audio/ogg">    
  </audio>
</template>

<script>
  name: "AudioTest",
  mounted() {
    let audio = document.getElementById("horse_audio")
    audio.play();
  }
</script>

I know, and you know there are too many different ways to solve this problem. But this way is from basic html. So it will work well.

Upvotes: 0

Mojtaba Karimi
Mojtaba Karimi

Reputation: 568

I know that this question is old. but I thouth it might helps.

  import Vue from 'vue'
  import AppView from './components/App.vue'

import audioFile from '@/assets/file.mp3'

  console.log('Play outside of vue')
  var audio = new Audio('file.mp3')
  audio.play()

  new Vue({
    el: '#root',
    mounted () {
       console.log('Will it play here?? lol')
       var audio = new Audio('file.mp3')

var audio = new Audio(audioFile)

       audio.play()
    }, 
    render: h => h(AppView)
  })

Upvotes: 0

Allan Lima
Allan Lima

Reputation: 153

**** EDITED ****

As the time passed and I developed more using VueJs I'm able to clarify better this issue

The issue was: the audio is being defined out of the scope of VueJs component. VueJS encapsulates the components in their own context. When we declare it out of new Vue hook, it will be unaware of the existence of this object.

A correct approach would be:

import Vue from 'vue';
import AppView from './components/App.vue';

new Vue({
  el: '#root',
  mounted () {
   console.log('Will it play here?? lol');
   console.log('Play outside of');
   var audio = new Audio('file://path-to-file/file.mp3'); // path to file
   audio.play();
}, 
render: h => h(AppView)
});

Also, I should mention that trying to access "file://" in the context of the browser will NOT work, because the browser is sandboxed. You should use an <input type="file" /> to get the source of the audio, and then put it into the audio variable after manipulate the file itself.

Is worth mention too, that this approach would work much better if you create a global plugin to use on Vue's this context. This would make the component reusable and available in every component instance you needed to access allowing you to play or pause the audio from any component source

Upvotes: 11

user1111527
user1111527

Reputation: 129

try to use path to audio file related to your script location on your environment

Upvotes: 0

Kevin Muchwat
Kevin Muchwat

Reputation: 1575

Use var audio = new Audio(require('./file.mp3')) this will create the correct path since in var audio = new Audio('file.mp3'), your path 'file.mp3' was decoded as a string.

Upvotes: 19

Related Questions