javascriptを使い30秒だけ切り取ったオーディオデータを投稿するポートフォリオアプリを作っています。
FFmpeg.jsライブラリを使いwavデータに変換させてinputのrangeでスタート地点をきめてそこから30秒切り取る動作にしたいのですが、 blob.slice() の第一引数が0のときは0秒から30秒切り取られたものがaudioタグのsrcに反映されて再生します。
しかし0以外にするとaudioタグが再生できなくなってしまいます。
自力で解決できなく困ってます。どうかご助力の方お待ちしてます。
HTML
<input class="upload_hidden offset-9" type="file" id="sound" accept="audio/*" name="sound">
<div id="currentTime"></div>
<div id="audition"></div>
<div id="resize"></div>
javascript
<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.9.4/dist/ffmpeg.min.js"></script>
<script>
const sound = document.getElementById('sound');
const title = document.getElementById('title');
const resize = document.getElementById('resize');
const audition = document.getElementById('audition');
const currentTime = document.getElementById('currentTime');
const {
createFFmpeg,
fetchFile
} = FFmpeg;
const ffmpeg = createFFmpeg({
log: true
});
const transcode = async ({
target: {
files
}
}) => {
await ffmpeg.load();
ffmpeg.FS('writeFile', 'music', await fetchFile(files[0]));
await ffmpeg.run('-i', 'music', '-vn', '-ac', '2', '-ar', '44100', '-acodec', 'pcm_s16le', '-f', 'wav', 'output.wav');
const data = ffmpeg.FS('readFile', 'output.wav');
dataUrl = URL.createObjectURL(new Blob([data.buffer], {
type: 'audio/wav'
}));
audition.innerHTML = '<audio src="' + dataUrl + '"controls id="sample"></audio>';
const fileTitle = (() => {
const files = sound.files;
const reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = () => {
currentTime.innerHTML = '<input type="range" value="0" id="sampleCurrentTime" min="0" step="1" onchange="setCurrentTime(this.value)">';
const elementReference = document.getElementById('sample');
const sampleCurrentTime = document.getElementById('sampleCurrentTime');
const timer = setInterval(() => {
if (elementReference.readyState > 0) {
sampleCurrentTime.max = elementReference.duration; //デフォルトでrangeの総再生時間が反映されないのでそれを処理
clearInterval(timer);
}
}, 300);
console.log(elementReference.duration);
resize.innerHTML = '<button type="button" id=change>30秒ピックアップ<button>'
const change = document.getElementById('change');
change.addEventListener('click', async () => {
let postForm = null;
const byte = {
'start': parseInt(elementReference.currentTime * 0.172 * 1024 * 1024),
'end': parseInt((elementReference.currentTime + 30) * 0.172 * 1024 * 1024)
};
const sliceData = new Blob([data.buffer], {
type: "audio/wav"
}).slice(byte.start, byte.end, 'audio/wav');
const reader = new FileReader();
reader.readAsDataURL(sliceData);
reader.onload = () => {
let dataURI = reader.result;
console.log(dataURI);
audition.innerHTML = '<audio src="' + dataURI + '"controls id="sample"></audio>';
}
});
};
})
fileTitle();
}
const setCurrentTime = (currentTime) => {
const elementReference = document.getElementById('sample');
elementReference.currentTime = currentTime;
}
sound.addEventListener('change', transcode);
</script>