JavaScript에서 버튼 클릭 시 사운드를 재생하는 방법

javascript를 사용하여 onclick play audio button을 생성하려는 경우 이 튜토리얼이 적합합니다. 여기에 버튼을 만들었습니다. 해당 버튼을 클릭하면 소리가 재생됩니다.

이 유형의 클릭 시 재생 사운드는 웹 페이지 또는 특정 요소의 모든 곳에서 사용할 수 있습니다. 대부분의 경우 버튼에서 신호음이 들립니다. 그래서 여기에서도 Beep Sound가 사용되었습니다. 그러나 원하는 경우 다른 소리를 사용할 수 있습니다. Watch its live demo 작동 방식을 알아보십시오.

이 재생 사운드 버튼을 만드는 데 JavaScript가 거의 사용되지 않았습니다. 약간의 JavaScript를 알고 있다면 쉽게 만들 수 있습니다.

HTML 코드:
버튼은 다음 html 코드로 생성되었습니다. 여기서는 html의 버튼 기능을 사용합니다.

<button>Click me!</button>

CSS 코드:
버튼은 간단한 CSS로 디자인되었습니다. 먼저 일부 코드로 웹 페이지를 디자인했습니다. 그런 다음 버튼을 디자인하고 호버 효과를 추가했습니다.

* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}

html,
body {
height: 100%;
}

body {
display: flex;
align-items: center;
justify-content: center;
background: #dff0f6;
}

button {
font-family: 'Open Sans', sans-serif;
font-size: 1.5rem;
color: #fff;
background: #034d85;
padding: 1.1rem 3.4rem;
border-radius: .2rem;
transition: opacity .2s;
}

button:hover {
cursor: pointer;
background: #053056;
}

자바스크립트 코드:
이제 클릭 html에서 소리 재생이 JavaScript에 의해 활성화되었습니다.

첫 번째 줄 JavaScript를 사용하여 오디오를 추가했습니다. 여기서는 경고음을 사용했습니다. 모든 오디오를 사용할 수 있습니다.

그러면 단추의 전역 상수가 설정됩니다.

그러면 'audio'의 사운드가 onclick 이벤트에 의해 버튼에 연결됩니다. 그런 다음 여기에서 play() 메서드를 사용하여 오디오를 재생했습니다. play () 메서드는 현재 오디오 재생을 시작합니다.

const audio = new Audio("https://www.fesliyanstudios.com/play-mp3/387");
const buttons = document.querySelectorAll("button");

buttons.forEach(button => {
  button.addEventListener("click", () => {
    audio.play();
  });
});

위의 튜토리얼을 사용하여 Play Sound on Button Click 을(를) 만드는 방법을 알 수 있기를 바랍니다.

나는 이전에 초보자를 위한 많은 JavaScript 웹 요소를 만들었습니다. 이 onclick 오디오 재생 버튼이 마음에 드는지 댓글을 달아주세요.