はじめに
初心者でもミュージックの再生、停止することは簡単だったので実装してみた。
機能
再生アイコンを押すと音楽が流れ始め表示がSTOPアイコンに切り替わるボタンの実装。
実装
HTML
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="content">
<img src="images/play.png" id="icon" />
</div>
</div>
<audio id="mySong">
<source src="gameover.mp3" type="audio/mp3" />
</audio>
<script src="js/audio.js"></script>
</body>
</html>
Javascript
const mySong = document.querySelector('#mySong');
const icon = document.querySelector('#icon');
icon.onclick = function () {
if (mySong.paused) {
mySong.play();
icon.src = "images/pause.png";
} else {
mySong.pause();
icon.src = "images/play.png";
}
};