HTML5 piano play nav.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dev
dist
src
README.md

README.md

piano-play

##基于html5的钢琴弹奏游戏

##功能

  • 看谱弹琴
  • 录制曲子
  • 分享曲子
  • 弹奏试听

##2016-12-10更新

  • 更新demo样式
  • 优化代码,抽出为组件
  • piano-play.js 可直接被引用或者AMD、CMD方式加载
  • 增加动画
  • 取消本地保存曲子功能

##构建 使用WeFlow:http://weflow.io

##piano-play.js ###引用

可直接被引用或者AMD、CMD方式加载

var piano = new Piano({
	playKeyCallback: function(i){},
});

###options

albumList: {	// 曲谱json数据
	"小星星": "11556650443322105544332055443320115566504433221",
	"茉莉花": "33568865056503356886505650555356066503235032101210321203568650523532121",
},
keyboard: {		// 曲谱-键盘定义
	"1": "A",
	"2": "S",
	"3": "D",
	"4": "F",
	"5": "G",
	"6": "H",
	"7": "J",
	"8": "K",
	"9": "L"
},
playKeyCallback: null,	// 按键i回调
randomPlay: true,		// 初始化时随机播放
timeSpace: 50,			// 节奏计时间隔 50ms
keyLen: 9,				// 默认9个key
mediaSrc: ''         // 音频路径前缀

###方法

  • getAudioFormat:检测支持audio的格式,mp3或者ogg
  • checkReady:检测是否全部音频加载完成
  • autoPlay:打开页面时自动播放,可以在url中传递参数#music=xxx或者页面打开时随机播放
  • playKey:根据key播放按键声音,0-9,0为空格
  • startRecord:开始录制
  • finishRecord:完成录制
  • cancelRecord:取消录制
  • getStatus:获取当前是否正在弹奏
  • previewSong:试听数据触发音乐,传入json数据
  • playOver:结束自动弹奏
  • analysis:分析链接,返回json
  • parseData:数组转成json数据
  • getAlbumList:获取曲谱列表,用于渲染
  • getKeyboard:获取曲谱-键盘定义

###曲谱格式

自动播放URL格式

#music=1:0-2:3-3:2-4:2-5:2-6:2-7:2-8:2-9:2

  • : 冒号前表示key
  • : 冒号后表示时间
  • 每个节奏使用-中划线分隔

曲谱json数据

小星星: 11556650443322105544332055443320115566504433221

  • 0:间隔符
  • 8、9:高音节拍,其余为低音节拍

  • 源码未经允许勿使用于其他网站!