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 
});

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

| 参数 | type | duration | volume | | ------ | :----------------------------------------------------------: | :------------: | :----: | | 类型 | string | number | number | | 默认值 | sine | 2 | 1 | | 作用 | 设置声音波形 sine 正弦波|square 方块波 | triangle 三角波 | 锯齿波 sawtooth | 声音的持续时间 | 音量 |

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区分大小写

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

低音

| c | 低音do | | ---- | ------ | | d | 低音re | | e | 低音mi | | f | 低音fa | | g | 低音so | | a | 低音la | | b | 低音xi |

中音

| 1 | 中音do | | ---- | ------ | | 2 | 中音re | | 3 | 中音mi | | 4 | 中音fa | | 5 | 中音so | | 6 | 中音la | | 7 | 中音xi |

高音

| C | 高音do | | ---- | ------ | | D | 高音re | | E | 高音mi | | F | 高音fa | | G | 高音so | | A | 高音la | | B | 高音xi |

let mius=new Music();

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

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

new MusicBox();

| 参数 | speed | musicScore | loop | playCompleted | playChange | | ------ | ------------------ | ---------------------- | ------------ | ------------------------------------------------------ | ------------------------------ | | 类型 | number | string | boolean | function | function | | 默认值 | 60 | 必须 | false | 无 | 无 | | 作用 | 播放速度值越大越快 | 要播放的连续音符(乐谱) | 是否循环播放 | 播放完成的回调函数(注意,要是设置了loop为true,不会触发) | 每播放一个音符就会触发这个函数 |

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的版本