実現したいこと



ここをクリックすると和太鼓の音声が出て
3秒後にブログに飛びます



STEP①jqueryが動くように準備

下記を～の間に挿入して、jqueryを準備します。



<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

STEP②クリックで音声が流れるようにします

先ほどのコードの下に音声を流すためのjsを入れます。
※var id = sound-fileの部分が音声ファイルを読み込むidとなっているので
　必要であれば書き換えてください。



<!-- ボタンクリックで音声を流す -->
<script type="text/javascript">
function sound()
{
	var id = 'sound-file' ;
	if( typeof( document.getElementById( id ).currentTime ) != 'undefined' )
	{
		document.getElementById( id ).currentTime = 0;
	}
	document.getElementById( id ).play() ;
}
</script>


STEP③３秒後に別のページに遷移（リンク）させる設定をします

先ほどのコードの下に、さらに自動遷移させるためのjsを入れます。
※$(‘#sound_btn’)が自動遷移させるためのidです。
※window.location.href = ‘/blog/’;がリンク先のURLを指定する部分です。
※3000と書かれているのがミリ秒の単位です。5000にすれば5秒になります。



<!-- クリックして3秒後にページ遷移する -->
<script type="text/javascript">
$(function() {

  // ボタンをクリックしたとき
  $('#sound_btn').click(function(e) {
		e.preventDefault();
    
    // ボタンを押して5秒後に結果ページへ遷移
    var TransitionDelay = function(){
        window.location.href = '/blog/';
    }
    setTimeout ( TransitionDelay, 3000 );
  });
});
</script>

STEP④最後にhtmlを記述

下記をページ内に記述すれば、完成です。
※音声ファイルのパスを合わせるようにしてください。



<!-- ボタン -->
<a href="/link/" onClick="sound()" id="sound_btn">
リンクボタン
</a>
 
<!-- 音声ファイルの読み込み-->
<audio id="sound-file" preload="auto">
    <source src="/audio/music.wav" type="audio/wav">
    <source src="/audio/music.m4a" type="audio/m4a">
</audio>


この記事を書いた人


上級ウェブ解析士　水間 祐平

上級ウェブ解析士　水間 祐平
出身：千葉県千葉市
資格：上級ウェブ解析士／産業カウンセラー
趣味：映画鑑賞、スポーツ観戦、草野球

中小企業を専門に合計400サイト以上のホームページの運用・分析を担当。現在も常時100サイト以上のアクセス解析を行い、数値データから導き出す改善提案で、多くの成功事例を生み出している。また、企業のWeb・広報担当者向けにアクセス解析のセミナー研修を行っている。