1 回答

TA貢獻(xiàn)1891條經(jīng)驗 獲得超3個贊
好吧,我使用創(chuàng)建JS / SoundJS庫從其CDN導(dǎo)入它做了一個示例。
在 public/index.html 文件中,添加標(biāo)記:
<script src="https://code.createjs.com/1.0.0/soundjs.min.js"></script>
現(xiàn)在,您的項目中有了庫,并且可以訪問它及其功能。
在 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");
在 src/App.vue 組件(或任何組件,但 App.vue 是應(yīng)用程序的入口點,因此它是執(zhí)行此操作的好地方)中,配置聲音:
<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>
播放來自子組件(src/組件/你好世界.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>
我希望這對您有所幫助,我試圖解釋如何使用它,但正如您所說,沒有關(guān)于它的文檔,所以也許這很棘手,但它有效。
添加回答
舉報