HTML5タグになって新しく登場したvideoタグ、audioタグ、canvasタグ。特にvideoタグは使用する機会も多くあり、HTML1つで動画を再生できることのありたがみを感じています。
そんなvideoタグやaudioタグをjQueryで再生したい時に注意しておきたいことについて紹介いたします！
目次
audioタグを例にとって説明！audioタグに埋め込みした音声ファイルをJavaScriptから再生
audioタグを例にとって説明してみます！
jQueryの基本は「命令をしたい場所」を決めて、命令を実行するという流れです。
まずはjQueryでaudioタグを取得し、その後取得した要素（音声）を鳴らすための、play()という命令を使用します。
ここまでの流れをソースコードにすると、以下のようになると、多くの方々が想像されると思います！
■HTML
<audio src="test.mp3" id="audio"></audio>
■jQuery
$("#audio").play();
しかし、このままではtest.mp3という音声が鳴らないんですね・・・
jQueryでplay()、getContext()などHTML5関連タグに紐付いたメソッド使用時の注意点
音声を鳴らすためのplay()メソッドだったり、canvasタグに描画を行うために必要なgetContext(“2d”)メソッドなどをjQueryオブジェクトで扱う時の注意点です。
結論からいうと、jQueryオブジェクトに対してplay()やgetContext(“2d”)を使用する場合、jQueryオブジェクトは配列のような形で取得されるため、get(0)などを使用して、「一番最初の要素」を取得した上で命令をしないといけないのです！
ソースコードにすると以下のような形になります。
■HTML
<audio src="test.mp3" id="audio"></audio>
■jQuery
$("#audio").get(0).play();
//あるいは以下でもOK
$("#audio")[0].play();
ちなみに、あんまりやる機会がないとは思いますが、audioタグの中に入っているテキストデータを取得したいというケースがあった場合、jQueryではtext()メソッドを使うと思うのですが、text()メソッドなどについては、jQueryオブジェクトにget(0)などをつけなくても問題ありません。
text()などはjQuery特有のメソッド（命令）であることに対して、play()はノーマルなJavaScriptでも使用できるものなので、ノーマルJavaScriptでも使用できるメソッドをjQueryオブジェクトに対して使用しようとする時には、get(0),[0]などが必要になる、と覚えておけばOKです！
まとめ
jQueryでvideoやaudioを再生したい時はオブジェクト取得方法に注意が必要ということについて説明させていただきました！
jQueryoオブジェクトは配列のような形で取得されるというのは、Console.log()で確認してみたいとわからないところ。
jQueryも奥深いところがたくさんあるなぁと思った次第なのでした！
