HTML
JavaScript
HTML5
Chrome
jQuery

HTMLとjQueryでaudioタグで音声ファイルを再生する方法(ブラウザはChromeを使用)


HTMLのaudioタグで音声ファイルを再生する方法


[概要]

HTML, jQueryでmp3の音声ファイルを再生する簡単なプログラムを作りました。

再生方法としては、

①ボタンを押して再生

②自動再生

→今回の②自動再生は、リロードした時に再生するプログラムになります。


①ボタンを押して再生


HTMLのソース

<html>

<head>
<title>Autoplay-Plocy</title>
<link rel="stylesheet" type="text/css" href="/index.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="/index.js"></script>
</head>

<body>
<button type='button' id='play'> Play SOUND! </button> <!-- 再生ボタン -->

<!-- audioタグを設置 src属性に再生した音声ファイルのパスを指定  -->
<audio id='sound' preload="auto" src="/union1.mp3" type="audio/mp3"></audio>
</body>
</html>


JavaScriptのソース ※jQueryで実装しています

butoon#play がクリックされると発火し、audio#soundのsrc属性に記載されたパスを元にmp3の音声ファイルを再生します。

$(function () {

$('#play').on('click', function(){
$("sound").play();
});
});


②自動再生

①のボタンを押して再生とは異なり、自動再生ではブラウザのautoplay-policyが大きく関わってきますが、今回は自動再生ができる状態になっていること前提で進めます。

*Chrome autoplay-policyについては別記事でまとめました。

https://qiita.com/REK/items/f0515c650a35213a69d2


HTMLのソース

<html>

<head>
<title>Autoplay-Plocy</title>
<link rel="stylesheet" type="text/css" href="/index.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="/index.js"></script>
</head>

<body>
<!-- audioタグを設置 src属性に再生した音声ファイルのパスを指定  -->
<audio id='sound' preload="auto" src="/union1.mp3" type="audio/mp3"></audio>
</body>
</html>


JavaScriptのソース ※jQueryで実装しています

画面がリロードされると発火するプログラムになっています。

audio#soundのsrc属性のパスを元に音声ファイルを再生します。

$(function () {

$(document).ready( function(){
$("sound").play();
});
});

以上になります。