65 lines
2.4 KiB
JavaScript
65 lines
2.4 KiB
JavaScript
// 例: 外部から生のWAVデータ(ArrayBuffer)を受け取って再生するには
|
|
// playRawWavData(wavArrayBuffer, '受信音声.wav');
|
|
// 音声再生バーを動的に生成
|
|
const audioBar = document.createElement('div');
|
|
audioBar.className = 'audio-bar';
|
|
audioBar.innerHTML = `
|
|
<input type="file" id="audioFile" accept="audio/*" style="display:none;">
|
|
<label for="audioFile" style="background:#0078d4;color:#fff;padding:6px 12px;border-radius:4px;cursor:pointer;">音声ファイル選択</label>
|
|
<button id="playBtn" disabled style="padding:6px 12px;border:none;border-radius:4px;background:#e1e1e1;cursor:pointer;">再生</button>
|
|
<button id="stopBtn" disabled style="padding:6px 12px;border:none;border-radius:4px;background:#e1e1e1;cursor:pointer;">停止</button>
|
|
<span id="fileName"></span>
|
|
`;
|
|
document.body.appendChild(audioBar);
|
|
|
|
const audioPlayer = document.createElement('audio');
|
|
audioPlayer.id = 'audioPlayer';
|
|
document.body.appendChild(audioPlayer);
|
|
|
|
const audioFile = document.getElementById('audioFile');
|
|
const playBtn = document.getElementById('playBtn');
|
|
const stopBtn = document.getElementById('stopBtn');
|
|
const fileName = document.getElementById('fileName');
|
|
|
|
let audioURL = null;
|
|
|
|
audioFile.addEventListener('change', function () {
|
|
const file = this.files[0];
|
|
if (file) {
|
|
if (audioURL) URL.revokeObjectURL(audioURL);
|
|
audioURL = URL.createObjectURL(file);
|
|
audioPlayer.src = audioURL;
|
|
playBtn.disabled = false;
|
|
stopBtn.disabled = false;
|
|
fileName.textContent = file.name;
|
|
}
|
|
});
|
|
|
|
playBtn.addEventListener('click', function () {
|
|
audioPlayer.play();
|
|
});
|
|
|
|
stopBtn.addEventListener('click', function () {
|
|
audioPlayer.pause();
|
|
audioPlayer.currentTime = 0;
|
|
});
|
|
|
|
audioPlayer.addEventListener('ended', function () {
|
|
audioPlayer.currentTime = 0;
|
|
});
|
|
|
|
// 生のWAVデータ(ArrayBuffer)を再生する関数
|
|
function playRawWavData(arrayBuffer, fileNameStr = 'audio.wav') {
|
|
// 既存のURLを解放
|
|
if (audioURL) URL.revokeObjectURL(audioURL);
|
|
// ArrayBufferからBlobを生成
|
|
const blob = new Blob([arrayBuffer], { type: 'audio/wav' });
|
|
audioURL = URL.createObjectURL(blob);
|
|
audioPlayer.src = audioURL;
|
|
playBtn.disabled = false;
|
|
stopBtn.disabled = false;
|
|
fileName.textContent = fileNameStr;
|
|
// 自動再生したい場合は下記を有効化
|
|
// audioPlayer.play();
|
|
}
|