HTML/CSS、JavaScript、jQueryで自作のWeb音楽プレイヤーアプリを開発しました
<!DOCTYPE html>
<!-- 新規作成 2022/11/20 -->
<!-- 機能追加 2022/11/23(音量の調節機能) -->
<!-- music Pot -->
<!-- お気に入りの曲を流すWebアプリ -->
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自作PodcastWebアプリケーション</title>
<style>
#display_title {
width:500px;
background-color:#E0A0FF;
color:#075500;
font-size:40px;
}
#display_musician {
width:500px;
background-color:#E0A0FF;
color:#4759F0;
font-size:40px;
}
.music1 {
width:280px;
font-size:16px;
background-color:#FFFFAC;
color:#00F;
margin:auto;
margin-left:100px;
}
.music_on {
width:500px;
margin-top:10px;
}
.button1 {
width:90px;
height:50px;
background-color:#7FF1D6;
color:#F0F;
}
.music2 {
width:320px;
font-size:16px;
background-color:#EEAF90;
color:#70F;
margin-top:10px;
margin-left:80px;
}
.sound_on {
width:500px;
margin-top:10px;
margin-left:30px;
}
.button2 {
width:90px;
height:50px;
background-color:#0A5;
color:#FF0;
}
</style>
<!-- jQueryライブラリの読み込み -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="display_title">曲のタイトル</div>
<div id="display_musician">歌手名</div>
<p class="music1">再生、一時停止、停止、選曲ボタン</p>
<div class="music_on">
<input type="button" id="stop" name="stop" class="button1" value="一時停止" >
<input type="button" id="play" name="play" class="button1" value="再生">
<input type="button" id="first" name="first" class="button1" value="最初へ">
<input type="button" id="all_stop" name="all_stop" class="button1" value="停止">
<input type="button" id="select" name="select" class="button1" value="選曲">
</div>
<p class="music2">音量の上げ下げ、ミュート、ミュート解除</p>
<div class="sound_on">
<input type="button" id="up" name="up" class="button2" value="+" >
<input type="button" id="down" name="down" class="button2" value="-" >
<input type="button" id="mute" name="mute" class="button2" value="消音" >
<input type="button" id="s_mute" name="s_mute" class="button2" value="消音解除" >
</div>
<script language="javascript" type="text/javascript">
const music = new Audio(); //変数作成
// 曲リスト配列
const array1 = ['like @ Angel/黒夢/like@angel.mp3','なぜ/Hysteric Blue/naze.mp3','Out Of The Blue/乃木坂46/Out of the blue.mp3','Last Love Song/GARNET CROW/lastlovesong.mp3','クリスタルゲージ/GARNET CROW/クリスタルゲージ.mp3','能動的３分間/東京事変/能動的三分間.mp3','タマシイレボリューション/Superfly/タマシイレボリューション.mp3','二人セゾン/欅坂46/二人セゾン.mp3','Miss Moonlight/黒夢/Miss MOONLIGHT.mp3','SURREAL/浜崎あゆみ/SURREAL.mp3','Last smile/LOVE PSYCHEDELICO/Last Smile.mp4','忘却の空/SADS/忘却の空.mp4','M/浜崎あゆみ/M.mp4','lost Angel/day after tomorrow/lost angel.mp3','futurity/day after tomorrow/futurity.mp3','SLOW LOVE/ICE/slow love.mp3','Love Makes Me Run/ICE/Love Makes Me Run.mp3','GET DOWN GET DOWN GET DOWN/ICE/GET DOWN.mp3','flo jack/m-flo/flo jack.mp4','Springtime kiss/COSA NOSTRA/Springtime Kiss.mp3','Jolie/COSA NOSTRA/JOLIE.mp3','come again/m-flo/come again.mp4','YAY/moumoon/YAY.mp3','柊/Do As Infinity/Hiiragi.mp3','蛍火/RYTHEM/Hotarubi.mp3','Colourful/NIKIIE/Colourful.mp3','BAD COMUNICATION/B\'z/BAD COMMUNICATION.mp3','My faith/day after tomorrow/My faith.mp3','カナリア/NIKIIE/カナリア.mp3','Living For Tomorrow/COSA NOSTRA/Living For Tomorrow.mp3','Share Your Love/COSA NOSTRA/Share Your Love.mp3','DAYS/FLOW/DAYS.mp4','キライでも好き アイシテル/BRIGHT/キライでも好き アイシテル.mp3'];
// 配列の長さ
const num = array1.length;
// 乱数の定義
let secret_number = 0;
// 配列2の定義
let array2 = array1[secret_number].split('/');
// 曲名の定義
let play_title = array2[0];
// ミュージシャンの定義
let musician = array2[1];
// 音楽ファイルの変数定義
let file = array2[2];
const stop = document.getElementById('stop');
const play = document.getElementById('play');
const first = document.getElementById('first');
const all_stop = document.getElementById('all_stop');
const select = document.getElementById('select');
const display_title = document.getElementById('display_title');
const display_musician = document.getElementById('display_musician');
const up = document.getElementById('up');
const down = document.getElementById('down');
const mute = document.getElementById('mute');
const s_mute = document.getElementById('s_mute');
music.src = `./sound/${file}`; //音声ファイル指定
music.volume = 0.4; //音量の初期値(50%)
// 再生
function music_play() {
music.play();
display_title.textContent = `曲名:${play_title}`;
display_musician.textContent = `歌手名:${musician}`;
stop.disabled = false;
play.disabled = true;
first.disabled = false;
all_stop.disabled = false;
select.disabled = true;
colorB();
}
// 一時停止
function music_stop() {
music.pause();
stop.disabled = true;
play.disabled = false;
first.disabled = false;
all_stop.disabled = false;
select.disabled = false;
colorA();
}
// 最初へ戻る
function first_time() {
music.currentTime = 0;
stop.disabled = true;
play.disabled = false;
first.disabled = true;
all_stop.disabled = true;
select.disabled = true;
colorB();
}
//停止
function all_stop2() {
music.pause();
music.currentTime = 0;
stop.disabled = true;
play.disabled = false;
first.disabled = true;
all_stop.disabled = true;
select.disabled = false;
$('#display_title').text('曲のタイトル');
$('#display_musician').text('歌手名');
colorB();
}
// 選曲
function select_tune(){
all_stop2();
secret_number = Math.floor(Math.random() * num);
array2 = array1[secret_number].split('/');
play_title = array2[0];
musician = array2[1];
file = array2[2];
//音声ファイル指定
music.src = `./sound/${file}`;
stop.disabled = true;
play.disabled = false;
first.disabled = true;
all_stop.disabled = true;
select.disabled = false;
colorB();
}
function colorA(){
$('#display_title').css('color','#000');
$('#display_title').css('background-color','#FF0');
$('#display_musician').css('color','#0F0');
$('#display_musician').css('background-color','#00F');
}
function colorB(){
$('#display_title').css('color','#075500');
$('#display_title').css('background-color','#E0A0FF');
$('#display_musician').css('color','#4759F0');
$('#display_musician').css('background-color','#E0A0FF');
}
function music_up() { //音量アップ
music.volume = music.volume + 0.1; //音量の値を0.1(10%)ずつアップ
}
function music_down() { //音量ダウン
music.volume = music.volume - 0.1; //音量の値を0.1(10%)ずつダウン
}
function mute1() { //消音
music.muted = true;
mute.disabled = true;
s_mute.disabled = false;
}
function mute2() { //消音解除
music.muted = false;
mute.disabled = false;
s_mute.disabled = true;
}
function loop_true() { //ループ再生ON
music.loop = true;
}
function loop_false(){ //ループ再生OFF
music.loop = false;
}
function ended(){ //再生終了しているか
if(music.ended){
alert("再生終了しています");
}else{
alert("再生前、もしくは再生中です");
}
}
stop.disabled = true;
play.disabled = true;
first.disabled = true;
all_stop.disabled = true;
select.disabled = false;
s_mute.disabled = true;
// 一時停止ボタンをクリックしたときに発生するイベントリスナー
stop.addEventListener('click',music_stop);
// 再生ボタンをクリックしたときに発生するイベントリスナー
play.addEventListener('click',music_play);
// 最初に戻るボタンをクリックした時に発生するイベントリスナー
first.addEventListener('click',first_time);
// 停止ボタンをクリックしたときに発生するイベントリスナー
all_stop.addEventListener('click',all_stop2);
// 選曲ボタンをクリックした時に発生するイベントリスナー
select.addEventListener('click',select_tune);
// 音量UPボタンをクリックした時に発生するイベントリスナー
up.addEventListener('click',music_up);
// 音量downボタンをクリックした時に発生するイベントリスナー
down.addEventListener('click',music_down);
// ミュートボタンをクリックした時に発生するイベントリスナー
mute.addEventListener('click',mute1);
// ミュート解除ボタンをクリックした時に発生するイベントリスナー
s_mute.addEventListener('click',mute2);
</script>
</body>
</html>
今回Audioオブジェクトを作って簡単に作りました。