javascript blob.slice()でカットしたオーディオデータが思い通りの動きにならない。

Question

javascriptを使い30秒だけ切り取ったオーディオデータを投稿するポートフォリオアプリを作っています。
FFmpeg.jsライブラリを使いwavデータに変換させてinputのrangeでスタート地点をきめてそこから30秒切り取る動作にしたいのですが、blob.slice()　https://lab.syncer.jp/Web/API_Interface/Reference/IDL/Blob/slice/
の第一引数が0のときは0秒から30秒切り取られたものがaudioタグのsrcに反映されて再生します。しかし0以外にするとaudioタグが再生できなくなってしまいます。
自力で解決できなく困ってます。どうかご助力の方お待ちしてます。

コード
<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>

コード
<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>

Answer 1

wavファイルのバイナリデータを適当な位置で切っただけのように見えますが、
ヘッダの内容を適切に処理しなければ正常なファイルにはなりません。
先頭はまだ長さが不正ながら再生はできるでしょうが、それ以外はヘッダが無いので再生できないでしょう。

また、他に気づく点として「0.172 * 1024 * 1024」という値が44.1kHzの値と微妙にずれている上に小数は正確な値が表せないので更に微妙にずれそうです。

Comments

[fuyukixxx]

wavの知識があまり定着していないのとmp3に変換したら思った動きになったので、それで進めていこうと思います。
回答ありがとうございました。

[ikadzuchi]

mp3ではできるのか…。まともな方法ではないのであまりやらない方がいいとは思いますが…。