概要

HTML/CSSでラジカセを描画し、ボタンを押すと実際に音楽が流れる挙動をJavaSriptにて実装しました。

JSの記述については下記に記載するYouTubeにて学びほぼ写経したものですが、曲名表示が窓から飛び出す際に横にスライド移動する挙動は自分で考えて実装しました（JSで条件分岐のうえ、CSSアニメーションでスライド）。

2021/8/31追記：
連続再生（次へボタンを押さなくても、次の曲を自動で再生）に対応しました。

苦労したこと・大変だったこと

大変だったのはCSSのレスポンシブと、JSの曲名スライドの挙動実装です。

CSS

描画系のため主にpxで数値を固定して制作しましたが、表示幅を縮めたときにpadding等の兼ね合いで崩れが大きくなったり、下のスピーカーが縦に伸びてしまったりして、その修正に時間がかかってしまいました。

JavaScript

上記の通り再生・曲送りの挙動に関しては写経となってしまいましたが、以下の点について理解をしながらの作業に努めました。

• どの記述がどの挙動を生み出すために必要なのか
• どういった仕組みで動いているのか

曲名のスライドの挙動については、当初はCSSを使わずJSのみでアニメーションを実装しようとしていましたが難しく、CSSアニメーションを作成しJSにてクラスを付け外す方向に転換しました。
こういった点についてはさらにスムーズに実装ができるよう、学習していけたらと思います。

作成時間

約8.5時間

学習に使用させていただいた動画

Simple Music Player using CSS & Vanilla Javascript | Mini Project (Online Tutorial) ：https://youtu.be/W5ApFv6z_ts