mirror of
https://github.com/wiwikuan/metro3.git
synced 2025-10-03 00:56:17 +00:00
282 lines
8.7 KiB
HTML
282 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>不囉唆的節拍器 3.0 by NiceChord 好和弦</title>
|
||
<style>
|
||
|
||
a {
|
||
color:rgb(17, 81, 136);
|
||
font-weight: bolder;
|
||
}
|
||
input {
|
||
font-family: monospace;
|
||
margin-top: 0px;
|
||
font-size: 24px;
|
||
}
|
||
button {
|
||
padding: 1px 14px;
|
||
font-size: 20px;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
|
||
border-radius: 3px;
|
||
border: 1px #777;
|
||
background: #eee;
|
||
box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.2), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.5), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.2);
|
||
color: #333;
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
touch-action: manipulation;
|
||
}
|
||
button:focus {
|
||
box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2), 0px 0.5px 1px rgba(0, 0, 0, 0.1), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5);
|
||
outline: 0;
|
||
}
|
||
.error-message {
|
||
color: red;
|
||
font-size: 14px;
|
||
margin-left: 10px;
|
||
}
|
||
.preset-buttons {
|
||
margin-top: 8px;
|
||
}
|
||
.preset-buttons button {
|
||
margin-right: 2px;
|
||
font-size: 16px;
|
||
padding: 0px 8px;
|
||
}
|
||
#subbeats {
|
||
font-size: 16px
|
||
}
|
||
p {
|
||
line-height: 1.1;
|
||
margin-bottom: 10px;
|
||
margin-top: 0px;
|
||
}
|
||
p + p {
|
||
margin-top: 0px;
|
||
}
|
||
</style>
|
||
<body>
|
||
<p><b>不囉唆的節拍器 3.0</b> by <a href="https://nicechord.com/">NiceChord 好和弦</a><br /></p>
|
||
<input id="bpm" type="number" value="100" min="1" max="999" onchange="updateBPM();" onclick="select_all();" onkeypress="onTestChange();">
|
||
<button id="start" type="button" ontouchend="metrostart();" onclick="metrostart();">開始</button>
|
||
<button id="stop" type="button" ontouchend="metrostop();" onclick="metrostop();">停止</button>
|
||
|
||
<p><br />輸入拍子細分割（0 到 1 之間數字，用逗號分隔）：</p>
|
||
<input id="subbeats" type="text" placeholder="例如：0.5 或 0.25,0.5,0.75" oninput="updateSubBeats();" style="width: 300px;">
|
||
<span id="error-message" class="error-message"></span>
|
||
<p><br />快速設定：</p>
|
||
<div class="preset-buttons">
|
||
<button onclick="setPreset('0.5')">八分</button>
|
||
<button onclick="setPreset('0.333,0.666')">三連音</button>
|
||
<button onclick="setPreset('0.25,0.5,0.75')">十六分</button>
|
||
<button onclick="setPreset('0.75')">附點</button>
|
||
<button onclick="setPreset('0.666')">66% Swing</button>
|
||
</div>
|
||
<div class="preset-buttons">
|
||
<button onclick="setPreset('0.2,0.4,0.6,0.8')">五連音</button>
|
||
<button onclick="setPreset('0.166,0.333,0.5,0.666,0.833')">六連音</button>
|
||
<button onclick="setPreset('0.143,0.286,0.429,0.571,0.714,0.857')">七連音</button>
|
||
<button onclick="setPreset('0.333,0.5,0.666')">二對三</button>
|
||
<button onclick="setPreset('0.58')">有點 Swing</button>
|
||
</div>
|
||
|
||
<script type="text/javascript">
|
||
let audioContext = null;
|
||
let isPlaying = false;
|
||
let bpm = 100;
|
||
let subBeatPositions = [];
|
||
let lookahead = 25; // 預先排程的時間（毫秒）
|
||
let scheduleAheadTime = 0.1; // 預先排程的秒數
|
||
let nextNoteTime = 0.0; // 下一個音符的時間
|
||
let timerID = null; // 排程計時器
|
||
let noteLength = 0.05; // 主拍音符長度（秒）
|
||
let subBeatLength = 0.03; // 副拍音符長度（秒）
|
||
let noteFrequency = 523.25; // C5 頻率
|
||
let subBeatFrequency = 392; // G4 頻率
|
||
|
||
// 初始化
|
||
function init() {
|
||
bpm = document.getElementById('bpm').value;
|
||
|
||
// 檢查瀏覽器支援
|
||
try {
|
||
window.AudioContext = window.AudioContext || window.webkitAudioContext;
|
||
audioContext = new AudioContext();
|
||
} catch(e) {
|
||
alert('Web Audio API 不被您的瀏覽器支援。');
|
||
}
|
||
}
|
||
|
||
// 排程主拍音符
|
||
function scheduleNote(time) {
|
||
// 振盪器
|
||
const osc = audioContext.createOscillator();
|
||
osc.type = 'square';
|
||
osc.frequency.value = noteFrequency;
|
||
|
||
// 音量
|
||
const gainNode = audioContext.createGain();
|
||
gainNode.gain.value = 0.25;
|
||
|
||
// ADSR
|
||
gainNode.gain.setValueAtTime(0.25, time);
|
||
gainNode.gain.exponentialRampToValueAtTime(0.01, time + noteLength);
|
||
|
||
// 連接節點
|
||
osc.connect(gainNode);
|
||
gainNode.connect(audioContext.destination);
|
||
|
||
// 啟動和停止振盪器
|
||
osc.start(time);
|
||
osc.stop(time + noteLength);
|
||
}
|
||
|
||
// 排程副拍音符
|
||
function scheduleSubBeat(time) {
|
||
// 振盪器
|
||
const osc = audioContext.createOscillator();
|
||
osc.type = 'square';
|
||
osc.frequency.value = subBeatFrequency;
|
||
|
||
// 音量（比主拍小一點）
|
||
const gainNode = audioContext.createGain();
|
||
gainNode.gain.value = 0.15;
|
||
|
||
// ADSR
|
||
gainNode.gain.setValueAtTime(0.15, time);
|
||
gainNode.gain.exponentialRampToValueAtTime(0.01, time + subBeatLength);
|
||
|
||
// 連接節點
|
||
osc.connect(gainNode);
|
||
gainNode.connect(audioContext.destination);
|
||
|
||
// 啟動和停止振盪器
|
||
osc.start(time);
|
||
osc.stop(time + subBeatLength);
|
||
}
|
||
|
||
// 排程器（負責預先排程音符）
|
||
function scheduler() {
|
||
while (nextNoteTime < audioContext.currentTime + scheduleAheadTime) {
|
||
// 排程主拍
|
||
scheduleNote(nextNoteTime);
|
||
|
||
// 排程所有副拍
|
||
let secondsPerBeat = 60.0 / bpm;
|
||
subBeatPositions.forEach(position => {
|
||
scheduleSubBeat(nextNoteTime + secondsPerBeat * position);
|
||
});
|
||
|
||
nextBeat();
|
||
}
|
||
timerID = setTimeout(scheduler, lookahead);
|
||
}
|
||
|
||
// 計算下一個音符時間
|
||
function nextBeat() {
|
||
// 根據 BPM 計算四分音符的時間（秒）
|
||
let secondsPerBeat = 60.0 / bpm;
|
||
|
||
// 增加時間到下一個音符
|
||
nextNoteTime += secondsPerBeat;
|
||
}
|
||
|
||
// 開始節拍器
|
||
function metrostart() {
|
||
// 如果 AudioContext 暫停或尚未初始化，則初始化或恢復
|
||
if (!audioContext) {
|
||
init();
|
||
} else if (audioContext.state === 'suspended') {
|
||
audioContext.resume();
|
||
}
|
||
|
||
if (!isPlaying) {
|
||
isPlaying = true;
|
||
nextNoteTime = audioContext.currentTime;
|
||
scheduler();
|
||
}
|
||
}
|
||
|
||
// 停止節拍器
|
||
function metrostop() {
|
||
isPlaying = false;
|
||
clearTimeout(timerID);
|
||
}
|
||
|
||
// 更新 BPM
|
||
function updateBPM() {
|
||
bpm = parseInt(document.getElementById('bpm').value);
|
||
if (bpm < 1) bpm = 1;
|
||
if (bpm > 999) bpm = 999;
|
||
}
|
||
|
||
// 解析副拍設定
|
||
function parseSubBeats(inputString) {
|
||
if (!inputString || inputString.trim() === '') {
|
||
return [];
|
||
}
|
||
|
||
try {
|
||
const values = inputString.split(',').map(s => s.trim()).filter(s => s !== '');
|
||
const validPositions = [];
|
||
|
||
for (let value of values) {
|
||
const num = parseFloat(value);
|
||
if (isNaN(num)) continue;
|
||
if (num > 0 && num < 1) {
|
||
validPositions.push(num);
|
||
}
|
||
}
|
||
|
||
// 排序並去重
|
||
return [...new Set(validPositions)].sort();
|
||
} catch (e) {
|
||
throw new Error('解析錯誤');
|
||
}
|
||
}
|
||
|
||
// 更新副拍設定
|
||
function updateSubBeats() {
|
||
const input = document.getElementById('subbeats');
|
||
const errorElement = document.getElementById('error-message');
|
||
|
||
try {
|
||
subBeatPositions = parseSubBeats(input.value);
|
||
errorElement.textContent = '';
|
||
} catch (e) {
|
||
errorElement.textContent = '輸入格式錯誤';
|
||
subBeatPositions = [];
|
||
}
|
||
}
|
||
|
||
// 設定預設值
|
||
function setPreset(preset) {
|
||
document.getElementById('subbeats').value = preset;
|
||
updateSubBeats();
|
||
}
|
||
|
||
// 選取全部文字
|
||
function select_all() {
|
||
document.getElementById('bpm').select();
|
||
}
|
||
|
||
// 按下 Enter 時啟動節拍器
|
||
function onTestChange() {
|
||
var key = window.event.keyCode;
|
||
|
||
// 如果使用者按下 Enter
|
||
if (key === 13) {
|
||
metrostart();
|
||
return false;
|
||
} else {
|
||
return true;
|
||
}
|
||
}
|
||
|
||
// 當頁面載入完成後初始化
|
||
window.addEventListener('load', function() {
|
||
init();
|
||
});
|
||
</script>
|
||
</body>
|