Web音楽プレイヤーアプリ

HTML/CSS、JavaScript、jQueryで自作のWeb音楽プレイヤーアプリを開発しました

```html
<!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オブジェクトを作って簡単に作りました。