teratail
回答率
85.25%
質問するログイン新規登録
トップJavaScriptに関する質問ランダムで表示する単語に合わせて波形もランダム表示

Q&A

解決済

1回答

2227閲覧

ランダムで表示する単語に合わせて波形もランダム表示

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2018/11/01 08:01

編集2018/11/01 08:19

0

2

前提・実現したいこと

HTML,JS,Jquery,CSSで英語の発音矯正をするシステムを作成しているのですが、Jqueryで単語をランダムで表示していて、そのうえでその単語の波形をWavesurfer.jsで表示しているのですがランダムで表示されている単語とその波形をつなげてランダムで表示された単語の波形を表示させる。

発生している問題・エラーメッセージ

今、作成しているものであると単語はランダムで表示できているのですが併せて波形もその単語に合わせたランダム表示ができてないです。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <link href="style.css" rel="stylesheet" type="text/css"/>
5  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
6
7<title>英語発音矯正</title>
8<meta name="Description" content="英語発音矯正に向けたWebサイト" />
9<meta name="Keywords" content="英語,発音,Webサイト,HTML,発音矯正,英語発音" />
10<script type="text/javascript" src="http://www.google.com/jsapi"></script>
11
12<script type="text/javascript">google.load("jquery","1.7");</script>
13</head>
14<body>
15  <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>
16
17
18  <h2>英語発音矯正に向けたWebサイト</h2>
19<div id="center">
20  <div id="wrapper">
21    <p>ランダムで単語を表示</p><br>
22
23<!--ランダムで表示する単語-->
24      <div id="random">
25      <div><p><span class="red">サイ</span>トスィーイング</p><p>S<span class="red">igh</span>tsheeing</p><p>観光</p><p>sáitsìːiŋ</p><audio src="voice/sightseeing.mp3" controls alt=""></div>
26      <div><p><span class="red">エア</span>ポート</p><p><span class="red">Air</span>port</p><p>空港</p><p> éəpɔ`ːt</p><audio src="voice/airport.mp3" controls alt="何か"></div>
27      <div><p>アカモ<span class="red">デイ</span>ション</p><p>Accommo<span class="red">da</span>tion</p><p>宿泊施設</p><p>əkɑ`mədéiʃən</p><audio src="voice/accommodation.mp3" controls alt="何か"></div>
28      <div><p>ディ<span class="red">レ</span>クション</p><p>Di<span class="red">re</span>ction</p><p>方向、方角</p><p>dirékʃən</p><audio src="voice/direction.mp3" controls alt="何か"></div>
29      </div><!--random-->
30  </div><!--wrapper-->
31    <br>
32
33<!--ランダムに表示する処理-->
34      <script type="text/javascript">
35      $(function(){
36        var arr = [];
37        // randomの中にある要素を、push()で要素の中身を配列に追加します。
38        $("#random div").each(function(){
39          arr.push($(this).html());
40        });
41　　　　 //sort()とMath.random()を使ってランダムに並び替えます。
42        arr.sort(function(){
43          return Math.random() - Math.random();
44        });
45        // 並び替えた後は、randomの中身を空にする。
46        $("#random").empty();
47        //arrに入ってる配列の数だけループさせる。
48        for(i=0; i< 1; i++){
49          // append()を使って、randomの中に一つ一つ追加していく。
50          $("#random").append('<div>' + arr[i] +'</div>');
51        }
52      });
53      </script>
54    </div>
55
56<!--更新ボタンの処理-->
57      <form>
58        <input type="button" class="btn_btn" value="更新" onclick="koshin()">
59      </form>
60      <p>更新ボタンを押して様々な単語を発音して正しい発音を身に付けましょう</p>
61      <br>
62<script>
63function koshin(){
64  location.reload();
65}
66</script>
67
68<br><br><h4>正しい音声の波形です</h4>
69
70<!--波形の処理-->
71<div id="waveform"></div>
72<div class="controls">
73           <button class="btn btn-primary" onclick="wavesurfer.playPause()">
74               <i class="glyphicon glyphicon-play"></i>
75               Play
76               /
77               <i class="glyphicon glyphicon-pause"></i>
78               Pause
79           </button>
80       </div>
81
82<script language="JavaScript">
83var wavesurfer = WaveSurfer.create({
84  barWidth: '1',
85  audioRate: '0.6',
86  container: '#waveform',
87  waveColor: 'red',
88  progressColor: 'purple',
89  height: '50'
90});
91wavesurfer.load('airport.mp3');
92</script>
93
94</body>
95</html>
96

試したこと

wavesurfer.load('airport.mp3') の部分をランダムで表示された英単語の音声データにしたくif文など使おうとしたがよくわからず…　単語に合わせてここの部分を変えようとしてもできなかった。

補足情報（FW/ツールのバージョンなど）

wavesurfer.js についてのURLを貼っておきます.
https://wavesurfer-js.org/

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

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

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

t_obara
t_obara

2018/11/01 11:43

もう少し問題を簡単にして考えてみることをお勧めします。そうすれば回答をいただく可能性も大幅に上がるのではないかと。単語に対して紐づいている音声データを取得できない部分が問題の始まりだと思いますので、その点をどう解決すべきかをまず考えてください。波形変換はこの時点では無関係な問題です。
退会済みユーザー

退会済みユーザー

2018/11/01 18:51

特に個人的には波形変換は論点に入れておらずランダムの単語の部分と音声データの紐づけの部分ができてないのです。表現の仕方が悪くてすいません。
guest

この質問の投稿者はすでに退会しているため、質問者からの返信がない点にご留意ください。

回答1件

0

ベストアンサー

<div id="random">の中に入っている<audio>のsrc属性を取りたいということでしたら、arr[i]からこのようにして取り出すことができます。

javascript
1        audFile = $(arr[i]).eq(4)[0].getAttribute("src");//グローバル変数 audFileに入れる

ただ、$(function(){の中に入っちゃっているので、wavesurfer.load()の部分が先に表示されているのでタイミング的に参照できません。

なので、波形表示部分も$(function(){で囲っちゃえば取り出せるかと思います。

もう少しスマートなやり方があるかもしれませんが、これで該当部分の取得はできるんじゃないかなぁ。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <link href="style.css" rel="stylesheet" type="text/css"/>
5  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
6
7<title>英語発音矯正</title>
8<meta name="Description" content="英語発音矯正に向けたWebサイト" />
9<meta name="Keywords" content="英語,発音,Webサイト,HTML,発音矯正,英語発音" />
10<script type="text/javascript" src="http://www.google.com/jsapi"></script>
11
12<script type="text/javascript">google.load("jquery","1.7");</script>
13</head>
14<body>
15  <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>
16
17
18  <h2>英語発音矯正に向けたWebサイト</h2>
19<div id="center">
20  <div id="wrapper">
21    <p>ランダムで単語を表示</p><br>
22
23<!--ランダムで表示する単語-->
24      <div id="random">
25      <div><p><span class="red">サイ</span>トスィーイング</p><p>S<span class="red">igh</span>tsheeing</p><p>観光</p><p>sáitsìːiŋ</p><audio src="voice/sightseeing.mp3" controls alt=""></div>
26      <div><p><span class="red">エア</span>ポート</p><p><span class="red">Air</span>port</p><p>空港</p><p> éəpɔ`ːt</p><audio src="voice/airport.mp3" controls alt="何か"></div>
27      <div><p>アカモ<span class="red">デイ</span>ション</p><p>Accommo<span class="red">da</span>tion</p><p>宿泊施設</p><p>əkɑ`mədéiʃən</p><audio src="voice/accommodation.mp3" controls alt="何か"></div>
28      <div><p>ディ<span class="red">レ</span>クション</p><p>Di<span class="red">re</span>ction</p><p>方向、方角</p><p>dirékʃən</p><audio src="voice/direction.mp3" controls alt="何か"></div>
29      </div><!--random-->
30  </div><!--wrapper-->
31    <br>
32
33<!--ランダムに表示する処理-->
34      <script type="text/javascript">
35      $(function(){
36        var arr = [];
37        // randomの中にある要素を、push()で要素の中身を配列に追加します。
38        $("#random div").each(function(){
39          arr.push($(this).html());
40        });
41　　　　 //sort()とMath.random()を使ってランダムに並び替えます。
42        arr.sort(function(){
43          return Math.random() - Math.random();
44        });
45        // 並び替えた後は、randomの中身を空にする。
46        $("#random").empty();
47        //arrに入ってる配列の数だけループさせる。
48        for(i=0; i< 1; i++){
49          // append()を使って、randomの中に一つ一つ追加していく。
50          $("#random").append('<div>' + arr[i] +'</div>');
51        }
52        /*----- ここ付け足し -----*/
53        console.log(arr[i]);
54        audFile = $(arr[i]).eq(4)[0].getAttribute("src");//------------------------------ここでグローバル変数に入れる
55        console.log(audFile);
56        /*----- ここまで付け足し -----*/
57      });
58      </script>
59    </div>
60
61<!--更新ボタンの処理-->
62      <form>
63        <input type="button" class="btn_btn" value="更新" onclick="koshin()">
64      </form>
65      <p>更新ボタンを押して様々な単語を発音して正しい発音を身に付けましょう</p>
66      <br>
67<script>
68function koshin(){
69  location.reload();
70}
71</script>
72
73<br><br><h4>正しい音声の波形です</h4>
74
75<!--波形の処理-->
76<div id="waveform"></div>
77<div class="controls">
78           <button class="btn btn-primary" onclick="wavesurfer.playPause()">
79               <i class="glyphicon glyphicon-play"></i>
80               Play
81               /
82               <i class="glyphicon glyphicon-pause"></i>
83               Pause
84           </button>
85       </div>
86
87<script language="JavaScript">
88$(function(){//------------------ ここ付け足し
89var wavesurfer = WaveSurfer.create({
90  barWidth: '1',
91  audioRate: '0.6',
92  container: '#waveform',
93  waveColor: 'red',
94  progressColor: 'purple',
95  height: '50'
96});
97wavesurfer.load(audFile);//------- ここ書き換え
98console.log(audFile);
99});//------------------------------ ここ付け足し
100</script>
101
102</body>
103</html>

---- 追記----
質問のコードをいじってたら、何がやりたいのかわかりました。
<!--ランダムに表示する処理-->の中に入っているスクリプトの$(function(){}は、domを読み終わってからの処理にする必要がないので不要です。
同じスクリプトの中の、for(i=0; i< 1; i++){}は、配列がすでにランダムになっていますので、[0]だけ取り出せばいいので、$("#random").append('<div>' + arr[0] +'</div>');とか着替える書き換えることができます。
これで毎回、書き換えられ、波形も同じものが表示されます。

html
1<!DOCTYPE html>
2<html>
3<head>
4<link href="style.css" rel="stylesheet" type="text/css"/>
5<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
6
7<title>英語発音矯正</title>
8<meta name="Description" content="英語発音矯正に向けたWebサイト" />
9<meta name="Keywords" content="英語,発音,Webサイト,HTML,発音矯正,英語発音" />
10<script type="text/javascript" src="http://www.google.com/jsapi"></script>
11
12<script type="text/javascript">google.load("jquery","1.7");</script>
13</head>
14<body>
15  <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>
16
17
18  <h2>英語発音矯正に向けたWebサイト</h2>
19  <div id="center">
20    <div id="wrapper">
21      <p>ランダムで単語を表示</p><br>
22
23      <!--ランダムで表示する単語-->
24      <div id="random">
25        <div><p><span class="red">サイ</span>トスィーイング</p><p>S<span class="red">igh</span>tsheeing</p><p>観光</p><p>sáitsìːiŋ</p><audio src="voice/sightseeing.mp3" controls alt=""></div>
26          <div><p><span class="red">エア</span>ポート</p><p><span class="red">Air</span>port</p><p>空港</p><p> éəpɔ`ːt</p><audio src="voice/airport.mp3" controls alt="何か"></div>
27            <div><p>アカモ<span class="red">デイ</span>ション</p><p>Accommo<span class="red">da</span>tion</p><p>宿泊施設</p><p>əkɑ`mədéiʃən</p><audio src="voice/accommodation.mp3" controls alt="何か"></div>
28              <div><p>ディ<span class="red">レ</span>クション</p><p>Di<span class="red">re</span>ction</p><p>方向、方角</p><p>dirékʃən</p><audio src="voice/direction.mp3" controls alt="何か"></div>
29              </div><!--random-->
30            </div><!--wrapper-->
31            <br>
32
33            <!--ランダムに表示する処理-->
34            <script type="text/javascript">
35            var arr = [];
36            // randomの中にある要素を、push()で要素の中身を配列に追加します。
37            $("#random div").each(function(){
38              arr.push($(this).html());
39            });
40            //sort()とMath.random()を使ってランダムに並び替えます。
41            arr.sort(function(){
42              return Math.random() - Math.random();
43            });
44            // 並び替えた後は、randomの中身を空にする。
45            $("#random").empty();
46            $("#random").append('<div>' + arr[0] +'</div>');//---- 配列の[0]だけをappendして表示
47            /*----- ここ付け足し -----*/
48            console.log(arr[0]);//ログ出力
49            var audFile = $(arr[0]).eq(4)[0].getAttribute("src");//------------------------------ここで変数に入れる
50            console.log(audFile);//ログ出力
51          </script>
52
53        </div>
54
55        <!--更新ボタンの処理-->
56        <form>
57          <input type="button" class="btn_btn" value="更新" onclick="koshin()">
58        </form>
59        <p>更新ボタンを押して様々な単語を発音して正しい発音を身に付けましょう</p>
60        <br>
61        <script>
62        function koshin(){
63          location.reload();
64        }
65      </script>
66
67      <br><br><h4>正しい音声の波形です</h4>
68
69      <!--波形の処理-->
70      <div id="waveform"></div>
71      <div class="controls">
72        <button class="btn btn-primary" onclick="wavesurfer.playPause()">
73          <i class="glyphicon glyphicon-play"></i>
74          Play
75          /
76          <i class="glyphicon glyphicon-pause"></i>
77          Pause
78        </button>
79      </div>
80
81      <script language="JavaScript">
82      var wavesurfer = WaveSurfer.create({
83        barWidth: '1',
84        audioRate: '0.6',
85        container: '#waveform',
86        waveColor: 'red',
87        progressColor: 'purple',
88        height: '50'
89      });
90      console.log(audFile);//ログ出力
91      wavesurfer.load(audFile);//------- ここ書き換え
92
93    </script>
94
95  </body>
96</html>

投稿2018/11/02 10:39

編集2018/11/05 03:02
colling
colling

総合スコア798

退会済みユーザー

退会済みユーザー

2018/11/04 17:06

返信遅れてすいません。回答ありがとうございます。答えてくださったコードを理解して実行してみます。
退会済みユーザー

退会済みユーザー

2018/11/06 05:26

無事実行できました。本当にありがとうございました。
guest

この質問の投稿者はすでに退会しているため、質問者からの返信やベストアンサーの選定がない点にご留意ください。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.25%

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

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

質問する

関連した質問

トップJavaScriptに関する質問

ランダムで表示する単語に合わせて波形もランダム表示