JavaScript의 간단한 오디오 플레이어-JS 튜토리얼-php.cn

JavaScript의 간단한 오디오 플레이어

Susan Sarandon

풀어 주다： 2024-10-23 06:23:01

원래의

505명이 탐색했습니다.

Simple Audio Player in JavaScript

JavaScript는 평가가 좋지 않지만 장점도 있습니다. 아마도 그 중 가장 좋은 점은 웹 브라우저에서 작동한다는 것입니다. Rust 또는 Julia로 프로그램을 만드는 경우 해당 프로그램 사용자는 자신의 PC에 해당 언어를 설치해야 합니다. Docker를 사용하여 해당 컨테이너에서 실행하는 데 필요한 모든 것을 포함하여 프로그램을 컨테이너화하더라도 사용자는 이를 실행하기 위해 Docker를 설치해야 합니다.

하지만 누구나 웹 브라우저를 가지고 있습니다. 그리고 JavaScript는 이 작은 오디오 플레이어와 같은 간단한 프로그램에서 놀라울 정도로 잘 작동할 수 있습니다. 40줄 미만의 코드와 HTML 파일 및 자바스크립트 파일만 사용하면 웹 브라우저에서 오디오를 재생하는 간단한 플레이어를 만들 수 있습니다. 기본적이지만 단순함 속에서 우아함을 느낄 수 있습니다. .mp3, .wav, .ogg 및 기타 몇 가지 형식을 재생합니다.

코드는 다음과 같습니다. 첫 번째 파일을 index.html로 저장하세요.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Audio Player</title>
    <style>
        body {
            background-color: #a3e4d7; /* Change HEX color */
        }
    </style>
</head>
<body>
    <h1>Simple Audio Player</h1>
    <input type="file" id="fileInput" accept="audio/*">
    <audio id="audioPlayer" controls>
        Your browser does not support the audio element.
    </audio>
    <button onclick="playAudio()">Play</button>
    <button onclick="pauseAudio()">Pause</button>
    <script src="script.js"></script>
</body>
</html>

로그인 후 복사

두 번째 파일을 script.js로 저장하세요. index.html 파일과 같은 폴더/디렉토리에 넣으세요

const audioPlayer = document.getElementById('audioPlayer');
const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', function() {
    const file = this.files[0];
    const url = URL.createObjectURL(file);
    audioPlayer.src = url;
});

function playAudio() {
    audioPlayer.play();
}

function pauseAudio() {
    audioPlayer.pause();
}

로그인 후 복사

두 파일이 있는 폴더로 이동하여 index.html 파일을 클릭하세요. 브라우저에서 플레이어가 열리고 파일을 선택하는 상자가 표시됩니다. PC에서 .wav 또는 .mp3를 선택하세요.

참고: index.html 코드에는 플레이어 창의 배경색을 변경하는 위치가 있습니다. 다양한 16진수 색상을 시험해 보세요.

벤 산토라 - 2024년 10월

위 내용은 JavaScript의 간단한 오디오 플레이어의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!