audioタグを利用した音声ファイルの再生方法

ブラウザ上で、音声や動画を再生するには、色々な方法があります。

中でも、HTML5では、たいへん簡単に実装することができます。

具体的には、HTML5で新しく登場したvideoタグ、audioタグ、canvasタグを利用することになります。

特にvideoタグは使用する機会も多くあり、HTML1つで動画を再生できるため、非常に便利かと思います。

<audio src="test.mp3" id="audio"></audio>

1	<audio src="test.mp3" id="audio"></audio>

<script type="text/javascript">
$(function(){
	$("#audio").get(0).play();

	//もしくは、下記の記述でも大丈夫です
	$("#audio")[0].play();
});
</script>

$(function(){

$("#audio").get(0).play();

//もしくは、下記の記述でも大丈夫です

$("#audio")[0].play();

});

</script>

しかしながら、上記の方法では、音声が再生されません。

これは、オブジェクトを取得した状態で、メソッドを呼び出す必要があるからです。

具体的には、下記のような形で実装します。

<audio src="test.mp3" id="audio"></audio>

1	<audio src="test.mp3" id="audio"></audio>

<script type="text/javascript">
$(function(){
	$("#audio").get(0).play();

	//もしくは、下記の記述でも大丈夫です
	$("#audio")[0].play();
});
</script>

$(function(){

$("#audio").get(0).play();

//もしくは、下記の記述でも大丈夫です

$("#audio")[0].play();

});

</script>

HTML上で、音声や動画を再生する機会が増えてくると思いますので、

ぜひ、参考にして下さい。