その他

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

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

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

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

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

 

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

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

-その他

執筆者:

関連記事

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

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

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

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

ドラゴンクエストビルダーズ クリアしました!

先日ビルダーズをやっとクリアしまして、余りの感動に『ビルダーズ世界のはじまり』を妄想したので、なんとなく呟きます。 (twitterで呟いたののまとめです)   ※以下、ネタバレ注意です & …

2020年05月 進捗&近況

【5月分の近況記事です】 ・ツクールでの新作制作、楽しいけど難しいっ! 少しずつ進んでます ・シンエヴァの公開を心待ちにする今日この頃です ・ひとつ前の記事、間違えて『2019年』04月更新情報 と書 …

[故障]SurfacePro4の充電ができない

ゲーム製作とは関係ない記事ですいませんが、備忘録で残しておきます。 製作でも使っていたSurfacePro4が、ある日突然、充電できなくなりました。 【具体的な症状】 ACアダプタを接続しても、充電が …

Pickup Product

魔王軍へようこそ5 -創世-

■魔王軍へようこそ5 -創世- 【ダウンロード版】購入後、すぐ遊べる!
【DISK版】ののの通信が参加するイベントで頒布
【無印版からのアップデート】『創世』ではない無印版(DVDプレスしたもの)からのアップデートはこちらです

魔王軍へようこそ4 完全版

■魔王軍へようこそ4完全版 【ダウンロード版】購入後、すぐ遊べる!
【DISK版】DISK版の頒布は終了しました
【通常版からのアップデート】魔王軍へようこそ4通常版(時を知る者)に『ファンディスク・ムーンブルクへようこそ』を追加することで、完全版と同様になります