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

前提・実現したいこと

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/

t_obara

2018/11/01 11:43

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

tinRyo

2018/11/01 18:51

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

行動規範の内容に同意します

回答1件

ベストアンサー

<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>