その他

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

投稿日:2015年6月29日 更新日:

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 第二回やりこみ企画ですが、以下に『草案のページ』を作成しました。今回はセーブ回数を限定してのやりこみを考えております。開始まで数日期間を取っておりますので …

ののの通信のホームページを更新しました

まだしばらくは細部を変更するかと思いますが、 ののの通信のホームページを更新しました。 ■昨日ツイッターで呟いた件、まだバナーだけですが公開しております。 ■また最近はツイッターやPixiv等に情報が …

ののの通信のホームページ、大規模更新

ただいま、ののの通信HPの大規模更新をしています。 目標としているのは、基本的なデザインは踏襲しつつ、以下のように考えています。 ののの通信に関する情報をHPでまとめて確認できるように構成。 Pixi …

にの子先生のコミックス&同人誌 DL販売開始

■魔王軍へようこそシリーズの原画を担当頂いているにの子先生のコミックス&同人誌のDL版が発売になりました。 ●魔王軍へようこそ4の完全版 & ファンディスク(ムーンブルクへようこそ)もDlsiteさん …

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

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