javascriptvue.jscreatejssoundjs

How do I import CreateJS into a VueJS .vue component?


I apologize in advance, I'm still very new to Vuejs in general. I'm trying to import CreateJS / SoundJS into a .vue component. I have installed CreateJS via npm. I just don't know how to import the library into the component so I can reference the sound functions. I can't seem to find anything in the CreateJS docs for this type of usage... any code or reference links would be most appreciated. Thanks!


Solution

  • Well, I did an example using the CreateJS/SoundJS library import it from its CDN.

    In the public/index.html file, add the tag:

    <script src="https://code.createjs.com/1.0.0/soundjs.min.js"></script>
    

    Now you have the library in your project, and you have access to it and its functionality.

    In the src/main.js add the library to be used with Vue adding it to the Vue prototype:

    import Vue from "vue";
    import App from "./App.vue";
    const createjs = window.createjs; // Get the createjs instance from window object
    
    Vue.config.productionTip = false;
    Vue.prototype.createjs = createjs; // Add the createjs instance to the Vue prototy, to use this.createjs
    
    new Vue({
      render: h => h(App)
    }).$mount("#app");
    

    In the src/App.vue component (or any component, but App.vue is the entry point of the application, so it's a good place to do it) configure the sounds:

    <template>
      <div id="app">
        <img alt="Vue logo" src="./assets/logo.png" />
        <HelloWorld msg="Welcome to Your Vue.js App" />
        <button @click="play">Play</button>
        <!-- button to call the play method -->
      </div>
    </template>
    
    <script>
    import HelloWorld from "./components/HelloWorld.vue";
    const hornSound = require("@/assets/hey.mp3"); // Store a mp3 file in a variable, You can add more sounds, here on in another components
    
    export default {
      name: "App",
      components: {
        HelloWorld
      },
      methods: {
        play() {
          this.createjs.Sound.play("Horn"); // Acces and play the sound with the id "Horn"
        }
      },
      created() {
        const soundId = "Horn"; // Id of the sound to be registered 
        this.createjs.Sound.registerSound(hornSound, soundId); // Register the sound, using the mp3 and the id
        // You can do this with any amount of sounds, here or in any component
        // Once a sound is registered, you have access to it in all the components
      }
    };
    </script>
    

    Playing the sound from a child component (src/components/HelloWorld.vue):

        <template>
          <div class="hello">
            <h3>Hello World with createjs/soundjs</h3>
            <button @click="playFromChild">Play inside child component</button>
          </div>
        </template>
    
        <script>
        export default {
          name: "HelloWorld",
          props: {
            msg: String
          },
          methods: {
            playFromChild() {
              this.createjs.Sound.play("Horn"); // We are accessing to the sound with id "Horn" without import anything
            }
          }
        };
        </script>
    

    I hope this help you, I tried to explain how to use it but as you said, there is not documentation about it, so maybe this is tricky but it works.