

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タグが再生できなくなってしまいます。  
自力で解決できなく困ってます。どうかご助力の方お待ちしてます。

HTML

[code]

    <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>
    
[/code]

javascript

[code]

    <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>
    
[/code]


CC BY-SA 4.0
2021-03-23T08:34:59.557
74836
2021-03-23T09:28:59.713
2021-03-23T09:28:59.713
3060
40290
question
javascript audio
javascript blob.slice()でカットしたオーディオデータが思い通りの動きにならない。