<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<audio id="audiosample">
<source src="sound/sound1.mp3">
</audio>
</body>
</html>
idを付与したら、JavaScriptのコードを書いていきます。今回はボタンを設置して、onclickで関数を実行にしましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<script>
//音を鳴らす
function execute(){
var audio = document.querySelector("#audiosample");
audio.play();
}
</script>
</head>
<body>
<audio id="audiosample">
<source src="sound/sound1.mp3">
</audio>
<input type="button" value="実行" onclick="execute();">
</body>
</html>
document.querySelector()でaudioタグを取得して、audio.play();と書くことで、<audio>タグで指定した音声ファイルを実行することができます。
※音声ファイルを停止する時は、audio.pause();を使います。
0 件のコメント:
コメントを投稿