[英]How do I import CreateJS into a VueJS .vue component?
I apologize in advance, I'm still very new to Vuejs in general.我提前道歉,总的来说,我对 Vuejs 还是很陌生。 I'm trying to import CreateJS / SoundJS into a.vue component.
我正在尝试将 CreateJS / SoundJS 导入到 a.vue 组件中。 I have installed CreateJS via npm.
我已经通过 npm 安装了 CreateJS。 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.
对于这种用法,我似乎在 CreateJS 文档中找不到任何内容......任何代码或参考链接将不胜感激。 Thanks!
谢谢!
Well, I did an example using the CreateJS/SoundJS library import it from its CDN.好吧,我做了一个示例,使用 CreateJS/SoundJS 库从其 CDN 导入它。
In the public/index.html file, add the tag:在 public/index.html 文件中,添加标签:
<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:在 src/main.js 添加要与 Vue 一起使用的库,将其添加到 Vue 原型中:
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:在 src/App.vue 组件(或任何组件,但 App.vue 是应用程序的入口点,所以这是一个好地方)配置声音:
<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):从子组件(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.我希望这对你有所帮助,我试图解释如何使用它,但正如你所说,没有关于它的文档,所以这可能很棘手,但它有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.