大家好，我是香江鱼。闲话不说，接着上一集继续搞起来！

2.*放播**音符的实现

先是制作音符素材，我使用了开源免费作曲软件MuseScore来完成钢琴音符素材的制作。这样可以规避音频的版权问题。

头条小程序《音乐画板》钢琴音符素材制作软件MuseScore

而音乐的*放播**主要靠小程序API中的InnerAudioContext来实现，但是……小程序的InnerAudioContext竟然不支持本地音频文件的*放播**，必须使用外链地址，还得配置安全域名，难道我还得弄个域名和服务器吗？还得花钱？还得备案？太麻烦了！又试了试小游戏，小游戏倒是可以，不过小游戏又需要办理软件著作权登记，也得花钱，也很麻烦。

算了，再想想吧。

后来，折腾来折腾去，发现了腾讯的云对象存储COS，还可以配https域名，好，用这个可以试试。

申请，上传文件，配置域名白名单……再测试，成了！可以*放播**了！

但是问题很快又来了：在开发工具中调试正常，但真机调试却死活不行！

好，再研究，再尝试，终于发现了问题所在：音频文件格式必须是mp3，而我一直习惯用ogg和wav。

于是，开始重新把素材转换成mp3格式，再上传，再测试，嘿嘿，O了！

头条小程序《音乐画板》开发，音频素材使用了腾讯云对象存储平台COS。

上点代码：

...
    let soundsURL = "https://musicanvas-******.myqcloud.com/sounds/";
    this.sounds = {};
    this.soundsName = ['C4','D4','E4','F4'];
    this.soundsName.forEach((v,k)=>{
      //this.testinfo(v);
      this.sounds[v] = tt.createInnerAudioContext();
      this.sounds[v].src = `${soundsURL}${v}.mp3`;
    });
...

3.随着画笔弹奏歌曲的实现

有了上面打的基础，接下来的工作就简单了，封装好随着画笔演奏乐曲的机制。

这个过程还是比较顺利的。

但是，到了调试的时候……

开发工具上表现很好，没有问题，但在真机上调试又出问题了：每一笔不是*放播**一个音符，而是*放播**好几个音符，这又是怎么回事呢？

继续折腾，最后发现原因了：真机上按下手指时竟然调用了3次touchstart事件！

目前不知道是由于什么造成的，是Bug还是一种特性？不得而知。还好手指抬起时只引发一次touchend事件，OK，那就软解决吧！

现在演奏是没有问题了，但是在开发工具上非常地流畅，但是在真机调试时*放播**就十分地卡顿，不知道上线后会不会好一些呢？

哈哈，不管怎么说，终于实现了一笔一音符的功能了！

香江鱼头条小程序音乐画板开发测试一笔一音符演示

然后又设置了一个尝鲜歌曲《两只老虎》。

开发演示视频：

视频加载中...

好的，这一集就到这里，我是香江鱼，喜欢的朋友请大力支持！

下一集是：头条小程序《音乐画板》开发手记（3）：优化调整及尝鲜版发布