ここに私の問題があります
1)動的なy配列データがあり、その配列を使用して波を連続的に描画します。
Y 配列データが完了したら、同じ y 配列データを使用して続行します。
2)その配列値でのサウンドの自動再生は143です。停止しない場合は停止します。
これが私のコードです:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<canvas id="canvas" width="160" height="160" style="background-color: black;"></canvas>
<script type='text/javascript'>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle ="#dbbd7a";
ctx.fill();
var fps = 1000;
var n = 0;
var myAudio = new Audio("http://www-mmsp.ece.mcgill.ca/documents/AudioFormats/WAVE/Samples/AFsp/M1F1-uint8WE-AFsp.wav"); // buffers automatically when created
myAudio.addEventListener('ended', function() {
this.currentTime = 0;
this.play();
}, false);
animate();
function animate() {
setTimeout(function () {
requestAnimationFrame(animate);
ctx.lineWidth="2";
ctx.strokeStyle='green';
ctx.clearRect(0, 0, canvas.width, canvas.height);
// y axixs Data
var Ydata = [
148,149,149,150,150,150,143,82,82,82,82,82,82,82,
148,149,149,150,150,150,143,82,82,82,82,82,82,82,
148,149,149,150,150,150,143,82,82,82,82,82,82,82,
148,149,149,150,150,150,143,82,82,82,82,82,82,82,
148,149,149,150,150,150,143,82,82,82,82,82,82,82,
148,149,149,150,150,150,143,82,82,82,82,82,82,82,
148,149,149,150,150,150,143,82,82,82,82,82,82,82,
148,149,149,150,150,150,143,82,82,82,82,82,82,82,
148,149,149,150,150,150,143,82,82,82,82,82,82,82,
148,149,149,150,150,150,143,82,82,82,82,82,82,82,
];
// Drawing code goes here
n += 1.5;
if (n > 200) {
n = 0;
}
ctx.beginPath();
for (var x = 0; x < n; x++) {
if(Ydata[x] == '143')
myAudio.play();
ctx.lineTo(x, Ydata[x]);
}
ctx.stroke();
}, 1000/fps);
}
function stopAlarm()
{
myAudio.pause();
myAudio.currentTime = 0;
}
</script>
<button type="button" name="Stop" id="Stop" onclick="stopAlarm();">Stop Alarm</button>
</body>
</html>