こんにちは、kazuです。
本日はJavaScriptでmp3などの音声ファイル流す簡易的なアプリを作成してみたので、それを解説していきます。
どのようなアプリか？
通常の音楽プレーヤーを簡易的に作ったものです。
プルダウンを選択して再生ボタンを押すと音楽が流れます。
また他のボタンがありこちらは停止ボタン、一時停止ボタン、
ミュートボタン、繰り返しボタンがあります。
以下が今回の画像ですがほぼCSSを使用していないのでレイアウトがダサいのは勘弁してください(笑)
ボタンの説明に入りたいと思います。
左のボタンから説明に入ります。
1.再生ボタン
・ボタンを押すことで音楽が再生されます
・音楽再生時と音楽未再生時で画像が切り替わります。
・音楽再生時は再生ボタンを押すことはできません。
2.停止ボタン
・音楽未再生時は停止ボタンを押すことができない（再生時のみボタンを押すことができる）
・停止ボタンを押すと0秒から戻る
3.一時停止ボタン
・音楽未再生時は一時停止ボタンを押すことができない（再生時のみボタンを押すことができる）
・一時停止ボタンを押すと現時点の場所で止める
・一時停止ボタンは一時停止と一時停止時ではないときとで画像が切り替わる
・再び再生する時は一時停止ボタンを押す
4.ミュートボタン
・ミュートボタンを押すと音が出なくなる
・ミュート時とミュート時出ないときで画像が切り替わる
5.ループボタン
・ループボタンを押すと同じ音楽がずっと流れる
・ループ時とループ時出ないときとで画像が切り替わる
がボタンの対応になります。
ディレクトリ構成
ディレクトリ
├─ bgm
│ ├─ おやすみDay.mp3
│ ├─ ぴよぴよサーキット.mp3
│ └─ 海底の神殿.mp3
│
├─ img
│ ├─ ボリュームオフ.svg
│ ├─ ボリュームオン.svg
│ ├─ リピートオフ.svg
│ ├─ リピートオン.svg
│ ├─ 一時停止.svg
│ ├─ 一時停止中.svg
│ ├─ 再生ボタン.svg
│ ├─ 再生中ボタン.svg
│ └─ 再生停止ボタン.svg
│
├─ bgmtool.css
├─ bgmtool.html
└─ bgmtool.js実際にコードを見てみよう
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BGMtools</title>
<script src="bgmtool.js"></script>
<link rel="stylesheet" type="text/css" href="bgmtool.css">
</head>
<body>
<div class="parent">
<div class="dova-syndrome">
<h2>BGMtools</h2>
<p>おやすみDay：<span class="dova_url">https://dova-s.jp/bgm/play15832.html</span></p>
<p>ぴよぴよサーキット：<span class="dova_url">https://dova-s.jp/bgm/play15795.html</span></p>
<p>海底の神殿：<span class="dova_url">https://dova-s.jp/bgm/play7690.html</span></p>
<form name="BGMForm">
<select name="bgm">
<option value="おやすみDay">おやすみDay</option>
<option value="ぴよぴよサーキット">ぴよぴよサーキット</option>
<option value="海底の神殿">海底の神殿</option>
</select>
</form>
<input type="image" class="button" src="img/再生ボタン.svg" id="playButton" onclick="bgmArray()">
<input type="image" class="button" src="img/再生停止ボタン.svg" id="stopButton" onclick="stop()" disabled>
<input type="image" class="button" src="img/一時停止.svg" id="pauseButton" onclick="pause()" disabled>
<input type="image" class="button" src="img/ボリュームオン.svg" id="mutedButton" onclick="muted()">
<input type="image" class="button" src="img/リピートオフ.svg" id="loopButton" onclick="loop()">
</div>
</div>
</body>
</html>
.button{
height: 32px;
margin : 18px;
}
.dova_url{
margin-left:20px;
color: green;
}
var myAudio = new Audio();
// 一時停止する時の変数初期値は0に設定して始めて押すときは止まるように設定
var pauseNum = 0
// 1秒ごとのbgm監視のグローバル変数
var endChangeButton;
//bgmを格納して再生するbgmをplay関数に渡す関数
function bgmArray(){
playChangeButton(0)
var SelectBGM = document.BGMForm.bgm;
//BGMの番号を取得する
var BGMNum = SelectBGM.selectedIndex;
//BGMを配列に入れる
var BGMArray = [
'bgm/おやすみDay.mp3',
'bgm/ぴよぴよサーキット.mp3',
'bgm/海底の神殿.mp3',
]
play(BGMArray[BGMNum])
}
//bgmを再生する関数
function play(BGMPath){
// ボタンが活性化する再生ボタンのみ非活性
buttonSwitching(0)
// BGMのpathを取得する
var BGMPath = BGMPath
myAudio.src = BGMPath;
// bgmを流す
myAudio.play()
playChangeButton(true)
// 1秒ごとに実行して音楽が終了したらボタンが切り替わる
endChangeButton = setInterval(function(){
// bgmの流れている時間を表示させる
console.log("myAudio.currentTime",myAudio.currentTime)
// bgmが終了しているかチェックするfalseがbgmが流れている状態trueが終了した状態
console.log("myAudio.ended",myAudio.ended)
// 1秒ごと実行させてbgmの終わりを監視するbgmが終わったらif文に入る
if(myAudio.ended){
// 再生ボタンを終了状態にする
playChangeButton(false)
// 1秒ごとに監視していたものを終了する
clearInterval(endChangeButton);
// 停止ボタンと一時停止ボタンを非活性にする
buttonSwitching(1)
}
}, 1000);
}
// bgmを停止する関数
function stop() {
// 一時停止をする
myAudio.pause();
// 秒数を0に戻す
myAudio.currentTime = 0;
// 再生ボタンの画像を入れ替える（再生ボタン）
playChangeButton(false)
// bgmの監視の解除をする
clearInterval(endChangeButton);
// ボタン非活性化する再生ボタンのみ活性
buttonSwitching(1)
}
// bgmを一時停止する関数
function pause() {
var pauseButton = document.getElementById('pauseButton')
var pausedSrc = 'img/一時停止中.svg'
var pauseSrc = 'img/一時停止.svg'
if(pauseNum == 0){
// 一時停止
pauseNum = 1
myAudio.pause();
// 一時停止画像
pauseButton.src = pausedSrc
} else {
// 一時停止解除
pauseNum = 0
myAudio.play();
// 一時停止解除画像
pauseButton.src = pauseSrc
}
}
// bgmをミュートにする
function muted() {
var buttonId = document.getElementById('mutedButton')
var muteOffSrc = 'img/ボリュームオフ.svg'
var muteOnSrc = 'img/ボリュームオン.svg'
// Audioのミュートを取得しifで分岐させる
if(myAudio.muted){
// ミュートをオンにする
myAudio.muted = false
buttonId.src = muteOnSrc
} else {
// ミュートをオフにする
myAudio.muted = true
buttonId.src = muteOffSrc
}
}
// bgmをループにする
function loop() {
var loopButton = document.getElementById('loopButton')
var loopOffSrc = 'img/リピートオフ.svg'
var loopOnSrc = 'img/リピートオン.svg'
console.log("myAudio.loop",myAudio.loop)
// Audioの現在のtrue,falseチェックする
if(myAudio.loop){
//ループを解除する
myAudio.loop = false
// ループオフ画像
loopButton.src = loopOffSrc
} else {
//ループさせる
myAudio.loop = true
// ループオン画像
loopButton.src = loopOnSrc
}
}
// 再生ボタンを切り替える関数
function playChangeButton(play){
// 引数のplayはtrue,falseで対応trueが再生中falseが停止中
var playedImage = 'img/再生中ボタン.svg';
var notPlayedImage = 'img/再生ボタン.svg';
var playButton = document.getElementById('playButton')
if(play){
playButton.src = playedImage
} else {
playButton.src = notPlayedImage
}
}
// ボタンの活性、非活性を切り替える関数
function buttonSwitching(switchNum){
var stopButton = document.getElementById("playButton");
var stopButton = document.getElementById("stopButton");
var pauseButton = document.getElementById('pauseButton');
switch (switchNum) {
// ボタンが活性化する再生ボタンのみ非活性
case 0:
stopButton.disabled = false;
pauseButton.disabled = false;
playButton.disabled = true;
break;
// ボタン非活性化する再生ボタンのみ活性
case 1:
stopButton.disabled = true;
pauseButton.disabled = true;
playButton.disabled = false;
break;
}
}※今回のBGMはDOVA-SYNDROME様からお借りしました：https://dova-s.jp/
最後に
いかがでしたでしょうか？
もしかしたらほかにいい書き方があるかもしれませんが
これでも音楽プレーヤーとして成り立っているので問題ないでしょう。
最後までご覧いただきありがとうございました。
関連記事
こんにちはkazuです。 本日はjavascriptで2022年までのカウントダウンタイマーを作ってみましたので、 そのコードを解説していきます。 アプリの説明 まずは、アプリの説明をしていきます。 といってもたいして説明する[…]
関連記事
こんにちはkazuです。 本日はjavascriptでアラームとタイムセールを知らせるプログラムを作ってみたので、 そのコードを解説していきます。 はじめに 今回はどのようなプログラムを作ったかといいますと、 特定の時間を変数に入[…]
関連記事
こんにちは、kazuです。 今回は音で知らせるタイマーをJavaScriptで作成してみたので それを解説していきます。 どのようなアプリか？ 以下の画像のようにBGMを選択して分と秒をまたは分秒のどちらか入力して スタートをクリ[…]