東京都府中市、九段下のWEB制作会社Maromaroのブログです

2019.07.22

sachika

audioタグでクリックすると最初から再生させるボタンを作ってみた

こんにちは!MaromaroのSachikaです。

本日は、HTML5のaudioタグを使って、クリックすると最初から再生するボタンを作ってみたので、備忘録も兼ねてご紹介します。

①まずは音源を用意します。

※audioタグの対応音声は「MP3,OggVorbis,OggOpus,AAC,WebMVorbis,FLAC,WAV PCM」と色々あるようですが、対応ブラウザを網羅しているのはMP3、AACなので、用意できるのであれば無難にMP3がオススメです。

ちなみに、調べた中で一番使いやすかったフォーマット変換サイトはコチラ♪

Online Audio Converter
https://online-audio-converter.com/ja/

②次に、audioタグを使って音源とボタンを配置します。

③最後にJavaScriptでボタンを動作させるだけ!

このjQueryは、pause()→再生時間を0にする→もう一回再生する となっているだけなのですが、Google先生で「html5 ボタン クリック 最初から」と調べても意外とヒットしなかったので、困った方の助けになると嬉しいです♪

  • RESULT
  • HTML
  • CSS
  • JS
  • button1

    button2

    button3

  • コピー
    
    <div id="audio_area">
    <div class="audio">
      <audio src="https://blog.maromaro.co.jp/wp-content/uploads/shine2.mp3" preload="auto"></audio>
    <div class="audio_btn"><img src="https://blog.maromaro.co.jp/wp-content/uploads/btn_img01.png" alt="button1" /></div>
    </p></div>
    <div class="audio">
      <audio src="https://blog.maromaro.co.jp/wp-content/uploads/ficedula-narcissina-twitter-1.mp3" preload="auto"></audio>
    <div class="audio_btn"><img src="https://blog.maromaro.co.jp/wp-content/uploads/btn_img02.png" alt="button2" /></div>
    </p></div>
    <div class="audio">
      <audio src="https://blog.maromaro.co.jp/wp-content/uploads/school-chime1.mp3" preload="auto"></audio>
    <div class="audio_btn"><img src="https://blog.maromaro.co.jp/wp-content/uploads/btn_img03.png" alt="button3" /></div>
    </p></div>
    </div>
    
  • コピー
    
    #audio_area .audio {
     display: inline-block;
     transition: all 0.3s;
     cursor: pointer;
    }
    #audio_area .audio:hover {
     opacity: 0.6;
    }
    
  • コピー
    
    $('.audio_btn').on('click', function(){
     $('audio').each(function() {
     $(this).get(0).pause();
     }); $(this).prev().get(0).currentTime = 0;
     $(this).prev().get(0).play();
     });
    

以上、Sachikaでした。