BGMをONかOFFか決めるボタン[JQuery]

音楽を流す、止めるボタンの作り方

See the Pen Untitled by ぼぶ@朝活input中 (@bobu_6326) on CodePen.

解説

HTML

• #sound__cheak = ページを開いたとき画面全体に、BGM ON と BGM OFF のボタンを表示する。どちらかのボタンをクリックすると非表示になる。
• <audio autoplay loop> = 音楽を鳴らすためのタグ。autoplay は自動再生、loop はリピートを行う追加記述。
• <source src=”音楽ファイル名”> = audio の子要素。音楽ファイルを指定する。ブラウザに音楽ファイル形式が対応していなければ、次の<source>タグの音楽ファイルの再生を試みる。
• <audio>タグ内の<p> = 全ての<source>の音楽ファイルの拡張子にブラウザが対応していなければ<p>のコメントが表示される。
• <main> = ページのコンテンツを記述。BGM の ONかOFF を選択した後に表示される。
• #sound__switch = メインコンテンツ内にある BGM の再生、停止の為のボタン。

CSS

body

• margin: 0; = ブラウザで用意される余白を消す。リセットCSS。

#sound__cheak

• position: absolute; + top: 0; = 環境によって上に出る余白を消す。
• display: flex; = 子要素のボタンを横並びにする。
• justify-content: space-evenly; = 横並びにしたボタンを等間隔に並べる。
• background-color = 背景色。
• width: 100%; + height: 100vh; = 画面全体に表示させる。
• z-index: 9999; = 他の要素と重なった時の優先度。

#sound__cheak button

• width: + height: = 要素のサイズ。
• position: relative; + top: 50%; = 画面の真ん中の高さにボタンを配置する。
• transform: translateY(-50%); = 要素のスタート位置を、左に要素の50%分移動する。

.sound__on, .sound__off

• text-align: center; = ボタンの文字を中央揃え。
• background-color: = ボタンの背景色。
• border-radius: 50%; = 要素を円形にします。
• cursor: pointer; = カーソルを乗せた時にカーソルの形を「指」にします。

JQuery

• $(‘button’).on(‘click’,function(){ } = <button>をクリックした時に{ }内の処理が行われる
• let button_class = $(this).attr(‘class’); = 変数 button_class にクリックしたボタンの class名を取得する。
• switch(button_class){ } = button_class の内容によって処理を分岐する。

• case ‘sound__on’: = 取得したclass名が sound_on だったら break; までの処理を行う。
• $(‘audio’).get(0).play(); = <audio>の曲を再生する。
• $(‘#sound__cheak’).fadeOut(); = #sound__cheak をゆっくりと非表示にする。

• case ‘sound__off’: = 取得したclass名が sound_off だったら break; までの処理を行う。
• $(‘audio’).get(0).pause(); = <audio>の曲を停止する。
• $(‘#sound__cheak’).fadeOut(); = #sound__cheak をゆっくりと非表示にする。