LoginSignup
2
2

More than 1 year has passed since last update.

@nogizakapython(坂道アイドル好きの ITエンジニア)

Web音楽プレイヤーアプリ

Last updated at Posted at 2022-11-20

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

2
2
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
2