ycc.js
Version:
Mini and powerful canvas engine for creating App or Game.
147 lines (119 loc) • 2.75 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<title>音频示例</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<div class="return-btn">
<a href="../">
返回首页
</a>
</div>
<div class="tip">
<h3>示例说明：</h3>
<div>
1、这个示例展示系统的音频播放功能。<br>
2、点击播放，一首《那女孩对我说》送给你。<br>
</div>
<br><br>
</div>
<button onclick="play()" id="play" disabled>播放</button>
<button onclick="stop()">停止</button>
</body>
</html>
<script src="http://localhost:9000/livereload.js"></script>
<script src="../common.js"></script>
<script src="../../build/ycc.js"></script>
<script>
var ycc = new Ycc();
ycc.bindCanvas(ycc.createCanvas());
// 将字符串转为某个音
String.prototype.toTone = function (type) {
return this.split('').map(function(item){
if(item==='0') return '00';
return item+type;
}).join(' ');
};
var resArr = [
// '31!','32!','33!','34!','35!','36!','37!',
'41!','42!','43!','44!','45!','46!','47!',
'51!','52!','53!','54!','55!','56!','57!',
'61!','62!','63!','64!','65!','66!','67!',
].map(function(item){
return {name:item,url:'./'+item+'.mp3',type:'audio'};
});
var map = {
'1d':'41!',
'2d':'42!',
'3d':'43!',
'4d':'44!',
'5d':'45!',
'6d':'46!',
'7d':'47!',
'1e':'51!',
'2e':'52!',
'3e':'53!',
'4e':'54!',
'5e':'55!',
'6e':'56!',
'7e':'57!',
'1f':'61!',
'2f':'62!',
'3f':'63!',
'4f':'64!',
'5f':'65!',
'6f':'66!',
'7f':'67!',
};
var song = [];
// 那女孩对我说 500ms
song = [
'5e 6e 1f 1f 6e 2f 00',
'2f 7e 2f 3f 3f 7e 1f 00',
'1f 7e 5e 6e 6e 00',
'6e 5e 6e 3e 3e 2e 3e 00',
'5e 6e 1f 4f 3f 2f 00',
'2f 7e 2f 3f 3f 7e 1f 00',
'1f 7e 3f 3f 7e 6e 00',
'6e 7e 1f 5f 3f 4f 3f 00',
//
'5e 6e 1f 1f 6e 2f 00',
'2f 7e 2f 3f 3f 7e 1f 00',
'1f 7e 5e 6e 6e 00',
'6e 5e 6e 3e 3e 2e 3e 00',
'5e 6e 1f 4f 3f 2f 00',
'2f 7e 2f 3f 3f 7e 1f 00',
'1f 7e 3f 3f 7e 6e 00',
'6e 1f 3f 4f 2f 7e 1f 00'
];
ycc.loader.loadResOneByOne(resArr,function(resArr){
onLoad();
});
function onLoad(){
document.getElementById('play').disabled=false;
}
var timerid = 0;
function play(){
var index = 0;
timerid=setInterval(function(){
var key = song.join(' ').split(' ')[index];
var resName = map[key];
var tone = ycc.loader.getResByName(resName,resArr);
if(tone) {
console.log(key,tone);
tone.res.play();
}
index++;
},200);
}
function stop() {
clearInterval(timerid);
}
// 获取乐谱字符串
function getSongMelody(){
return song.join(' ');
}
</script>