Bloggerデザイン : パステル・マテリアル・ミュージックプレーヤー

1. デザインのタイプ

【パステル・マテリアル・ミュージックプレーヤー】
丸みを帯びたカードデザインと、温かみのあるパステルグラデーションを基調とした、モダンで親しみやすいオーディオプレーヤー。シンプルながらも、マテリアルアイコンを使用した直感的な操作性と、必要な機能がコンパクトにまとまった洗練されたインターフェースを提供します。

ゲームサミット

matsusan

remove add

repeat favorite volume_up

0:0 0:0 play_arrow

2. デザインの特徴

• ソフト・マテリアルUI
  柔らかなパステルグラデーションと、丸みを帯びたカードデザインが特徴的な、視覚的に心地よいレイアウト。
• ポップアップ・ボリュームコントロール
  音量ボタンをクリックすると操作バーが出現する、スペース効率に優れたスマートな設計。
• リアルタイム・シーク同期
  再生位置をシークバーと連動させ、ドラッグ操作による直感的な楽曲スキップが可能。

3. 紹介コード

HTML・CSS JavaScript

<div class="music-player-wrapper">
  <div class="player">
    <div class="cover">
      <img src="画像URL" alt="Cover Image">
    </div>
    <div class="info">
      <div class="title">曲名</div>
      <div class="singer">歌手名</div>
    </div>
    <div class="volume-box">
      <span class="volume-down" id="vol-down"><i class="material-icons">remove</i></span>
      <input type="range" class="volume-range" step="1" value="80" min="0" max="100" id="vol-range">
      <span class="volume-up" id="vol-up"><i class="material-icons">add</i></span>
    </div>
    <div class="btn-box">
      <i class="material-icons repeat" id="btn-repeat">repeat</i>
      <i class="material-icons favorite active" id="btn-fav">favorite</i>
      <i class="material-icons volume" id="btn-vol">volume_up</i>
    </div>
    <div class="music-box">
      <input type="range" step="1" class="seekbar" value="0" min="0" max="100" id="seekbar">
      <audio class="music-element" id="music-el">
        <source src="音楽ファイルURL">
      </audio>
      <span class="current-time">0:0</span>
      <span class="duration">0:0</span>
      <span class="play-toggle" id="btn-play">
        <i class="material-icons">play_arrow</i>
      </span>
    </div>
  </div>
</div>

<style>
.music-player-wrapper {
  position: relative;
  width: 100%;
  height: 600px;
  background-color: #f5e0e5;
  background-image: linear-gradient(45deg, #ff9b9c 0%, #ffd4a7 100%);
  font-family: "Roboto", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

.player {
  position: relative;
  width: 330px;
  height: 530px;
  border-radius: 15px;
  background-color: #fff6e7;
  box-shadow: 0 15px 20px 0 #c58371;
}

.player input[type="range"] {
  -webkit-appearance: none !important;
  background: #f2eae4;
  height: 5px;
  outline: none;
  cursor: pointer;
  overflow: hidden;
  border-radius: 5px;
}

.player input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  background: #ff3677;
  height: 5px;
  width: 5px;
  border-radius: 50%;
  box-shadow: -100vw 0 0 100vw #f7d9b9;
}

.player .cover {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 50px;
  transform: translateX(-50%);
  box-shadow: 0 5px 20px 0 #d56c006d;
}

.player .cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player .info {
  position: absolute;
  left: 50%;
  top: 240px;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
}

.player .info .title {
  font-size: 20px;
  font-weight: 700;
  color: #444;
}

.player .info .singer {
  font-size: 12px;
  color: #72646f;
}

.player .btn-box {
  position: absolute;
  top: 330px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.player .btn-box i {
  font-size: 24px;
  color: #72646f;
  margin: 0 25px;
  cursor: pointer;
  transition: 0.3s;
}

.player .btn-box i.active {
  color: #ff3677;
}

.player .volume-box {
  display: none;
  position: absolute;
  left: 50%;
  top: 295px;
  transform: translateX(-50%);
  z-index: 10;
  white-space: nowrap;
}

.player .volume-box.active {
  display: flex;
  align-items: center;
}

.player .volume-range {
  width: 120px !important;
  margin: 0 10px !important;
}

.player .music-box {
  position: absolute;
  left: 50%;
  top: 385px;
  transform: translateX(-50%);
  width: 230px;
}

.player .music-box .seekbar {
  width: 100% !important;
}

.player .music-box .current-time,
.player .music-box .duration {
  position: absolute;
  top: 15px;
  font-size: 12px;
  color: #72646f;
}

.player .music-box .current-time { left: 0; }
.player .music-box .duration { right: 0; }

.player .play-toggle {
  position: absolute;
  left: 50%;
  top: 55px;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff6e7;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.player .play-toggle i {
  font-size: 36px;
  color: #72646f;
}
</style>
  

<script>
// <![CDATA[
document.addEventListener('DOMContentLoaded', function() {
    const music = document.getElementById('music-el');
    const playBtn = document.getElementById('btn-play');
    const seekbar = document.getElementById('seekbar');
    const currentTimeText = document.querySelector('.current-time');
    const durationText = document.querySelector('.duration');
    const volRange = document.getElementById('vol-range');

    // 再生・停止
    playBtn.addEventListener('click', function() {
        if (music.paused) {
            music.play();
            playBtn.innerHTML = '<i class="material-icons">pause</i>';
        } else {
            music.pause();
            playBtn.innerHTML = '<i class="material-icons">play_arrow</i>';
        }
    });

    music.onloadeddata = function() {
        seekbar.max = music.duration;
        let ds = parseInt(music.duration % 60);
        let dm = parseInt((music.duration / 60) % 60);
        durationText.innerHTML = dm + ':' + (ds < 10 ? '0' + ds : ds);
    };

    music.ontimeupdate = function() {
        seekbar.value = music.currentTime;
        let cs = parseInt(music.currentTime % 60);
        let cm = parseInt((music.currentTime / 60) % 60);
        currentTimeText.innerHTML = cm + ':' + (cs < 10 ? '0' + cs : cs);
    };

    seekbar.addEventListener('input', function() {
        music.currentTime = seekbar.value;
    });

    // お気に入り
    document.getElementById('btn-fav').addEventListener('click', function() {
        this.classList.toggle('active');
    });

    // リピート
    document.getElementById('btn-repeat').addEventListener('click', function() {
        music.loop = !music.loop;
        this.classList.toggle('active');
    });

    // ボリューム
    const volBox = document.querySelector('.volume-box');
    document.getElementById('btn-vol').addEventListener('click', function() {
        volBox.classList.toggle('active');
        this.classList.toggle('active');
    });

    volRange.addEventListener('input', function() {
        music.volume = this.value / 100;
    });

    document.getElementById('vol-down').addEventListener('click', () => {
        volRange.value = Math.max(0, parseInt(volRange.value) - 20);
        music.volume = volRange.value / 100;
    });

    document.getElementById('vol-up').addEventListener('click', () => {
        volRange.value = Math.min(100, parseInt(volRange.value) + 20);
        music.volume = volRange.value / 100;
    });
});
// ]]>
</script>