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 をゆっくりと非表示にする。

国内WordPressテーマ シェア率 No.1

Web制作案件にも使いやすい WordPress テーマ

SWELL

シンプルで多機能、そしてカスタマイズしやすい

ダッシュボードやカスタマイズ画面に沢山の設定が追加されていて、ノーコードでも相当なカスタマイズが可能。
追加CSS、追加JavaScript をページ毎に入力欄があるので、細部までこだわったサイト制作が可能。

買い切り型で、複数サイトに使用可能、Web制作案件にも

一度購入すれば、いくつのサイトに使用してもOK。フリーランスのWeb制作案件にも使えます。
メンバー登録すればテーマ更新も無償。

  • 一度買えば、月額料金はなし
  • 複数サイトで使用可能
  • ノーコードでも調整できる設定が、ダッシュボードやカスタマイズ画面に大量追加
  • ブロックエディタの豊富な追加ブロックで投稿がリッチに
  • 細部の調整が、「追加CSS と 追加JavaScript」 で簡単に出来る
  • 他の人気テーマ からの乗り換え対応プラグイン配布( cocoon, ADDINGER, JIN, SANGO, STORK, THE THOR)
jquery.logo

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

bobuのアバター bobu Webクリエイター

ホームページ制作、リメイク、バナー、画像制作を行っています。
毎朝5:00-7:00 まで朝活で ITの知識を インプット+ Twitter へアウトプット。
お仕事のご依頼は「お問い合わせページ」からご連絡ください。