【リハビリJS学習】瞑想アプリを作る②

JS学習のため、瞑想アプリ作成をする第二回。

↓前回はこちら
https://qiita.com/sakuc47/items/252a7d21bf658fcc61ee

---

8. <svg class="moving-outline"〜> </svg> の下に時間表示を追加する

<h3 class="time-display">0:00</h3>

9. <div class="sound-picker">にボタンをマークアップする

雨とビーチの音・画像を選択できるようなボタン。
追加するボタンにはdataプロパティ　data-soundsとdata-videoを追加する。

<div class="sound-picker">
    <button data-sound="./sounds/rain.mp3" data-video="./video/rain.mp4">
      <img src="./svg/rain.svg" alt="rain">
    </button>
    <button data-sound="./sounds/beach.mp3" data-video="./video/beach.mp4">
      <img src="./svg/beach.svg" alt="beach">
    </button>
</div>

データ属性
jsではデータ属性にアクセスして、属性を取得したり書き換えたりできる。
CSSでも利用できる。

10. バックグラウンドで再生するデフォルトのビデオを追加する

<div class="app">直下にコンテナを追加

<div class="vid-container">
    <video Loop>
        <source src="./video/rain.mp4" type="video/mp4">
    </video>
</div>

• ムービーをループ再生したければ<video Loop>とする

現在の表示↓

11. CSSを調整する

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.app {
  height: 100vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.time-select,
.sound-picker,
.player-container {
  height: 80%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.player-container {
  position: relative;
  svg {
    position: absolute;
    height: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; // SVGが邪魔して再生ボタンを押せないため
  }
}

.time-display {
  position: absolute;
  bottom: 10%;
  color: #fff;
  font-size: 50px;
}

video {
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  z-index: -1;
}

現在の表示↓

今回はここまで！
（なかなかjsまでたどりつかない）