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

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

↓前回はこちら

記載してなかったのですが、参考にしているYoutube動画は外国語なので、字幕を見つつChatGPTで解説を読みながら制作しています！
YouTubeの翻訳はけっこうゆるいのでわかりにくい部分は多々あったのですが、
日本語の動画を見る時よりも

• 自分で調べる意欲がわく（調べないと何もわからない😺）
• 英単語を調べるとjsのプロパティの意味もわかるようになる

と、学びになる面が多いように感じました。

15.jsを書いていく

動画から読み取れたこと、調べたことはコメントアウトに記載しています。

// 
const app = () => {
  const song = document.querySelector('.song');
  const play = document.querySelector('.play');

  // 再生ボタンのアウトラインをアニメーション化
  const outline = document.querySelector('.moving-outline circle');
  const video = document.querySelector('.vid-container video');
  // サウンドを選択 全てのボタンを取得したいのでquerySelectorAll
  const sounds = document.querySelectorAll('.sound-picker button');
  // 時間表示
  const timeDisplay =document.querySelector('.time-display');
  // 再生ボタンの輪郭の長さを取得
  const outlineLength = outline.getTotalLength();
  // 継続時間（実際には曲全体の長さを取得するのではないので fake とする
  let fakeDuration = 600;

  /* アニメーション化 */
  // stroke-dasharrayとstroke-dashoffsetを取得し、
  // それらのプロパティをアニメーション化してゼロから開始しているように見せる

  outline.style.strokeDasharray = outlineLength;
  outline.style.strokeDashoffset = outlineLength;

  // 音楽を再生
  play.addEventListener('click', () => {
    // song.play();
    checkPlaying(song);
  });

  // 音楽の再生＆停止を切り替えるボタン
  // 曲が再生されているか停止されているかを判別して、
  const checkPlaying = song => {
    // もし曲が停止されている場合は曲・ビデオを再生して
    if (song.paused) {
      song.play();
      video.play();
      play.src = './svg/pause.svg';
    } else {
      song.pause();
      video.pause();
      play.src = './svg/play.svg';
    }
  }

  /* サークルをアニメーション化して時間がわかるようにする */
  // 曲の現在の時間を取得できる
  song.ontimeupdate = () => {
    // 再生ボタンを押すと、曲が続くかぎり更新され続ける
    // 曲が停止すると止まる
    // ゼロからはじまる
    let currentTime = song.currentTime;
    // 曲の経過時間を取得する（残りの再生時間）
    let elapsed = fakeDuration - currentTime;
    // %:左辺を右辺で割った余りを計算する演算子
    // 現在の再生位置から次の60秒までの残り時間（秒単位）
    // Math.floor：小数点以下を切り捨て
    let seconds = Math.floor(elapsed % 60);
    // 現在の再生位置から次に60秒までの残り時間（分単位）
    let minutes = Math.floor(elapsed / 60);

    // プログレスバーをアニメーション化する
    let progress = outlineLength - (currentTime / fakeDuration) * outlineLength;
    outline.style.strokeDashoffset = progress;
  }
};

  //
app();

再生ボタンを押すとムービーとサウンドが流れ、枠線のアニメーションが動くようになりました👏

もう少し続きます！