ref btns

src/app.js

@@ -1,11 +1,14 @@
 import { API } from "./api.js";
+import { initPlayBtn } from "./modules/update-cassette-btns.js";
 import { updateContent } from "./modules/update-audio-dom.js";
 import {
    addHandlerClickPlayBtn,
    removeHandlerClickPlayBtn,
 } from "./modules/update-dom.js";
 
 export const appCreate = () => {
+   initPlayBtn();
+
    const btnPlay = document.querySelector(".cassette__button-play");
    let audio = null;
    const updateAudioData = (audioData) => {

src/css/main.css

@@ -9,6 +9,11 @@
    position: relative;
 }
 
+.cassette__disc {
+   position: absolute;
+   top: 71px;
+}
+
 @keyframes discRotate {
    to {
       transform: rotate(1turn);
@@ -19,11 +24,6 @@
    animation: 6s infinite linear discRotate;
 }
 
-.cassette__disc {
-   position: absolute;
-   top: 71px;
-}
-
 .cassette__disc--left {
    left: 113px;
 }
@@ -58,16 +58,32 @@
    width: 72px;
    height: 56px;
    display: block;
+   position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #334155;
    border-radius: 4px;
 }
 
+.cassette__button-play-inner::before {
+   content: "";
+   position: absolute;
+   width: 72px;
+   height: 56px;
+   top: 0;
+   left: 0;
+   background-image: url(../assets/images/btn-play-bg.png);
+}
+
 .cassette__button-play-icon {
    display: block;
    margin-left: 1px;
+   z-index: 1;
+}
+
+.cassette__button-pause-icon {
+   z-index: 1;
 }
 
 /* content */

src/index.html

@@ -35,20 +35,7 @@
                   />
 
                   <button class="cassette__button-play">
-                     <span class="cassette__button-play-inner">
-                        <svg
-                           class="cassette__button-play-icon"
-                           xmlns="http://www.w3.org/2000/svg"
-                           width="30"
-                           height="30"
-                           fill="none"
-                        >
-                           <path
-                              fill="#E2E8F0"
-                              d="M9.125 6.25v17.5L22.875 15 9.125 6.25Z"
-                           />
-                        </svg>
-                     </span>
+                     <span class="cassette__button-play-inner"></span>
                   </button>
                </div>
             </div>

src/modules/update-cassette-btns.js

@@ -0,0 +1,41 @@
+const btnPlayIcon = `
+	<svg
+		class="cassette__button-play-icon"
+		xmlns="http://www.w3.org/2000/svg"
+		width="30"
+		height="30"
+		fill="none"
+	>
+		<path fill="#E2E8F0" d="M8 6h3v18H8zm11 0h3v18h-3z" />
+	</svg>
+`;
+
+const btnPauseIcon = `
+	<svg
+		class="cassette__button-pause-icon"
+		xmlns="http://www.w3.org/2000/svg"
+		width="30"
+		height="30"
+		fill="none"
+	>
+		<path fill="#E2E8F0" d="M9.125 6.25v17.5L22.875 15 9.125 6.25Z" />
+	</svg>
+`;
+
+const btnPlayInner = document.querySelector(".cassette__button-play-inner");
+
+export const initPlayBtn = () => {
+   btnPlayInner.insertAdjacentHTML("beforeend", btnPauseIcon);
+};
+
+export const changeOnPlayBtn = () => {
+   const existIcon = document.querySelector(".cassette__button-pause-icon");
+   btnPlayInner.removeChild(existIcon);
+   btnPlayInner.insertAdjacentHTML("beforeend", btnPlayIcon);
+};
+
+export const changeOnPauseBtn = () => {
+   const existIcon = document.querySelector(".cassette__button-play-icon");
+   btnPlayInner.removeChild(existIcon);
+   btnPlayInner.insertAdjacentHTML("beforeend", btnPauseIcon);
+};

src/modules/update-dom.js

@@ -1,8 +1,9 @@
+import { API } from "../api.js";
+import { changeOnPlayBtn, changeOnPauseBtn } from "./update-cassette-btns.js";
 import {
    addCassetteAnimation,
    removeCassetteAnimation,
 } from "./animate-cassette.js";
-import { API } from "../api.js";
 
 const btnPlay = document.querySelector(".cassette__button-play");
 
@@ -12,8 +13,9 @@ const createOnClickPlayBtn = (audio) => {
          btnPlay.classList.remove("active");
          if (!audio.paused) {
             audio.pause();
+            changeOnPauseBtn();
+            removeCassetteAnimation();
          }
-         removeCassetteAnimation();
       } else {
          btnPlay.classList.add("active");
          if (audio.paused) {
@@ -23,8 +25,9 @@ const createOnClickPlayBtn = (audio) => {
             };
             API.requestCurrentTime(getCurrentTime);
             audio.play();
+            changeOnPlayBtn();
+            addCassetteAnimation();
          }
-         addCassetteAnimation();
       }
    };
 };