웹사이트에 무료 MP3 플레이어를 삽입하는 방법: 3가지 방법

웹사이트에 무료 MP3 플레이어를 삽입하는 방법: 3가지 방법

웹사이트 방문자가 MP3 파일을 즐기도록 하려면 가장 쉬운 방법 중 하나는 페이지에 포함하는 것입니다. 내장형 MP3 플레이어를 사용하면 인라인으로 재생되기 때문에 방문자가 오디오를 직접 다운로드하거나 추가 소프트웨어를 사용할 필요가 없습니다.





HTML5 및 Google 드라이브 사용을 포함하여 웹사이트에 MP3를 삽입하는 데 사용할 수 있는 다양한 방법에 대해 자세히 설명합니다.





1. HTML5를 사용하여 웹사이트에 MP3 삽입

웹사이트의 코드를 편집하는 것이 편하다면 MP3 파일을 삽입하는 가장 쉬운 방법 중 하나는 HTML5를 사용하는 것입니다.





HTML5 태그는 첫눈에 기본적으로 보일 수 있지만 모든 주요 데스크톱 및 모바일 브라우저와 호환되므로 강력합니다.

HTML5가 포함된 MP3를 포함하려면 다음 코드를 사용하세요.



Your browser does not support the audio tag.

간단히 교체 MP3 URL 여기 업로드한 오디오 파일과 함께 이것은 컴퓨터에 저장된 파일일 수 없습니다. 온라인에서 사용할 수 있어야 합니다.

키보드에서 키를 비활성화하는 방법

이 코드는 사용자가 재생, 일시 중지, 스크러빙 및 볼륨을 조정할 수 있는 페이지에 작은 오디오 플레이어를 배치합니다. Firefox에서는 다음과 같이 보입니다.





이 코드에는 사용자의 브라우저가 플레이어를 지원하지 않는 드문 상황에서 미디어 플레이어 대신 표시되는 메시지도 포함되어 있습니다.

다음과 같은 속성을 적용할 수 있습니다. 자동 재생 그리고 고리 , 다음과 같이:





Your browser does not support the audio tag.

대부분의 브라우저는 자동 재생을 지원하지 않습니다. 사용자에게 오디오를 자동으로 강제 적용하는 것은 좋지 않은 관행으로 간주되기 때문입니다.

CSS를 통해 오디오 플레이어 블록에 기본 사용자 정의를 적용할 수 있습니다. 국경 그리고 . 그러나 플레이어 자체의 스타일을 적절하게 지정하여 브라우저 간에 일관성을 유지하려면 JavaScript를 사용해야 합니다.

HTML5 오디오 플레이어 속성 및 사용자 정의에 대한 자세한 내용은 다음에서 찾을 수 있습니다. MDN 웹 문서 .

내 핫메일 계정을 어떻게 삭제해

관련된: 누구나 웹사이트에 추가할 수 있는 멋진 HTML 효과

2. Google 드라이브를 사용하여 웹사이트에 MP3 삽입

구글 드라이브는 우수한 무료 클라우드 스토리지 제공업체 . MP3 파일을 업로드하고 오디오 플레이어를 만드는 데 사용할 수 있습니다.

MP3를 Google 드라이브에 업로드한 경우:

  1. 마우스 오른쪽 버튼으로 클릭 파일을 클릭하고 연결시키다 .
  2. 접근성 제한을 다음으로 변경 링크가 있는 모든 사용자 .
  3. 마지막으로 클릭 링크 복사 .

그러면 다음과 유사한 URL이 제공됩니다.

https://drive.google.com/file/d/123/view?usp=sharing

바꾸다 보기?usp=공유 ~와 함께 시사 , 다음과 같이:

https://drive.google.com/file/d/123/preview

그런 다음 사용

속성을 조정, 추가 또는 제거할 수 있습니다(예: 프레임 보더 그리고 너비 ) 필요에 따라.

이렇게 하면 Google 드라이브 플레이어를 사용하여 웹사이트에 MP3가 포함됩니다. 사용자는 HTML5 플레이어와 마찬가지로 재생, 스크러빙 및 볼륨을 조정할 수 있습니다. 다음과 같이 보입니다.

주요 차이점은 튀어나오다 단추. 그러면 사용자가 댓글을 추가하고 파일을 공유하는 등의 작업을 할 수 있는 Google 드라이브에서 MP3가 열립니다.

3. CMS를 사용하여 웹사이트에 MP3 삽입

웹사이트에 콘텐츠 관리 시스템(CMS)을 사용하는 경우 위의 방법을 계속 사용할 수 있습니다. 즉, HTML 코드를 편집하는 데 익숙하지 않을 수 있습니다.

pc에서 ps2 게임 할 수 있나요?

좋은 CMS를 사용하면 인터페이스를 통해 웹사이트에 오디오를 쉽게 추가할 수 있습니다. 예를 들어 WordPress에서는 다음을 수행하기만 하면 됩니다. 블록 추가 , 선택하다 오디오 , 다음 중 하나 업로드 MP3에서 선택하십시오. 미디어 라이브러리 , 또는 URL에서 삽입 .

Google Sites, ExpressionEngine 또는 Squarespace와 같은 서비스를 사용하는지 여부에 관계없이 오디오를 추가하는 프로세스가 약간 다를 수 있으므로 전체 지침은 회사의 도움말 문서를 참조하십시오.

방문자가 MP3를 쉽게 듣게 하십시오

위의 방법 중 하나를 사용하여 웹사이트 방문자는 이제 미디어 플레이어를 통해 MP3 파일을 쉽게 들을 수 있습니다.

즉, 항상 MP3 파일을 사용할 필요는 없습니다. 웹사이트에서 동일하게 인라인으로 재생할 수 있는 WAV 및 FLAC과 같은 다른 많은 일반적인 오디오 형식이 있습니다.

공유하다 공유하다 트위터 이메일 가장 일반적인 10가지 오디오 형식: 어떤 형식을 사용해야 합니까?

MP3에 대해 알고 있지만 AAC, FLAC, OGG 또는 WMA는 어떻습니까? 왜 그렇게 많은 오디오 파일 형식이 존재하며 최고의 오디오 형식이 있습니까?

다음 읽기
관련 항목
  • 인터넷
  • 웹 개발
  • 웹마스터 도구
  • HTML5
저자 소개 조 킬리(652건의 기사 게재)

Joe는 손에 키보드를 들고 태어나 즉시 기술에 대한 글을 쓰기 시작했습니다. 그는 비즈니스에서 학사(우등) 학위를 받았고 현재는 모두를 위해 기술을 간단하게 만드는 것을 즐기는 전업 프리랜서 작가입니다.

조 킬리가 참여한 작품 더보기

뉴스레터 구독

기술 팁, 리뷰, 무료 전자책 및 독점 거래에 대한 뉴스레터에 가입하십시오!

구독하려면 여기를 클릭하세요.