Music Website 클론코딩

Music Website 클론코딩

---

✍️ 상세기능

Click here to Listen 옆에 있는 재생 버튼을 누르면 노래가 재생됩니다! 그리고 재생 버튼이 일시 정지 버튼으로 바뀝니다 ㅎㅎ 일시 정지 버튼을 다시 누르면 노래가 멈춥니다 :)

---

✍️ 주요 코드

<div class="content">
            <div class="left-col">
                <h1>THE<br>REAL<br>SOUND</h1>
            </div>
            <div class="right-col">
                <p>Click here to Listen</p>
                <img src="media/play.png" id="icon">
            </div>
        </div>
    </div>

    <audio id="mySong">
        <source src="media/Love.mp3" type="audio/mp3">
    </audio>




    <script>
    var mySong = document.getElementById("mySong")
    var icon = document.getElementById("icon")

    icon.onclick = function(){
        if(mySong.paused){
            mySong.play();
            icon.src= "media/pause.png";
        }else{
            mySong.pause();
            icon.src= "media/play.png";}
    }
    </script>

• 자바스크립트에서 버튼 클릭 시에 노래 재생하는 코드는 아주 간단합니다! play 함수를 이용하여 노래 재생을 할 수 있습니다 🤭

<script>
var audio = new Audio("audio_file.mp3");

document.onclick = function() {
  audio.play();
}
</script>

---

Retrospect 🧐

클로코딩으로 웹사이트 제작 처음 해봤는데...
역시 기능 구현하니까 아주 재밌돠,,ㅠㅠ
노래 재생 기능 처음 알았는디....정말 너무너무 ..신기햇다..
이렇게 간단한 명령어로 음악이 재생된다곡..?
너무....너무.....신기.....했다.....

BAD 😥

버튼 클릭 시 노래 나오게 코드 다 짰는데.....노래가 안 나오는 거다 ㅠㅠ 이거 때문에 시간 엄청 잡아먹었는데...알고 보니 html에서

<source src="media/Love.mp3" type="audio/mp3">

이 부분 audio를 audia로 오타 냈던 거였다...! 넘나 허망했당 ㅠ 항상..작동 안 되면..오타부터 확인하자 🥺