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

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

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

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

HTML

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

解決済

Javascriptの処理結果をHTMLに表示させたい

tetenasa09
tetenasa09

総合スコア1

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

HTML

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

1回答

0評価

1クリップ

315閲覧

投稿2022/06/03 00:24

編集2022/06/06 15:19

GoogleのSpeechToTextとTranslateを利用して、日本語で音声入力した結果を英語に翻訳するものを作りたいと考えております。
ボタンで音声入力をするのですがその入力画面と処理結果を表示させる画面を分けたいと考えております。
処理結果のみ別HTMLで表示させるにはどうしたらよいのでしょうか。
プログラミングの学習を始めたばかりで、とても初歩的な質問だと思いますがご回答お願いいたします。

main.html

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>サンプル</title> </head> <body> <button onclick="startRecording()">開始</button> <button onclick="endRecording()">終了</button> <div class="japanese" id="output_ja"></div> <div class="english" id="output_en"></div> <script src="api_key.js"></script> <script src="./lib/recorder.js"></script> <script src='main.js'></script> </body> </html>

main.js

let audio_context; let recorder; function arrayBufferToBase64(buffer) { let binary = ''; let bytes = new Float32Array(buffer); let len = bytes.byteLength; for (let i = 0; i < len; i++) { binary += String.fromCharCode(bytes[i]); } return window.btoa(binary); } function startUserMedia(stream) { let input = audio_context.createMediaStreamSource(stream); recorder = new Recorder(input); } let startRecording = function () { audio_context.resume() recorder && recorder.record(); console.log("record start") }; let endRecording = function () { recorder && recorder.stop(); console.log("record stop"); // create WAV download link using audio data blob audioRecognize(); recorder.clear(); }; function audioRecognize() { recorder && recorder.exportWAV(function (blob) { let reader = new FileReader(); reader.onload = function () { let result = new Uint8Array(reader.result); // reader.result is ArrayBuffer let data = { "config": { "encoding": "LINEAR16", "sampleRateHertz": 48000, "languageCode": "ja-JP" }, "audio": { "content": arrayBufferToBase64(result) } }; console.log("audio send..."); fetch('https://speech.googleapis.com/v1/speech:recognize?key=' + apiKey, { method: 'POST', headers: { 'Content-Type': 'application/json; charset=utf-8' }, body: JSON.stringify(data) }).then(function (response) { return response.text(); }).then(function (text) { let result_json = JSON.parse(text); text = result_json.results[0].alternatives[0].transcript output_ja.innerHTML += "\n" + text console.log("RESULT: " + text); console.log(result_json.results[0].alternatives[0].transcript); console.log(data) let fromLang = 'ja'; let toLang = 'en'; let URL = "https://translation.googleapis.com/language/translate/v2?key="+apiKey+"&q="+encodeURI(text)+"&source="+fromLang+"&target="+toLang let xhr = new XMLHttpRequest() xhr.open('POST', [URL], false) xhr.send(); if (xhr.status === 200) { let json = xhr.responseText; let obj = JSON.parse(json); result = obj.data.translations[0].translatedText output_en.innerHTML += "\n" + result console.log("RESULT: " + text); console.log(obj.data.translations[0].translatedText); } }); }; reader.readAsArrayBuffer(blob) }); } window.onload = function init() { try { // webkit shim window.AudioContext = window.AudioContext || window.webkitAudioContext; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia; window.URL = window.URL || window.webkitURL; audio_context = new AudioContext(); } catch (e) { alert('No web audio support in this browser!'); } navigator.getUserMedia({audio: true}, startUserMedia, function (e) { }); };

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

HTML

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