@Kobayashi0620 (さなだむし)posted at 2024-07-07

Jmap jQuery pluginを使用してボタンが押下された際に音声を再生したい。

Q&A

Closed

JavaScript jQuery audio フロントエンド japanmap

解決したいこと

現在webサイトを作成しているのですが、jmapを使用して音声再生を行いたいと考えており、試行錯誤しているのですが詰まってしまっています。

該当箇所

現在一度リンク先を指定してリンク先に遷移できるかを確認してから、オーディオ再生を行おうと考えているため、リンク遷移の実装を行っています。

.html

<body>
    <div id="jmap"></div>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://yugokimura.github.io/jmap/jmap.js"></script>
</body>

.css

#jmap{
  width: 500px;
  height: 300px;
  margin: 0 auto;
}

.js

var areaLinks = {
    1: "https://www.pref.hokkaido.lg.jp/",
    2: "https://www.pref.aomori.lg.jp/",
    3: "https://www.pref.iwate.lg.jp/",
    4: "https://www.pref.miyagi.lg.jp/",
    5: "https://www.pref.hokkaido.lg.jp/",
    6: "https://www.pref.aomori.lg.jp/",
    7: "https://www.pref.iwate.lg.jp/",
    8: "https://www.pref.miyagi.lg.jp/",
    9: "https://www.pref.hokkaido.lg.jp/",
    10: "https://www.pref.aomori.lg.jp/",
    11: "https://www.pref.iwate.lg.jp/",
    12: "https://www.pref.miyagi.lg.jp/",
    13: "https://www.pref.hokkaido.lg.jp/",
    14: "https://www.pref.aomori.lg.jp/",
    15: "https://www.pref.iwate.lg.jp/",
    16: "https://www.pref.miyagi.lg.jp/",
    17: "https://www.pref.hokkaido.lg.jp/",
    18: "https://www.pref.aomori.lg.jp/",
    19: "https://www.pref.miyagi.lg.jp/",
    20: "https://www.pref.hokkaido.lg.jp/",
    21: "https://www.pref.hokkaido.lg.jp/",
    22: "https://www.pref.aomori.lg.jp/",
    23: "https://www.pref.iwate.lg.jp/",
    24: "https://www.pref.miyagi.lg.jp/",
    25: "https://www.pref.hokkaido.lg.jp/",
    26: "https://www.pref.aomori.lg.jp/",
    27: "https://www.pref.iwate.lg.jp/",
    28: "https://www.pref.miyagi.lg.jp/",
    29: "https://www.pref.hokkaido.lg.jp/",
    30: "https://www.pref.aomori.lg.jp/",
    31: "https://www.pref.iwate.lg.jp/",
    32: "https://www.pref.miyagi.lg.jp/",
    33: "https://www.pref.hokkaido.lg.jp/",
    34: "https://www.pref.aomori.lg.jp/",
    35: "https://www.pref.iwate.lg.jp/",
    36: "https://www.pref.miyagi.lg.jp/",
    37: "https://www.pref.hokkaido.lg.jp/",
    38: "https://www.pref.aomori.lg.jp/",
    39: "https://www.pref.iwate.lg.jp/",
    40: "https://www.pref.miyagi.lg.jp/",
    41: "https://www.pref.hokkaido.lg.jp/",
    42: "https://www.pref.hokkaido.lg.jp/",
    43: "https://www.pref.aomori.lg.jp/",
    44: "https://www.pref.iwate.lg.jp/",
    45: "https://www.pref.miyagi.lg.jp/",
    46: "https://www.pref.hokkaido.lg.jp/",
    47: "https://www.pref.aomori.lg.jp/"
};


$(document).ready(function () {
    $('#jmap').jmap({
        areas: [
            { code: 1, name: "北海道", color: "#7f7eda", hoverColor: "#b3b2ee" },
            { code: 2, name: "青森", color: "#759ef4", hoverColor: "#98b9ff" },
            { code: 3, name: "岩手", color: "#759ef4", hoverColor: "#98b9ff" },
            { code: 4, name: "宮城", color: "#759ef4", hoverColor: "#98b9ff" },
            { code: 5, name: "秋田", color: "#759ef4", hoverColor: "#98b9ff" },
            { code: 6, name: "山形", color: "#759ef4", hoverColor: "#98b9ff" },
            { code: 7, name: "福島", color: "#759ef4", hoverColor: "#98b9ff" },
            { code: 8, name: "茨城", color: "#7ecfea", hoverColor: "#b7e5f4" },
            { code: 9, name: "栃木", color: "#7ecfea", hoverColor: "#b7e5f4" },
            { code: 10, name: "群馬", color: "#7ecfea", hoverColor: "#b7e5f4" },
            { code: 11, name: "埼玉", color: "#7ecfea", hoverColor: "#b7e5f4" },
            { code: 12, name: "千葉", color: "#7ecfea", hoverColor: "#b7e5f4" },
            { code: 13, name: "東京", color: "#7ecfea", hoverColor: "#b7e5f4" },
            { code: 14, name: "神奈川", color: "#7ecfea", hoverColor: "#b7e5f4" },
            { code: 15, name: "新潟", color: "#7cdc92", hoverColor: "#aceebb" },
            { code: 16, name: "富山", color: "#7cdc92", hoverColor: "#aceebb" },
            { code: 17, name: "石川", color: "#7cdc92", hoverColor: "#aceebb" },
            { code: 18, name: "福井", color: "#7cdc92", hoverColor: "#aceebb" },
            { code: 19, name: "山梨", color: "#7cdc92", hoverColor: "#aceebb" },
            { code: 20, name: "長野", color: "#7cdc92", hoverColor: "#aceebb" },
            { code: 21, name: "岐阜", color: "#7cdc92", hoverColor: "#aceebb" },
            { code: 22, name: "静岡", color: "#7cdc92", hoverColor: "#aceebb" },
            { code: 23, name: "愛知", color: "#7cdc92", hoverColor: "#aceebb" },
            { code: 24, name: "三重", color: "#ffe966", hoverColor: "#fff19c" },
            { code: 25, name: "滋賀", color: "#ffe966", hoverColor: "#fff19c" },
            { code: 26, name: "京都", color: "#ffe966", hoverColor: "#fff19c" },
            { code: 27, name: "大阪", color: "#ffe966", hoverColor: "#fff19c" },
            { code: 28, name: "兵庫", color: "#ffe966", hoverColor: "#fff19c" },
            { code: 29, name: "奈良", color: "#ffe966", hoverColor: "#fff19c" },
            { code: 30, name: "和歌山", color: "#ffe966", hoverColor: "#fff19c" },
            { code: 31, name: "鳥取", color: "#ffcc66", hoverColor: "#ffe0a3" },
            { code: 32, name: "島根", color: "#ffcc66", hoverColor: "#ffe0a3" },
            { code: 33, name: "岡山", color: "#ffcc66", hoverColor: "#ffe0a3" },
            { code: 34, name: "広島", color: "#ffcc66", hoverColor: "#ffe0a3" },
            { code: 35, name: "山口", color: "#ffcc66", hoverColor: "#ffe0a3" },
            { code: 36, name: "徳島", color: "#fb9466", hoverColor: "#ffbb9c" },
            { code: 37, name: "香川", color: "#fb9466", hoverColor: "#ffbb9c" },
            { code: 38, name: "愛媛", color: "#fb9466", hoverColor: "#ffbb9c" },
            { code: 39, name: "高知", color: "#fb9466", hoverColor: "#ffbb9c" },
            { code: 40, name: "福岡", color: "#ff9999", hoverColor: "#ffbdbd" },
            { code: 41, name: "佐賀", color: "#ff9999", hoverColor: "#ffbdbd" },
            { code: 42, name: "長崎", color: "#ff9999", hoverColor: "#ffbdbd" },
            { code: 43, name: "熊本", color: "#ff9999", hoverColor: "#ffbdbd" },
            { code: 44, name: "大分", color: "#ff9999", hoverColor: "#ffbdbd" },
            { code: 45, name: "宮崎", color: "#ff9999", hoverColor: "#ffbdbd" },
            { code: 46, name: "鹿児島", color: "#ff9999", hoverColor: "#ffbdbd" },
            { code: 47, name: "沖縄", color: "#eb98ff", hoverColor: "#f5c9ff" }
        ],
          onSelect: function(data){
     location.href = areaLinks[data.area.code];
  }
    });
});

参考

https://yugokimura.github.io/jmap/
https://qiita.com/iwasan06/items/d75d24d10f16965ea04d

最後まで読んでいただきありがとうございます。
ご存じの方がいらっしゃいましたら教えていただけますと幸いです。
何卒よろしくお願いいたします。

0 likes

1Answer

@changkejun posted at 2024-07-07

jmap.jsのソースをみると、onSelect関数の設定が間違ったと思います。

１番目の引数はイベントオブジェクトです。２番目はdataです。また、dataのconsole.logで形式以下のようになるとわかります。

そして、正しいonSelectは以下です。

  onSelect: function(e, data){
//     console.log(data);
//     return;
//     location.href = areaLinks[data.area.code];
     location.href = areaLinks[data.code];
  }

次は音声を付けてみます。

...
          onSelect: function(e,data){
          	$("#audio1")[0].play();
     		window.setTimeout(function(){
     			location.href = areaLinks[data.code];
     		},300);
  		}
    });
});
</script>
  <audio id="audio1" style="display:none" controls src="https://res.cloudinary.com/code-kitchen/video/upload/v1555038697/posts/zk5sldkxuebny7mwlhh3.mp3"></audio>
</body>

1Like

Comments

@Kobayashi0620

Questioner

ご回答いただきありがとうございます。

次は音声を付けてみます。

の内容をためのしたのですが、全ボタンで音声が流れてしまいます。

県ごとに音声を付与する場合は下記のような書き方で行えばよいのでしょうか？

var areaLinks = {
    1: "https://www.音声リンク",
    2: "https://www.音声リンク",
    3: "https://www.音声リンク",
    4: "https://www.音声リンク",
    5: "https://www.音声リンク",
    6: "https://www.音声リンク",
    7: "https://www.音声リンク",
    8: "https://www.音声リンク",
    9: "https://www.音声リンク",
    10: "https://www.音声リンク",
    11: "https://www.音声リンク",
    12: "https://www.音声リンク",
    13: "https://www.音声リンク",
    14: "https://www.音声リンク",
    15: "https://www.音声リンク",
    16: "https://www.音声リンク",
    17: "https://www.音声リンク",
    18: "https://www.音声リンク",
    19: "https://www.音声リンク",
    20: "https://www.音声リンク",
    21: "https://www.音声リンク",
    22: "https://www.音声リンク",
    23: "https://www.音声リンク",
    24: "https://www.音声リンク",
    25: "https://www.音声リンク",
    26: "https://www.音声リンク",
    27: "https://www.音声リンク",
    28: "https://www.音声リンク",
    29: "https://www.音声リンク",
    30: "https://www.音声リンク",
    31: "https://www.音声リンク",
    32: "https://www.音声リンク",
    33: "https://www.音声リンク",
    34: "https://www.音声リンク",
    35: "https://www.音声リンク",
    36: "https://www.音声リンク",
    37: "https://www.音声リンク",
    38: "https://www.音声リンク",
    39: "https://www.音声リンク",
    40: "https://www.音声リンク",
    41: "https://www.音声リンク",
    42: "https://www.音声リンク",
    43: "https://www.音声リンク",
    44: "https://www.音声リンク",
    45: "https://www.音声リンク",
    46: "https://www.音声リンク",
    47: "https://www.音声リンク"
};

@changkejun

なるほど、画面遷移は最終形ではないと理解しました。以下のようにonSelectを直せばいけます。

          onSelect: function(e,data){
          	$("#audio1")[0].src=areaLinks[data.code];
          	$("#audio1")[0].play();
  		}
    });
});
</script>
  <audio id="audio1" style="display:none" controls src=""></audio>
</body>

@Kobayashi0620
Questioner
実装したいものの詳細を記載出来ていませんでした。すみません。
下記内容が実装したいものになります！！
.実装内容

都道府県ごとの方言音声データをボタン押下時に再生させたい。県によって１つの県に対して複数音声データを設定したい。その際はランダムで音声を再生するようにする。
現状、特に外部に画面遷移するような機能はいらないかなと考えております。
複雑な内容になってしまいそうだったので少しずつ解決していこうと考えておりました。

@changkejun

「１つの県に複数音声」を実現するため、areaLinks を県ごとに配列を設ける必要です。

var areaLinks = {
    1: ["https://www.音声リンク","https://www.音声リンク","https://www.音声リンク"],
    2: ["https://www.音声リンク","https://www.音声リンク","https://www.音声リンク"],

後、「ランダム」ですね。

          onSelect: function(e,data){
            var ary=areaLinks[data.code];
            var idx=Math.round(ary.length*Math.random());
          	$("#audio1")[0].src=ary[idx];
          	$("#audio1")[0].play();
  		}
    });
});
</script>
  <audio id="audio1" style="display:none" controls src=""></audio>
</body>

@Kobayashi0620
Questioner
ありがとうございます！！
実施できました。
ローカルにある音声データを追加する際はこちらのように設定してみたのですが、これでは動作しませんでした。
ローカルの音声を設定するには、また別のやり方が必要になるのでしょうか？
何度もすみません、、
var voicePath = { 1: ["../audio/zk5sldkxuebny7mwlhh3.mp3"], 2: [""], 3: [""], 4: [""],
@changkejun
ローカルhtmlからローカルの音声ファイルを参照して動けないと思います。これはブラウザーの制限です。ローカルにWEBサーバを構築してhttp://localhost:XXXX/のようなURLすれば大丈夫です。

Are you sure you want to delete the question?