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

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

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

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

Q&A

解決済

1回答

2484閲覧

Javascript 音声録音機能 呼び出し

cuku

総合スコア108

JavaScript

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

0グッド

1クリップ

投稿2019/01/21 04:27

https://stackoverflow.com/questions/45003548/how-to-capture-generated-audio-from-window-speechsynthesis-speak-call
上記のサイトのコードをコピーして動かしてみようと思ったのですがどこから呼び出されるのかわかりません。
普通、ロード時ならwindows.onload、クリックした時ならfunction oncklick()などの関数が呼び出されますが下記のコードはclass SpeechSynthesisRecorder を作ってもう一方のjsでインスタンス化してあげています。
例えば、このコードを動かしたいときにはhtmlで<button onclick="speech();">test</button>とイベントを設定してあげて class SpeechSynthesisRecorderではないほうのjsをfunction speech(){}で囲ってあげればいいのでしょうか?
上記サイトのコードは下記のと同じです

javascript

1class SpeechSynthesisRecorder { 2 constructor({text = "", utteranceOptions = {}, recorderOptions = {}, dataType = ""}) { 3 if (text === "") throw new Error("no words to synthesize"); 4 this.dataType = dataType; 5 this.text = text; 6 this.mimeType = MediaRecorder.isTypeSupported("audio/webm; codecs=opus") 7 ? "audio/webm; codecs=opus" : "audio/ogg; codecs=opus"; 8 this.utterance = new SpeechSynthesisUtterance(this.text); 9 this.speechSynthesis = window.speechSynthesis; 10 this.mediaStream_ = new MediaStream(); 11 this.mediaSource_ = new MediaSource(); 12 this.mediaRecorder = new MediaRecorder(this.mediaStream_, { 13 mimeType: this.mimeType, 14 bitsPerSecond: 256 * 8 * 1024 15 }); 16 this.audioContext = new AudioContext(); 17 this.audioNode = new Audio(); 18 this.chunks = Array(); 19 if (utteranceOptions) { 20 if (utteranceOptions.voice) { 21 this.speechSynthesis.onvoiceschanged = e => { 22 const voice = this.speechSynthesis.getVoices().find(({ 23 name: _name 24 }) => _name === utteranceOptions.voice); 25 this.utterance.voice = voice; 26 console.log(voice, this.utterance); 27 } 28 this.speechSynthesis.getVoices(); 29 } 30 let { 31 lang, rate, pitch 32 } = utteranceOptions; 33 Object.assign(this.utterance, { 34 lang, rate, pitch 35 }); 36 } 37 this.audioNode.controls = "controls"; 38 document.body.appendChild(this.audioNode); 39 } 40 start(text = "") { 41 if (text) this.text = text; 42 if (this.text === "") throw new Error("no words to synthesize"); 43 return navigator.mediaDevices.getUserMedia({ 44 audio: true 45 }) 46 .then(stream => new Promise(resolve => { 47 const track = stream.getAudioTracks()[0]; 48 this.mediaStream_.addTrack(track); 49 // return the current `MediaStream` 50 if (this.dataType && this.dataType === "mediaStream") { 51 resolve({tts:this, data:this.mediaStream_}); 52 }; 53 this.mediaRecorder.ondataavailable = event => { 54 if (event.data.size > 0) { 55 this.chunks.push(event.data); 56 }; 57 }; 58 this.mediaRecorder.onstop = () => { 59 track.stop(); 60 this.mediaStream_.getAudioTracks()[0].stop(); 61 this.mediaStream_.removeTrack(track); 62 console.log(`Completed recording ${this.utterance.text}`, this.chunks); 63 resolve(this); 64 } 65 this.mediaRecorder.start(); 66 this.utterance.onstart = () => { 67 console.log(`Starting recording SpeechSynthesisUtterance ${this.utterance.text}`); 68 } 69 this.utterance.onend = () => { 70 this.mediaRecorder.stop(); 71 console.log(`Ending recording SpeechSynthesisUtterance ${this.utterance.text}`); 72 } 73 this.speechSynthesis.speak(this.utterance); 74 })); 75 } 76 blob() { 77 if (!this.chunks.length) throw new Error("no data to return"); 78 return Promise.resolve({ 79 tts: this, 80 data: this.chunks.length === 1 ? this.chunks[0] : new Blob(this.chunks, { 81 type: this.mimeType 82 }) 83 }); 84 } 85 arrayBuffer(blob) { 86 if (!this.chunks.length) throw new Error("no data to return"); 87 return new Promise(resolve => { 88 const reader = new FileReader; 89 reader.onload = e => resolve(({ 90 tts: this, 91 data: reader.result 92 })); 93 reader.readAsArrayBuffer(blob ? new Blob(blob, { 94 type: blob.type 95 }) : this.chunks.length === 1 ? this.chunks[0] : new Blob(this.chunks, { 96 type: this.mimeType 97 })); 98 }); 99 } 100 audioBuffer() { 101 if (!this.chunks.length) throw new Error("no data to return"); 102 return this.arrayBuffer() 103 .then(ab => this.audioContext.decodeAudioData(ab)) 104 .then(buffer => ({ 105 tts: this, 106 data: buffer 107 })) 108 } 109 mediaSource() { 110 if (!this.chunks.length) throw new Error("no data to return"); 111 return this.arrayBuffer() 112 .then(({ 113 data: ab 114 }) => new Promise((resolve, reject) => { 115 this.mediaSource_.onsourceended = () => resolve({ 116 tts: this, 117 data: this.mediaSource_ 118 }); 119 this.mediaSource_.onsourceopen = () => { 120 if (MediaSource.isTypeSupported(this.mimeType)) { 121 const sourceBuffer = this.mediaSource_.addSourceBuffer(this.mimeType); 122 sourceBuffer.mode = "sequence" 123 sourceBuffer.onupdateend = () => 124 this.mediaSource_.endOfStream(); 125 sourceBuffer.appendBuffer(ab); 126 } else { 127 reject(`${this.mimeType} is not supported`) 128 } 129 } 130 this.audioNode.src = URL.createObjectURL(this.mediaSource_); 131 })); 132 } 133 readableStream({size = 1024, controllerOptions = {}, rsOptions = {}}) { 134 if (!this.chunks.length) throw new Error("no data to return"); 135 const src = this.chunks.slice(0); 136 const chunk = size; 137 return Promise.resolve({ 138 tts: this, 139 data: new ReadableStream(controllerOptions || { 140 start(controller) { 141 console.log(src.length); 142 controller.enqueue(src.splice(0, chunk)) 143 }, 144 pull(controller) { 145 if (src.length = 0) controller.close(); 146 controller.enqueue(src.splice(0, chunk)); 147 } 148 }, rsOptions) 149 }); 150 } 151}

Javascript

1let ttsRecorder = new SpeechSynthesisRecorder({ 2 text: "The revolution will not be televised", 3 utternanceOptions: { 4 voice: "english-us espeak", 5 lang: "en-US", 6 pitch: .75, 7 rate: 1 8 } 9 }); 10 11 // ArrayBuffer 12 ttsRecorder.start() 13 // `tts` : `SpeechSynthesisRecorder` instance, `data` : audio as `dataType` or method call result 14 .then(tts => tts.arrayBuffer()) 15 .then(({tts, data}) => { 16 tts.audioNode.src = URL.createObjectURL(new Blob([data], {type:tts.mimeType})); 17 tts.audioNode.title = tts.utterance.text; 18 tts.audioNode.onloadedmetadata = () => { 19 console.log(tts.audioNode.duration); 20 tts.audioNode.play(); 21 } 22 }) 23 // AudioBuffer 24 ttsRecorder.start() 25 .then(tts => tts.audioBuffer()) 26 .then(({tts, data}) => { 27 // `data` : `AudioBuffer` 28 let source = tts.audioContext.createBufferSource(); 29 source.buffer = data; 30 source.connect(tts.audioContext.destination); 31 source.start() 32 }) 33 // Blob 34 ttsRecorder.start() 35 .then(tts => tts.blob()) 36 .then(({tts, data}) => { 37 // `data` : `Blob` 38 tts.audioNode.src = URL.createObjectURL(blob); 39 tts.audioNode.title = tts.utterance.text; 40 tts.audioNode.onloadedmetadata = () => { 41 console.log(tts.audioNode.duration); 42 tts.audioNode.play(); 43 } 44 }) 45 // ReadableStream 46 ttsRecorder.start() 47 .then(tts => tts.readableStream()) 48 .then(({tts, data}) => { 49 // `data` : `ReadableStream` 50 console.log(tts, data); 51 data.getReader().read().then(({value, done}) => { 52 tts.audioNode.src = URL.createObjectURL(value[0]); 53 tts.audioNode.title = tts.utterance.text; 54 tts.audioNode.onloadedmetadata = () => { 55 console.log(tts.audioNode.duration); 56 tts.audioNode.play(); 57 } 58 }) 59 }) 60 // MediaSource 61 ttsRecorder.start() 62 .then(tts => tts.mediaSource()) 63 .then(({tts, data}) => { 64 console.log(tts, data); 65 // `data` : `MediaSource` 66 tts.audioNode.srcObj = data; 67 tts.audioNode.title = tts.utterance.text; 68 tts.audioNode.onloadedmetadata = () => { 69 console.log(tts.audioNode.duration); 70 tts.audioNode.play(); 71 } 72 }) 73 // MediaStream 74 let ttsRecorder = new SpeechSynthesisRecorder({ 75 text: "The revolution will not be televised", 76 utternanceOptions: { 77 voice: "english-us espeak", 78 lang: "en-US", 79 pitch: .75, 80 rate: 1 81 }, 82 dataType:"mediaStream" 83 }); 84 ttsRecorder.start() 85 .then(({tts, data}) => { 86 // `data` : `MediaStream` 87 // do stuff with active `MediaStream` 88 }) 89 .catch(err => console.log(err))

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

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

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

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

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

m.ts10806

2019/01/21 04:29

stackoverflowはteratailと同じ質問サイトです。 これをそのままで動くとは限りませんよ。質問の前提や背景まで含めて読み取る必要があります。
miyabi-sun

2019/01/21 04:56

> jsをfunction speech(){}で囲ってあげればいいのでしょうか? スタフロの記事の該当部分には「Usage」とバッチリ書かれています。 Usageが「使い方」と知らないのは英語のドキュメントを読む力が不足しているので、コピペ君で終わらずに、頑張って読む癖つけてください。 もしUsageと知ってるにも掛からわず、ざっと読んで分からないなら素直に実力不足です。 インデントはともかく設計があまりキレイじゃないし読みたくはありませんね。 クラス膨れ上がりすぎじゃね?本気でこれ使いたいの?私はこのコードで責任持ちたくないですね。 SpeechSynthesisRecorderクラスを参考にエッセンスだけ取り出して残りを自力実装する実力や気概がないならそもそも手を出さない方が良いでしょう。
cuku

2019/01/21 05:10

ご回答ありがとうございます。 miyabiさんUsageが「使い方」というのは知っていましたがどうやって使うのかがわからないです。 実力不足ということですね。
wwbQzhMkhhgEmhU

2019/01/21 06:32

元記事のplnkrってリンクからデモHTMLへのリンクがあります。 普通に読んでも分かるし、どこをどう辿っても行き着くし、本来は教えてもらうような話でもありません。 英語は全部読みましょう。 ブラウザ上のデバッガでJavaScriptを止めながら動かせば何をしているか分かるはずです。 どうしてそんなことをしているのか分からなければ、また聞けばいいかと思います。 ただし、1つずつ聞きましょう。そうすれば分からない部分が段々見えてくるはずです。 ただ、前回も言いましたが音が小さくなったし、本来無音で録音したいだろうけど、音が出ます。音質も悪かったです。 なんのために聞いているか分かりませんが、前回私からも言ってるように何段階か先のことをしてるように見える(背伸びしてる感がある)ので、別の学習に手を付けた方が効率はいいかもしれません。以上です。
cuku

2019/01/21 06:44

>元記事のplnkrってリンクからデモHTMLへのリンクがあります。 デモリンクに行ったのですが再生ボタンが押せません。
wwbQzhMkhhgEmhU

2019/01/21 06:49

やっぱりあなたにはまだ早すぎるようです。 私が書いたことも伝わっていないようですし。 ハッキリ言います。押せませんじゃねーよw
guest

回答1

0

ベストアンサー

質問頂きありがとうございます
全部コピペしてscriptタグに突っ込めば動くと思います

投稿2019/01/23 13:36

bochan2

総合スコア2050

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問