musicbox-js v1.0.3

musicbox

h5音乐盒

安装

npm install musicbox-js

或者使用script

   <script src="http://img.suiblog.cn/MusicBox.js"></script>

尽量下载下来，我很快就会删除这个单个的js文件

使用(发出单个音符)

import {Music, MusicBox} from 'musicbox-js';//或者require
let mius=new Music();
//由于浏览器的原因,不允许直接发声,必须通过事件来出发才行
document.addEventListener("click",function(){
     mius.createMusic("1");//发出中音Do 
});

参数是一个对象,有如下选项

new Music({
  type:'sawtooth',
  number:4,
  volume:1.5
});//锯齿波 持续四秒 音量1.5

.createMusic

new Music类后得到实例需要在实例上调用.createMusic方法才会真正的发出一个音符而且,由于浏览器的安全策略直接发声不可以，必须用户于文档有交互(点击时间)才可以发声

参数为string类型，限制在 字符串 c d e f g a b 1 2 3 4 5 6 7 C D E F G A B区分大小写

下面的表显示了各个参数分别代表什么值

低音

中音

高音

let mius=new Music();

document.addEventListener("click",function(){
     mius.createMusic("B");//发出中音Xi
     
});

使用Music类只能发出单个音符，要想发出连续的音符音乐,则必须使用MusicBox类

new MusicBox();

let box = new MusicBox({
        musicScore:'1-2-3-4-5-6-7',
        speed:60,
        playCompleted() {
                    console.log('播放完成')
         },
         playChange(n){
                  console.log(n)
         }
});  
//需要在MusicBox的实例上调用.play方法才可以播放,同样的，也需要实践触发
document.addEventListener("click",function(){
    box.play();//依次发出 do re mi fa so la xi
}）

musicScore说明

若字符串连在一起则为同时发音

let box = new MusicBox({
        musicScore:'1234567',
});

这样是一下子全部发出 do re mi fa so la xi

要想依次发出,

要有间隔的发出要使用一下符号表示音符休止时间(间断时间)

    let box = new MusicBox({
                musicScore:'1=2=3=1=1=2=3=1=3=4=5=3=4=5=5=6=5=4=3=1=5=6=5=4=3=1=1=g=1=1=g=1',
                speed:40,
                type:"sawtooth",//锯齿波形
                volume:1.2,//音量1.2
                duration:3,//持续时间3
                playCompleted() {
                    console.log('播放完成')
                },
                playChange(n){
                  console.log(n)
                }
        });    
 document.addEventListener("click",function(){
      box.play();//
});

在vue中使用

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

<script>
import {Music, MusicBox} from 'musicbox-js';//或者require

export default {
  data () {
    return {

    }
  },
  methods: {
   play(){
    let mius=new Music();
        mius.createMusic("1");//发出中音Do
   }
  },
  components: {

  }
}
</script>

在vue中暂时还是只能这样用,后续我会推出专门用于vue的版本