その他

[tips] 画像クリックで音を再生

投稿日:

HPで『画像のクリック時に音を鳴らす』方法について。

<a>でファイルを指定して再生すると、画面が切り替わってしまうので、

HTML5とjavaを使ったやり方に変更。

 

■こちらのやり方を参考に、ファイルも使わせていただきました。

http://syncer.jp/html5-javascript-hello-button

 

[苦戦したので方法メモ]

音声ファイルは適当にフォルダを作ってまとめるとわかりやすい

sounds.jsファイルに3行程度、音声ファイルを入れたフォルダなどを設定

(ついでに再生中に、次の音をクリックした時に再生しないよう、一カ所だけ変更)

音声を組み込みたいhtmlファイルに下記を書く

・<head>内でsounds.jsファイルを読み込む。

・再生ボタンはこのようにする

<a href=”#” class=”sounds” data-file=”***拡張子不要”>画像など</a>

もしくは、 <img src=”画像ファイル名” class=”sounds” data-file=”***拡張子不要”>

・音声停止ボタンもつくる

<a href=”#” id=”stop-button-syncer” style=”color:#000000;”>音声停止</a>

 

魔王軍4・4FDのページに使ってます

-その他

執筆者:

関連記事

魔王軍へようこそ4 第二回やりこみ企画について

以前より告知しておりました魔王軍へようこそ4 第二回やりこみ企画ですが、以下に『草案のページ』を作成しました。今回はセーブ回数を限定してのやりこみを考えております。開始まで数日期間を取っておりますので …

ダンガンロンパ3最終回について

未来編11話を見た時、色々予想をしてた記事を書きましたので、それの答え合わせをかねて最終話(希望編)の感想。ネタバレアリです。 ■11話を見た後の記事はこちら  

現在の同人ショップでのお取り扱い作品について

11月11日現在、魔王軍の書物庫2、メロンさんの通販が復活しております。店舗さんに残っていた分が通販に回っているのだと思います。今月の報告書によると在庫は残り僅かですので、イベントに来られない方はお急 …

シンゴジラの感想(途中からネタバレ有り)

シンゴジラ、初日に見てきました。 ののの通信の中の人はゴジラファンでも特撮ファンでもありませんが、エヴァは大好きです。 そしてエヴァのイメージが強い庵野さんが、エヴァの続きを差し置いて作った映画。 内 …

最新トピック(16年03月1週目)

魔王軍へようこそ4 第二回やりこみ企画 ”やりこみレポ”掲載しました! 中の人の体調不良で遅くなってしまい、大変申し訳ありません。第二回やりこみ企画、優勝のスナ様とドリアンマン様のやりこみレポを掲載し …