質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1222閲覧

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

fuyukixxx

総合スコア26

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/03/22 11:15

編集2021/03/22 12:24

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

1コード 2<input class="upload_hidden offset-9" type="file" id="sound" accept="audio/*" name="sound"> 3<div id="currentTime"></div> 4<div id="audition"></div> 5<div id="resize"></div> 6

javascript

1コード 2<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.9.4/dist/ffmpeg.min.js"></script> 3 <script> 4const sound = document.getElementById('sound'); 5const title = document.getElementById('title'); 6const resize = document.getElementById('resize'); 7const audition = document.getElementById('audition'); 8const currentTime = document.getElementById('currentTime'); 9 10 11const { 12 createFFmpeg, 13 fetchFile 14 } = FFmpeg; 15 const ffmpeg = createFFmpeg({ 16 log: true 17 }); 18 const transcode = async ({ 19 target: { 20 files 21 } 22 }) => { 23 await ffmpeg.load(); 24 ffmpeg.FS('writeFile', 'music', await fetchFile(files[0])); 25 await ffmpeg.run('-i', 'music', '-vn', '-ac', '2', '-ar', '44100', '-acodec', 'pcm_s16le', '-f', 'wav', 'output.wav'); 26 27 const data = ffmpeg.FS('readFile', 'output.wav'); 28 29 dataUrl = URL.createObjectURL(new Blob([data.buffer], { 30 type: 'audio/wav' 31 })); 32 audition.innerHTML = '<audio src="' + dataUrl + '"controls id="sample"></audio>'; 33 34 const fileTitle = (() => { 35 const files = sound.files; 36 const reader = new FileReader(); 37 reader.readAsDataURL(files[0]); 38 39 reader.onload = () => { 40 currentTime.innerHTML = '<input type="range" value="0" id="sampleCurrentTime" min="0" step="1" onchange="setCurrentTime(this.value)">'; 41 const elementReference = document.getElementById('sample'); 42 const sampleCurrentTime = document.getElementById('sampleCurrentTime'); 43 44 const timer = setInterval(() => { 45 if (elementReference.readyState > 0) { 46 sampleCurrentTime.max = elementReference.duration; //デフォルトでrangeの総再生時間が反映されないのでそれを処理 47 clearInterval(timer); 48 } 49 }, 300); 50 51 52 console.log(elementReference.duration); 53 resize.innerHTML = '<button type="button" id=change>30秒ピックアップ<button>' 54 const change = document.getElementById('change'); 55 change.addEventListener('click', async () => { 56 let postForm = null; 57 const byte = { 58 'start': parseInt(elementReference.currentTime * 0.172 * 1024 * 1024), 59 'end': parseInt((elementReference.currentTime + 30) * 0.172 * 1024 * 1024) 60 }; 61 62 const sliceData = new Blob([data.buffer], { 63 type: "audio/wav" 64 }).slice(byte.start, byte.end, 'audio/wav'); 65 66 const reader = new FileReader(); 67 reader.readAsDataURL(sliceData); 68 reader.onload = () => { 69 let dataURI = reader.result; 70 console.log(dataURI); 71 audition.innerHTML = '<audio src="' + dataURI + '"controls id="sample"></audio>'; 72 } 73 }); 74 }; 75 }) 76 fileTitle(); 77 } 78 79 const setCurrentTime = (currentTime) => { 80 const elementReference = document.getElementById('sample'); 81 82 elementReference.currentTime = currentTime; 83 } 84 85 sound.addEventListener('change', transcode); 86</script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

投稿2021/03/24 13:46

ikadzuchi

総合スコア3047

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

fuyukixxx

2021/03/25 09:45

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

2021/03/26 00:46

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問