07_Effect

최애 스타일 완성

🍀다음은 MP3 파일을 자동 재생하는 기본적인 HTML 코드 예시

구글 드라이브에서 MP3 파일을 공유하고 공유 링크를 가져옵니다.
공유 링크를 변환하여 직접 다운로드 링크로 만들어야 합니다. 일반적으로 구글 드라이브의 공유 링크는 다음과 같은 형태입니다: https://drive.google.com/file/d/FILE_ID/view?usp=sharing. 이 URL에서 FILE_ID 부분을 복사해야 합니다.
다음과 같이 HTML <audio> 태그에 사용할 수 있는 링크로 변환합니다: https://drive.google.com/uc?export=download&id=FILE_ID

🍀소스코드

<!DOCTYPE html>

<html>

<head>

<title>MP3 Player with Centered Controls</title>

<style>

.audio-controls {

text-align: center; /* 버튼과 볼륨 조절을 중앙에 배치 */

margin-top: 20px;

}

</style>

</head>

<body>

Your browser does not support the audio element.

</audio>

<button onclick="pauseAudio()">Pause</button>

<br>

</div>

var audioPlayer = document.getElementById("audioPlayer");

function playAudio() {

audioPlayer.play();

}

function pauseAudio() {

audioPlayer.pause();

}

function setVolume(value) {

audioPlayer.volume = value;

}

</script>

</body>

</html>

##소스코드

<!DOCTYPE html>

<html>

<head>

<title>Custom Audio Player</title>

<style>

/* 오디오 플레이어 스타일 */

#audioPlayer {

text-align: center;

padding: 20px;

max-width: 600px;

margin: auto;

}

/* 플레이 버튼 스타일 */

#playButton {

background-color: #a9a9a9; /* 팬톤칼러 핑크 */

border: none;

padding: 10px 22px;

color: white;

border-radius: 1px;

margin-bottom: 20px;

font-family: Arial, sans-serif;

}

/* 볼륨 컨트롤 스타일 */

#volumeControl {

-webkit-appearance: none;

width: 100%;

height: 4px;

border-radius: 5px;

background: #ddd;

outline: none;

opacity: 0.7;

-webkit-transition: .2s;

transition: opacity .2s;

}

/* 볼륨 컨트롤 슬라이더 핸들 스타일 */

#volumeControl::-webkit-slider-thumb {

-webkit-appearance: none;

appearance: none;

width: 15px;

height: 15px;

border-radius: 50%;

background: #a9a9a9; /* 슬라이더 핸들 색상 */

cursor: pointer;

}

#volumeControl::-moz-range-thumb {

width: 15px;

height: 15px;

border-radius: 50%;

background: #ffffff;

cursor: pointer;

}

</style>

</head>

<body>

</div>

const audio = document.getElementById('myAudio');

const playButton = document.getElementById('playButton');

const volumeControl = document.getElementById('volumeControl');

playButton.addEventListener('click', function() {

if (audio.paused) {

audio.play();

playButton.textContent = 'Pause';

} else {

audio.pause();

playButton.textContent = 'Play';

}

});

volumeControl.addEventListener('input', function() {

audio.volume = this.value;

});

</script>

</body>

</html>