その他

[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のページに使ってます

-その他

執筆者:

関連記事

最新トピック(16年04月4週目)

Comic1☆10 参加します スペースは『し-38b ののの通信』で、原画をお願いしているにのこやさんと合体スペースです。 魔王軍5の体験版を頒布予定でしたが、こちらは少し予定を変更します。申し訳あ …

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

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

魔王軍へようこそ4 RTA動画

魔王軍へようこそ4ですが、ついにRTA動画まで作っていただきました! 投稿者の方からは丁寧な問い合わせのメールをいただきまして、いくつかの条件の下、こちらに記載の範囲外の投稿も大丈夫とお返事しておりま …

[tips]メニューを更新(画像化)

サイトのメニュー部分、『TOP』とか『作品一覧』の部分を画像に変更しました。 またモバイル端末では、Aboutを押したあと、文字メニューがでるようにしています。 今後も少しずつ充実させていきたいと思い …

ダンガンロンパ3 霧切さんの不可解と今後の予想

珍しくアニメの感想と推測。 興味の無い方、すいません……。 ダンガンロンパ3を11話まで見て、霧切さんの死ぬ直前の行動に疑問が浮かんだので、それについて長々書いてます。 あの霧切さんのことなので、真の …