jQueryで音楽や動画を再生する方法を解説!

HTML5のaudioタグやvideoタグを用いることでWEBサイトに音楽や動画を埋め込むことができます。この音楽や動画をjQueryで操作することができればカスタマイズがしやすくなります。この記事ではjQueryで音楽や動画を再生する方法を解説していきます。

コンテンツ [表示]

  1. 1jQueryで音楽や動画を再生したい
  2. 2jQueryで音楽や動画を再生する方法
  3. 2.1HTML
  4. 2.2JavaScriptで再生
  5. 2.3jQueryで再生
  6. 3まとめ

jQueryで音楽や動画を再生したい

WEBサイトやWEBアプリ上で音楽や動画を埋め込みたいときにはHTML5から登場したaudioタグやvideoタグを用いることで実現することができます。

これらのタグとjQueryを用いることで音楽や動画の制御を行えるようにもなります。

この記事ではjQueryで音楽や動画を再生する方法を紹介していきます。また、下記の記事ではJavaScriptで音楽を再生する方法をサンプルコード付きで解説していますので、ぜひあわせて読んでみてくださいね。

あわせて読みたい
JavaScriptで音楽再生する方法をサンプルコード付き解説!のイメージ
JavaScriptで音楽再生する方法をサンプルコード付き解説!
WEBサイトやWEBアプリの中で音を鳴らすようにしたい、音声や音楽再生をしたいなどと思ったことがあるのではないでしょうか?JavaScriptのAudioクラスを使うことで音楽ファイルの再生や停止、音量調整機能などを実装することができます。

jQueryで音楽や動画を再生する方法

それではサンプルコードを使ってその方法を紹介していきましょう。

HTML

まずはHTMLのaudioタグ、videoタグで音楽と動画を準備していきます。音楽mp3ファイルや動画mp4ファイルはご自身で好きなものを用意してください。

<!-- 音楽 -->
<audio id="audio" loop>
  <source src="musics/music.mp3" type="audio/mp3">
</audio>
<!-- 動画 -->
<video id="video" loop>
  <source src="videos/video.mp4" type="video/mp4">
</video>

audioタグ、videoタグの中のsourceタグでsrc属性を与えて、その値でmp3ファイルやmp4ファイルのパスを指定します。

また、音楽や動画を再生するためのボタンも準備しておきます。

<!-- 再生ボタン -->
<div class="btns">
  <button id="musicPlay" class="btn btn-primary">音楽再生</button><!-- #musicPlay -->
  <button id="videoPlay" class="btn btn-primary">動画再生</button><!-- #videoPlay -->
</div><!-- .btns -->

JavaScriptで再生

jQueryで音楽や動画を再生する方法を紹介する前にJavaScriptで音楽や動画を再生する方法を紹介しておきます。

const musicBtn = document.getElementById('musicPlay');
const videoBtn = document.getElementById('videoPlay');

musicBtn.addEventListener('click', function(){
  document.getElementById('audio').play();
});
videoBtn.addEventListener('click', function(){
  document.getElementById('video').play();
});

基本的な流れは要素を取得して、その要素に対してplayメソッドを実行することで再生することが出来ます。

音楽再生ボタンをクリックした際に、getElementByIdメソッドでid属性audioの要素を取得して、この要素に対してplayメソッドを実行することで音楽を再生することが出来ます。

同様に動画再生ボタンをクリックした際にも、getElementByIdメソッドでid属性videoの要素を取得して、この要素に対してplayメソッドを実行することで動画を再生することが出来ます。

jQueryで再生

JavaScriptでの再生方法を踏まえた上で、いよいよ本題のjQueryで音楽や動画を再生する方法を紹介していきましょう。

基本的な流れは同じで要素を取得して、playメソッドを実行します。しかし、実は下記のコードでは上手く動作してくれません。

$('#musicPlay').click(function(){
  $('#audio').play();
});
$('#videoPlay').click(function(){
  $('#video').play();
});

結論から言うと、jQueryの場合はplayメソッドを実行する$()で取得してきた要素にget(0)メソッドを実行する必要があります。

$('#musicPlay').click(function(){
  $('#audio').get(0).play();
});
$('#videoPlay').click(function(){
  $('#video').get(0).play();
});

これはjQueryオブジェクトでは配列のような形式で要素を取得するからです。getメソッドを使用して配列の一番目の要素を取得してからplayメソッドを実行する必要があるのです。

console.logで確認してみましょう。

あわせて読みたい
JavaScriptのconsole.logの使い方を初心者向けに解説!のイメージ
JavaScriptのconsole.logの使い方を初心者向けに解説!
デバッグとは変数などの値を表示して意図した値が返ってきているかやエラーが起きていないかなどを発見していく作業です。JavaScriptではデバッグを行うのに便利なconsole.log関数が提供しています。ここではconsole.logの使い方を解説します。
console.log(document.getElementById('audio'));
console.log($('#audio'));
console.log($('#audio').get(0));

こうすることでdocument.getElementById$()では取得できるものが違うことが一目瞭然ですね。

getメソッドを使うことでdocument.getElementByIdで取得した要素と同じものが取得できていることも確認できます。

まとめ

jQueryで音楽や動画を再生する方法を解説してきました。再生することができれば、停止や音量の調整などのその他の調査はJavaScriptで行う方法と同じですので、これでjQueryでもカスタマイズが出来るようになっていると思います。ぜひサンプルコードを参考にしてカスタマイズしてみてくださいね。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

みぎさん
ライター

みぎさん

大阪府の現役システムエンジニアです。WEB制作やWEB開発、ライティングなど幅広く活動しております。 【言語/FW】HTML,CSS,Sass,JavaScript,jQuery,Vue.js,PHP,WordPress,Laravel,Java