【HTML5/jQuery】マウスオンで音がなるボタンを追加する方法

どうも、中村です。
ふと、「もっと面白いブログにしたい」という感覚が湧いてきまして、navigationに音をつけました。そのログです。自分の備忘録がメインなので端折っている点などがあるかもしれません。

この記事の目次

jQueryHTML5を使って音のなるボタンを追加する

追加したファイル / 編集したファイル

・header.php
・audioファイル（音声ファイルです。mp3とoggを用意しました）
・teema_func.js （動きを付けるjsは別ファイル化したかったため追加　header.phpに直書きでもいけます）
素材を頂いたサイト様：無料効果音で遊ぼう！

用意した音声ファイルをメディアに上げる

WordPress上のメディアにアップロードしてください。（勝手に画像しか保存できないと思っていたのですが、案外何でも保存できるんですね。）

Jsファイルの作成と記述

Jsファイルの記述です。
※WordPressは「$」は「jQuery」と記述しないと反応しないみたいです。

jQuery(function(){
   jQuery('.sBtn a').mouseover(function(){
      document.getElementById("overSound").currentTime = 0; //再生秒数を 0 にセット
      document.getElementById("overSound").play(); //動画を再生
   });
});

※jQuery(‘セレクタ’)には、cssの指定と同じように、音を鳴らしたい対象の要素を指定してください。

header.phpの修正

※header.phpに直書きで対応される方はスルーして良い項目です。

Jsファイルを読み込む様に設定します。必ずjQuery.jsよりも後ろに記述してください。（jQuery.jsの前に記述すると反応しません。）

<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
<script src="<?php echo get_template_directory_uri(); ?>/js/func_rekid.js" type="text/javascript"></script>
<!-- google Analytics -->
<?php if( !is_user_logged_in() ) : ?>

jsのファイル名は、ご自身で作成したファイル名に変更をお願いします。
「get_template_directory_uri();」は、WordPressで設定しているテーマのディレクトリを自動的に参照してくれます。（わからない場合は直書きしても大丈夫です。）

audioの設定

HTML5のaudioをつかって動画を呼び出します。それを後ほど、jQueryでリンクのmouseon時に発火させて音を再生させます。

<body <?php body_class(); ?>>
<audio id="overSound" preload="auto">
  <source src="http://104.154.92.64/wp-content/uploads/2015/11/soundbotton.mp3" type="audio/mp3">
  <source src="http://104.154.92.64/wp-content/uploads/2015/11/soundbotton.ogg" type="audio/ogg">
  <p>※お使いのブラウザはHTML5のaudio要素をサポートしていないので音は鳴りません。</p>
</audio>

audioタグは基本的に高さなどは無いみたいなので、どこに記述してもおそらくは問題無いと思います。先ほどと同じ（header.php）に記述でも問題ありません。「body」要素の中に記述があれば反応します。

まとめ

videoやaudioタグをjsで制御する作業は、敷居が高いと思われがちですが、意外とそんなこともなくすんなりと実装できました。今後、徐々にですがもっと動きのある「面白かっこいいサイト」にしていきたいです。