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

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

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

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

Q&A

解決済

2回答

2733閲覧

javasprictで音を出す。ピッチ変更について

sembokulove

総合スコア76

JavaScript

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

1グッド

0クリップ

投稿2019/01/10 12:21

イメージ説明
javasprictで発声に成功し、ピッチの変更にも成功しましたが、なぜか、どのボタンを押しても2つめの音しか出ないのです。どうしたらいいのでしょうか。

<!DOCTYPE html> <html> <body> <input type="button" value="サンタ" onClick="hoge()"> </body> <script type="text/javascript"> function hoge() { //var ss = new SpeechSynthesisUtterance(); var ssu = new SpeechSynthesisUtterance(); ss.text = 'クリスマスにはサンタさん来てくれるかな?'; ss.lang = 'ja-JP'; speechSynthesis.speak(ss); } </script> <!--音声2--> <body> <input type="button" value="サンタ" onClick="hoge()"> </body> <script type="text/javascript"> function hoge() { //var ss = new SpeechSynthesisUtterance(); var ss = new SpeechSynthesisUtterance(); ss.text = 'ちんちんかいかい'; ss.lang = 'ja-JP'; ss.pitch = 1000; speechSynthesis.speak(ss); } </script> </html>
bochan2👍を押しています

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

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

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

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

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

kei344

2019/01/10 17:24

(質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
m.ts10806

2019/01/10 19:46

[Script]ですよ。「スクリプト」です。
guest

回答2

0

色々とおかしいですね。

他の質問でも指摘していますが、
javasprict → javascript
大文字小文字くらいは仕方ないですが、
sprictなんて単語は存在しません。 - wiki:スクリプト

HTMLもおかしいです。
構文チェックにかけた結果こんな感じです。
イメージ説明

htmlが正しくないと動作の保証はないと思って良いですし、思わぬバグを埋め込む可能性があります。
簡単なマークアップの例もあるので、そちらを参考にしながら組んでください。

プログラムは組んだとおりにしか動かないので、最初のスペルミスは命取りになりかねません。
できれば大文字小文字もきちんと区別して覚えましょう。タグにあるとおり「JavaScript」です。
大文字小文字を大別する言語はそれだけでエラーとなります。

本件と関係ないと思ったら実は大間違いです。
上記をきちんと把握していないと、下記も理解できませんし、身につきません。


「定義」は定数などで特別に宣言されていないと後勝ちです。

下記がミニマムコードの例

js

1var test = "1"; 2var test = "3"; 3 4console.log(test); 5//3

宣言の仕方によっては「重複定義」をエラーで教えてくれるものもあります。

js

1let test = "1"; 2let test = "3"; 3 4console.log(test); 5//SyntaxError: Identifier 'test' has already been declared

関数は重複定義のエラーを出してくれません。
※標準関数と同名の関数を作っても上書きしてしまうくらいです

ということで、対応方法としては主に2つ。

  1. 関数名を変える(他の回答の通り)
  2. 同じ関数を呼び出すが引数などで部分的に切り替える

見たところ、pitchの設定有無とtextの内容だけなので、2番目の方が望ましいですね。
1.の内容だとボタンが増えるたびにコードがどんどん長くなります。共通化できるところは共通化しましょう。
例えば下記(あくまでコードをすっきりさせてエラーがでないだけの未検証コード)

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6</head> 7<body> 8<input type="button" value="サンタ" onClick="hoge('サンタ')"> 9<input type="button" value="トナカイ" onClick="hoge('トナカイ',1000)"> 10<script> 11function hoge(text,pitch){ 12 var pitch = typeof pitch !== 'undefined' ? pitch : 1; 13 var ss = new SpeechSynthesisUtterance(); 14 ss.text = text; 15 ss.lang = 'ja-JP'; 16 ss.pitch = pitch; 17 speechSynthesis.speak(ss); 18} 19</script> 20</body> 21</html>

投稿2019/01/11 00:44

編集2019/01/11 01:56
m.ts10806

総合スコア80765

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

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

0

ベストアンサー

HTML

1<!DOCTYPE html> 2<html> 3<body> 4<input type="button" value="サンタ" onClick="hoge()"> 5</body> 6<script type="text/javascript"> 7function hoge() { 8//var ss = new SpeechSynthesisUtterance(); 9var ssu = new SpeechSynthesisUtterance(); 10ss.text = 'クリスマスにはサンタさん来てくれるかな?'; 11ss.lang = 'ja-JP'; 12speechSynthesis.speak(ss); 13} 14</script> 15<!--音声2--> 16<body> 17<input type="button" value="サンタ" onClick="hoge2()"> 18</body> 19<script type="text/javascript"> 20function hoge2() { 21//var ss = new SpeechSynthesisUtterance(); 22var ss = new SpeechSynthesisUtterance(); 23ss.text = 'ちんちんかいかい'; 24ss.lang = 'ja-JP'; 25ss.pitch = 1000; 26speechSynthesis.speak(ss); 27} 28</script> 29</html>

質問頂きありがとうございます!
ジャバスクリプト部分の関数名が被ってるとあとから宣言した関数に上書きされてしまうので違う名前(hogeとhoge2)にしましょう

投稿2019/01/10 23:53

編集2019/01/11 00:07
bochan2

総合スコア2050

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

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

m.ts10806

2019/01/11 00:01

>ジャバスプリクト だから「スクリプト」ですってば。
bochan2

2019/01/11 00:03

書いてあったのでそのままカタカナにしました
bochan2

2019/01/11 00:04

なんで<script type="text/javascript">のとこは正しいんでしょうかね
m.ts10806

2019/01/11 00:05

もし皮肉としてもそれは回答者としていかがなものでしょうか。(そうでないにしても人のせいにしている) 自分で作った変数名とか関数名ならともかく、公式のものを間違ったものを間違ったままなのはダメです。
m.ts10806

2019/01/11 00:06

>なんで<script type="text/javascript">のとこは正しいんでしょうかね 自分で手書きしてないからじゃないですかね。
bochan2

2019/01/11 00:07

わかりました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問