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

2.播放音符的实现

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

头条小程序《音乐画板》开发手记(2):播放音符和弹奏歌曲插图

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

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

算了,再想想吧。

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

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

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

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

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

头条小程序《音乐画板》开发手记(2):播放音符和弹奏歌曲插图1

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

上点代码:

letsoundsURL =“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,那软解决吧!

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

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

头条小程序《音乐画板》开发手记(2):播放音符和弹奏歌曲插图2

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

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

开发演示视频:

重播
播放
00:00/00:00正在直播
00:00
进入全屏
50
点击按住可拖动视频

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

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

作者 nasiapp

在线客服
官方客服
我们将24小时内回复。
12:01
您好,有任何疑问请与我们联系!

选择聊天工具: