2019.07.22

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

コピー


<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でした。

Web制作