JavaScript playメソッドで音声ファイルを再生するサンプル
環境
Google Chrome 111.0.5563.147
Windows 10 Home 64bit
書式
1.音声ファイルを読み込む
let 変数名 = new Audio(ファイル名)
2.ボタン要素の取得
const 変数名=document.querySelector(“#セレクターID名")
3.イベントの登録
変数名.addEventListener('click’,関数名)
使用例
<!DOCTYPE html>
<html>
<body>
<button id="btnchk">確認</button>
<script>
//ボタンの要素の取得
const cft = document.querySelector('#btnchk');
//音声ファイルを読み込む
let sdfile = new Audio("xxx/xxx.mp3");
//イベントの登録
cft.addEventListener('click',play);
function play() {
// 音声ファイルの再生
sdfile.play();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<button id="btnchk">確認</button>
<script>
//ボタンの要素の取得
const cft = document.querySelector('#btnchk');
//音声ファイルを読み込む
let sdfile = new Audio("xxx/xxx.mp3");
//イベントの登録
cft.addEventListener('click',play);
function play() {
// 音声ファイルの再生
sdfile.play();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<button id="btnchk">確認</button>
<script>
//ボタンの要素の取得
const cft = document.querySelector('#btnchk');
//音声ファイルを読み込む
let sdfile = new Audio("xxx/xxx.mp3");
//イベントの登録
cft.addEventListener('click',play);
function play() {
// 音声ファイルの再生
sdfile.play();
}
</script>
</body>
</html>
結果
「確認」ボタンを押すと、音声ファイルを再生します。