編集履歴

質問編集履歴

変更

2019/01/17 06:49

投稿

cuku

スコア108

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,57 +1,589 @@
+https://github.com/guest271314/SpeechSynthesisRecorderを参考にしてやってみましたがindex.html:1 Uncaught (in promise) DOMExceptionというエラーが出てしまいます。
-下記のコードはtextboxに文字を入力してbuttonを押下すると入力した文字が音声として発生します。
+クロームのデベロッパーで見てみると .then(({tts, data}) => の処理に×がついているのですが何がダメなのかがわかりません。
-*やりたいこと
-textボックスに文字を入力してbuttonを押下したら一度mp3に変換してから音声を発生させたいです。
-調べたところMediaStreamを使えばできるそうなのでよくわかりません。
-わかる人がいましたら教えてほしいです。
+分かる人がいましたら教えてください
-```html
+```HTML
 <!DOCTYPE html>
 <html lang="ja">
 <head>
-	<meta charset="utf-8">
+  <meta charset="utf-8">
+  <script type="text/javascript" src="js/voiceappclass.js"></script>
-	<script type="text/javascript">
+  <script type="text/javascript" src="js/voiceapp.js"></script>
-		function do_speech() {
-			var ssu = new SpeechSynthesisUtterance();
-			ssu.text = document.getElementById("word").value;
-			ssu.lang = 'ja-JP';
-			speechSynthesis.speak(ssu);
-		}
-	</script>
 </head>
 <body>
-	<p>API版</p>
+  <p>API版</p>
-	<button onclick="do_speech();">test!</button>
+    <button onclick="dospeech();">test!</button>
-	<input type="text" value="テストでーーーす" id="word" style="width:80%;" />
+    <input type="text" value="TEST" id="word" style="width:80%;" />
 </body>
 </html>
 ```
+```javascript
+function dospeech(){
+  let ttsRecorder = new SpeechSynthesisRecorder({
+    text: "The revolution will not be televised",
+    utteranceOptions: {
+      voice: "english-us espeak",
+      lang: "en-US",
+      pitch: .75,
+      rate: 1
+    }
+  });
+ // ArrayBuffer
+ ttsRecorder.start()
+ .then(tts => tts.arrayBuffer())
+ .then(({tts, data}) => {
+   tts.audioNode.src = URL.createObjectURL(new Blob([data], {type:tts.mimeType}));
+   tts.audioNode.title = tts.utterance.text;
+   tts.audioNode.onloadedmetadata = () => {
+     console.log(tts.audioNode.duration);
+     tts.audioNode.play();
+   }
+ })
+//  AudioBuffer
+ ttsRecorder.start()
+ .then(tts => tts.audioBuffer())
+ .then(({tts, data}) => {
+   let source = tts.audioContext.createBufferSource();
+   source.buffer = data;
+   source.connect(tts.audioContext.destination);
+   source.start()
+ })
+ // Blob
+ ttsRecorder.start()
+ .then(tts => tts.blob())
+ .then(({tts, data}) => {
+   tts.audioNode.src = URL.createObjectURL(blob);
+   tts.audioNode.title = tts.utterance.text;
+   tts.audioNode.onloadedmetadata = () => {
+     console.log(tts.audioNode.duration);
+     tts.audioNode.play();
+   }
+ })
+//  ReadableStream
+ ttsRecorder.start()
+ .then(tts => tts.readableStream())
+ .then(({tts, data}) => {
+   console.log(tts, data);
+   data.getReader().read().then(({value, done}) => {
+     tts.audioNode.src = URL.createObjectURL(value[0]);
+     tts.audioNode.title = tts.utterance.text;
+     tts.audioNode.onloadedmetadata = () => {
+       console.log(tts.audioNode.duration);
+       tts.audioNode.play();
+     }
+   })
+ })
+ // MediaSource
+ ttsRecorder.start()
+ .then(tts => tts.mediaSource())
+ .then(({tts, data}) => {
+   console.log(tts, data);
+   tts.audioNode.srcObj = data;
+   tts.audioNode.title = tts.utterance.text;
+   tts.audioNode.onloadedmetadata = () => {
+     console.log(tts.audioNode.duration);
+     tts.audioNode.play();
+   }
+ })
+//  MediaStream
+//  let ttsRecorder = new SpeechSynthesisRecorder({
+//    text: "",
+//    utternanceOptions: {
+//      voice: "日本人",
+//      lang: "ja-JP",
+//      pitch: 1.0,
+//      rate: 1
+//    },
+//    dataType:"mediaStream"
+//  });
+//  ttsRecorder.start()
+//  .then(({tts, data}) => {
+//  })
+//  .catch(err => console.log(err))
+};
+```
+```javascript
+class SpeechSynthesisRecorder {
+  constructor({
+    text = '', utteranceOptions = {}, recorderOptions = {}, dataType = ''
+  }) {
+    if (text === '') throw new Error('no words to synthesize')
+    this.dataType = dataType
+    this.text = text
+    this.mimeType = MediaRecorder.isTypeSupported('audio/webm; codecs=opus') ? 'audio/webm; codecs=opus' : 'audio/ogg; codecs=opus'
+    this.utterance = new SpeechSynthesisUtterance(this.text)
+    this.speechSynthesis = window.speechSynthesis
+    this.mediaStream_ = new MediaStream()
+    this.mediaSource_ = new MediaSource()
+    this.mediaRecorder = new MediaRecorder(this.mediaStream_, {
+      mimeType: this.mimeType,
+      bitsPerSecond: 256 * 8 * 1024
+    })
+    this.audioContext = new AudioContext()
+    this.audioNode = new Audio()
+    this.chunks = []
+    if (utteranceOptions) {
+      if (utteranceOptions.voice) {
+        this.speechSynthesis.onvoiceschanged = e => {
+          const voice = this.speechSynthesis.getVoices().find(({
+            name: _name
+          }) => _name === utteranceOptions.voice)
+          this.utterance.voice = voice
+          console.log(voice, this.utterance)
+        }
+        this.speechSynthesis.getVoices()
+      }
+      let {
+        lang, rate, pitch, volume
+      } = utteranceOptions;
+      console.log(rate)
+      this.utterance.lang = 'en-US'
+      this.utterance.voice = window.speechSynthesis.getVoices()[0]; // 7:Google 日本人 ja-JP ※他は英語のみ（次項参照）
+      this.utterance.volume = 1.0; // 音量 min 0 ~ max 1
+      this.utterance.rate = 1.0; // 速度 min 0 ~ max 10
+      this.utterance.pitch = 1.0; // 音程 min 0 ~ max 2
+    }
+    console.log(this.utterance)
+    this.audioNode.controls = 'controls'
+    document.body.appendChild(this.audioNode)
+  }
+  start(text = '') {
+    if (text) this.text = text
+    if (this.text === '') throw new Error('no words to synthesize')
+    return navigator.mediaDevices.getUserMedia({
+        audio: true
+      })
+      .then(stream => navigator.mediaDevices.enumerateDevices()
+        .then(devices => {
+          const audiooutput = devices.find(device => device.kind == "audiooutput");
+          stream.getTracks().forEach(track => track.stop())
+          if (audiooutput) {
+            const constraints = {
+              deviceId: {
+                exact: audiooutput.deviceId
+              }
+            };
+            return navigator.mediaDevices.getUserMedia({
+              audio: constraints
+            });
+          }
+          return navigator.mediaDevices.getUserMedia({
+            audio: true
+          });
+        }))
+      .then(stream => new Promise(resolve => {
+        const track = stream.getAudioTracks()[0]
+        this.mediaStream_.addTrack(track)
+          // return the current `MediaStream`
+        if (this.dataType && this.dataType === 'mediaStream') {
+          resolve({
+            tts: this,
+            data: this.mediaStream_
+          })
+        };
+        this.mediaRecorder.ondataavailable = event => {
+          if (event.data.size > 0) {
+            this.chunks.push(event.data)
+          };
+        }
+        this.mediaRecorder.onstop = () => {
+          track.stop()
+          this.mediaStream_.getAudioTracks()[0].stop()
+          this.mediaStream_.removeTrack(track)
+          console.log(`Completed recording ${this.utterance.text}`, this.chunks)
+          resolve(this)
+        }
+        this.mediaRecorder.start()
+        this.utterance.onstart = () => {
+          console.log(`Starting recording SpeechSynthesisUtterance ${this.utterance.text}`)
+        }
+        this.utterance.onend = () => {
+          this.mediaRecorder.stop()
+          console.log(`Ending recording SpeechSynthesisUtterance ${this.utterance.text}`)
+        }
+        this.speechSynthesis.speak(this.utterance)
+      }))
+  }
+  blob() {
+    if (!this.chunks.length) throw new Error('no data to return')
+    return Promise.resolve({
+      tts: this,
+      data: this.chunks.length === 1 ? this.chunks[0] : new Blob(this.chunks, {
+        type: this.mimeType
+      })
+    })
+  }
+  arrayBuffer(blob) {
+    if (!this.chunks.length) throw new Error('no data to return')
+    return new Promise(resolve => {
+      const reader = new FileReader()
+      reader.onload = e => resolve(({
+        tts: this,
+        data: reader.result
+      }))
+      reader.readAsArrayBuffer(blob ? new Blob(blob, {
+        type: blob.type
+      }) : this.chunks.length === 1 ? this.chunks[0] : new Blob(this.chunks, {
+        type: this.mimeType
+      }))
+    })
+  }
+  audioBuffer() {
+    if (!this.chunks.length) throw new Error('no data to return')
+    return this.arrayBuffer()
+      .then(({
+        tts, data
+      }) => this.audioContext.decodeAudioData(data))
+      .then(buffer => ({
+        tts: this,
+        data: buffer
+      }))
+  }
+  mediaSource() {
+    if (!this.chunks.length) throw new Error('no data to return')
+    return this.arrayBuffer()
+      .then(({
+        data: ab
+      }) => new Promise((resolve, reject) => {
+        this.mediaSource_.onsourceended = () => resolve({
+          tts: this,
+          data: this.mediaSource_
+        })
+        this.mediaSource_.onsourceopen = () => {
+          if (MediaSource.isTypeSupported(this.mimeType)) {
+            const sourceBuffer = this.mediaSource_.addSourceBuffer(this.mimeType)
+            sourceBuffer.mode = 'sequence'
+            sourceBuffer.onupdateend = () =>
+              this.mediaSource_.endOfStream()
+            sourceBuffer.appendBuffer(ab)
+          } else {
+            reject(new Error(`${this.mimeType} is not supported`))
+          }
+        }
+        this.audioNode.src = URL.createObjectURL(this.mediaSource_)
+      }))
+  }
+  readableStream({
+    size = 1024, controllerOptions = {}, rsOptions = {}
+  }) {
+    if (!this.chunks.length) throw new Error('no data to return')
+    const src = this.chunks.slice(0)
+    const chunk = size
+    return Promise.resolve({
+      tts: this,
+      data: new ReadableStream(controllerOptions || {
+        start(controller) {
+            console.log(src.length)
+            controller.enqueue(src.splice(0, chunk))
+          },
+          pull(controller) {
+            if (src.length === 0) controller.close()
+            controller.enqueue(src.splice(0, chunk))
+          }
+      }, rsOptions)
+    })
+  }
+}
+if (typeof module !== 'undefined') module.exports = SpeechSynthesisRecorder
+if (typeof window !== 'undefined') window.SpeechSynthesisRecorder = SpeechSynthesisRecorder
+```

修正

2019/01/17 06:49

投稿

cuku

スコア108

test CHANGED Viewed

	@@ -1 +1 @@
1	- API ~~MediaStreamを使って入力した~~Textをｍｐ3に変換
1	+ API Textをｍｐ3に変換

test CHANGED Viewed

File without changes

修正

2019/01/17 02:07

投稿

cuku

スコア108

test CHANGED Viewed

	@@ -1 +1 @@
1	- API MediaStreamを使ってｍｐ3に変換
1	+ API MediaStreamを使って入力したTextをｍｐ3に変換

test CHANGED Viewed

File without changes

修正

2019/01/16 08:19

投稿

cuku

スコア108

test CHANGED Viewed

	@@ -1 +1 @@
1	- MediaStreamを使ってｍｐ3に変換
1	+ API MediaStreamを使ってｍｐ3に変換

test CHANGED Viewed

File without changes