HTML에 오디오 트랙을 삽입하는 방법. 우리는 인터넷의 오디오를 파일에 저장합니다. HTML에서 배경음악을 설정하는 방법

안녕하세요 여러분. 안드레이입니다.

이번편에서는 연결하는 방법을 배워보겠습니다. 사운드를 HTML로페이지, 즉 귀하의 웹사이트에 대한 오디오 파일.

3가지 삽입 방법이 있습니다 사운드 파일.

이 링크를 클릭하면 지정된 형식의 파일을 재생하기 위한 표준 프로그램이 자동으로 시작됩니다. 일반적으로 다음과 같습니다. 윈도우 미디어(AIFF, AU, MIDI, WAV 및 MP3 파일 재생). 이 옵션은 익숙하므로 계속 진행하겠습니다.

두번째방법은 용기를 사용하는 것입니다 .

이 컨테이너를 사용하면 웹 페이지에 직접 표시된 재생 도구를 사용하여 들을 수 있습니다. 그러나 재생 제어판은 웹 페이지에서 다르게 보일 수 있습니다. 다른 브라우저.

이 컨테이너를 표시하려면 브라우저에 특수 플러그인을 설치해야 합니다. 안에 인터넷 익스플로러이것이 기본값이지만 다른 브라우저의 경우 모든 사람이 이를 갖고 있는 것은 아닙니다. 그런 다음 설치해야합니다.

XHTML

src 매개변수는 필수이며 재생 중인 파일의 이름을 지정합니다. 다른 매개변수는 지정할 수 없습니다. 그 목록은 아래에 나와 있습니다.

너비=n— 콘솔의 너비를 픽셀 단위로 정의합니다.

높이=m— 콘솔의 높이를 픽셀 단위로 정의합니다.

자동 시작=참|거짓— TRUE이면 재생이 자동으로 시작됩니다.

자동 로드=TRUE|FALSE- 만약 있다면 값이 거짓, 파일이 자동으로 다운로드되지 않습니다.

STARTTIME="mm:ss"— 파일 시작 부분부터 분, 초 단위로 지정된 순간부터 재생이 시작됩니다.

반복= 참 / 거짓— 오디오/비디오 클립 반복을 허용하거나 금지합니다.

재생 루프=Z— REPEAT-TRUE를 지정한 경우 여기에서 Z 대신 반복 횟수를 지정합니다.

볼륨=백분율— 재생 볼륨은 최대 비율로 표시됩니다.

정렬="값"— 페이지 텍스트를 기준으로 제어 콘솔을 정렬합니다. CENTER, BASELINE TOP LEFT, RIGHT 값을 가질 수 있습니다.

컨트롤="값"— 콘솔 컨트롤 세트를 지정합니다. CONSOLE, SMALLCONSOLE, PLAYBUTTON PAUSEBUTTON, STOPBUTTON 및 VOLUMELEVER 값을 가질 수 있습니다(아래 설명).

콘솔— 전체 컨트롤 세트.

소형콘솔— 콘솔의 간결한 표현. 일시 정지 버튼을 제외한 모든 컨트롤 세트.

플레이버튼- 재생 버튼만 해당됩니다.

일시중지 버튼- 일시 정지 버튼만 있습니다.

정지버튼- 정지 버튼만 있습니다. 그러면 파일이 다운로드됩니다.

볼륨조절- 볼륨 조절만 가능합니다.

우리는 매개변수를 알아냈습니다.

다양한 매개변수를 직접 적용해 보고 작동 방식을 확인하는 것이 좋습니다(여기에는 복잡한 것이 없습니다).

제삼방법은 사운드 파일을 페이지의 배경 사운드로 지정하는 것입니다.

여기서 구문은 간단합니다.

src=파일 이름- 사운드 파일

루프=n- 반복 횟수(무한 - 연속)

용량- 볼륨(10000~0.0 - 기본값)

균형- 왼쪽과 오른쪽 스피커 사이의 밸런스, 값은 -10000(왼쪽 채널의 최대값)에서 10000(오른쪽 채널의 최대값)까지 다양합니다.

우리는 이미 HTML5의 사용과 그것이 오늘날 왜 관련이 있는지에 대해 이야기했습니다. 이제 "HTML5를 사용하여 웹사이트에 오디오를 삽입하는 방법"이라는 질문을 자세히 살펴보겠습니다.

태그를 사용하여 사이트에 음악을 추가할 수 있습니다. 오디오. 이 태그의 가장 간단한 구현 예는 다음과 같습니다.

하지만 다시 말하지만, 비디오와 마찬가지로 그렇게 간단하지 않습니다. 모든 브라우저가 필수 오디오 코덱을 지원하는 것은 아닙니다. 테이블을 살펴 보겠습니다.

브라우저구글 크롬모질라 파이어 폭스원정 여행오페라인터넷 익스플로러
mp3 먹다 아니요 먹다 아니요 먹다
웨이브 먹다 먹다 먹다 먹다 아니요
A.A.C. 먹다 아니요 먹다 아니요 먹다
오그/보비스 먹다 먹다 아니요 먹다 아니요

표에서 볼 수 있듯이 가장 "보편적인" 형식은 .wav입니다. 그러나 Internet Explorer에서는 이를 지원하지 않습니다. 따라서 오디오 파일을 여러 형식으로 변환하고 여러 오디오 코덱을 사용하는 것이 좋습니다. 다음 예에서는 웹 페이지에 HTML 오디오를 추가하는 한 가지 방법을 보여줍니다.

오디오 플레이어의 모양은 브라우저에 따라 다릅니다. 예를 들어 Firefox 브라우저의 오디오 플레이어 모양은 다음과 같습니다.

AUDIO 태그 속성

기본 태그 속성으로 오디오말하다:

  • 소스- 오디오 파일 경로(내장된 태그를 사용하여 별도로 지정할 수 있음) 원천);
  • 통제 수단- 오디오 제어판이 표시됩니다(재생, 일시 정지, 볼륨 등).
  • 자동 재생- 웹페이지 로딩 후 즉시 오디오 파일을 재생합니다.
  • 고리- 순환 재생;

중첩 태그 원천다음과 같은 속성을 가질 수 있습니다:

  • 소스- 오디오 파일의 경로;
  • 유형- 오디오 소스 유형
  • 미디어- 오디오 파일이 재생될 장치 유형(모두 - 모든 장치, TV - 텔레비전 등)

사이트에 음악이 필요한 이유는 무엇입니까?

매우 흥미로운 질문입니다. 사이트에서 음악이나 음성 파일을 재생하거나 내장 플레이어를 사용하면 사이트 방문자의 긴장을 풀고 긍정적인 감정을 불러일으키며 올바른 분위기를 조성하여 사이트와 더 쉽게 상호 작용할 수 있습니다. 그러나 이러한 효과는 사이트의 음악이 올바르게 선택되고 사운드 볼륨이 허용 가능한 한도를 초과하지 않는 경우에만 작동합니다. 그렇지 않으면 모든 노력이 헛되고 사이트 방문자에게 부정적인 감정을 유발할 것입니다.

HTML로 웹사이트에 오디오(음악)를 삽입하는 방법은 무엇입니까?

우리는 종종 이런 질문을 받습니다. 웹사이트의 음악은 관련성이 높고 창의적인 요소이며 이를 재생하는 방법은 다양하며 구현하기가 그리 어렵지 않습니다. 글로벌 네트워크의 모든 사용자는 일종의 브라우저를 사용하여 인터넷에 액세스하고 사운드 및 음악 파일을 재생하는 데 일반적이고 보편적인 기술이 없으며 각 브라우저는 자체 알고리즘에 따라 작동하며 다소 다릅니다. 때문에 음악을 재생할 때 페이지의 HTML 코드에 삽입하면 문제가 발생할 수 있습니다. 하지만 아시다시피 모든 문제는 해결될 수 있습니다!

웹사이트 HTML, JavaScript, jQuery, AJAX 방식으로 음악을 삽입하세요.

1 방향.

웹사이트나 플레이어에서 오디오 음악 플레이어 만들기

기술은 간단하며 사이트나 서버를 로드하지 않도록 플레이어 파일이 생성되며 사용할 기술을 선택합니다. 자바스크립트, jQuery, AJAX. 선택된 기술을 바탕으로 우리 사이트에 대한 스크립트를 개발하여 사이트에 삽입합니다. 사이트의 배경 음악 자동 재생 또는 방문자가 제어하는 ​​플레이어 등 필요한 사항에 따라 스크립트가 생성됩니다. 다음으로 사이트 루트에 음악용 폴더를 만들고 여기에 오디오 파일을 업로드합니다.

또는 대체 방법으로 Flash 기술을 사용하여 플레이어를 만들 수 있으며 이러한 플레이어는 더욱 인상적으로 보입니다. 진실은 사이트에 더 많은 비용이 들고 더 어려울 것입니다(사이트 페이지의 로딩 시간이 늘어납니다).

방법 2.

HTML을 사용하여 웹사이트에 음악 설치하기

HTML과 브라우저의 기능을 사용하면 플레이어나 배경 음악을 사이트에 삽입할 수 있습니다. 기술은 마찬가지로 간단합니다. "오디오" 태그를 사용하여 HTML5 코드가 생성되고 이 코드가 사이트에 기록되며, 사용자가 사이트를 방문하면 최소화된 플레이어가 표시되고 방문자는 자동으로 재생 버튼이나 배경 음악을 누르게 됩니다. 재생을 시작합니다. 플레이어의 모양은 방문자가 방문한 브라우저에 따라 다르지만 재생, 중지, 다음, 이전, 볼륨 버튼과 같은 기능은 표준으로 유지됩니다. HTML 코드가 포함된 플레이어는 다음과 같습니다.

Embed 코드 자체는 다음과 같습니다.

이미 알고 계시겠지만 "controls autoplay" 명령은 방문자가 사이트에 들어오자마자 음악 자동 재생을 활성화합니다.

HTML 코드의 대체 버전은 "bgsound" 태그로, 이는 시각적 플레이어를 전혀 사용하지 않습니다. 사이트를 방문하면 사이트의 음악이 재생되기 시작하지만 볼륨, 일시 중지 등을 조정할 수 있습니다. 사용자는 할 수 없습니다. 오디오 파일 재생 볼륨 설정은 코드 자체에서 구성됩니다.

사이트에서 음악을 재생하기 위한 사운드 파일 형식은 WAV, AU, MIDI, MP3, OGG(확장자)일 수 있습니다. 음악 파일이 사이트에 업로드되거나 사운드 파일이 있는 사이트에 대한 링크가 사용되며, 가장 중요한 것은 해당 파일이 공개 도메인에 있다는 것입니다.

그러나 인터넷 콘텐츠는 음악뿐만 아니라 연주자의 코멘트, 인터뷰, 창작에 관한 온갖 이야기 등을 포함하는 등 독특한 경우가 많습니다.

인터넷에서 스트리밍 콘텐츠를 다운로드하기 위해 엄청나게 많은 유틸리티가 만들어졌습니다. 그 중 일부는 보편적이고 다른 일부는 특정 서비스에 "맞춤형"입니다. 일부 프로그램은 소스 오디오 및 비디오 파일에 액세스하여 인터넷에서 바이트별로 간단히 읽을 수 있는 반면, 일부 프로그램은 파일을 다운로드하고, 파일을 여러 스트림으로 로드하고, 파일 그룹으로 작업하는 등의 작업을 수행할 수 있습니다. 스트림 설명은 xml일 수 있습니다. ASX(Windows Media Player용) 형식의 파일 또는 RealAudio 형식(확장자 .ra 및 .rm - 오디오용, .rv - 비디오용) 등의 파일로 저장됩니다. 이러한 스트림은 표준 프로토콜 http를 통해서만 전달되는 것이 아니라 , udb / tcp뿐만 아니라 특수한 rtsp, mms, rtp 및 SopCast와 같은 인기 있는 인터넷 TV 서비스에 사용되는 P2P 기술을 통해서도 가능합니다. 당연히 이러한 형식을 재생하려면 Windows Media Player, VLC 미디어 플레이어 등과 같은 적절한 클라이언트가 필요합니다. 그런데 후자는 스트리밍 콘텐츠를 재생할 수 있을 뿐만 아니라 로컬 드라이브에 저장할 수도 있습니다. 대부분의 자원이 그에게 매우 힘들기 때문에 이것이 우리가 사용할 것입니다.

따라서 특히 온라인 라디오 프로그램이나 팟캐스트를 녹음하려면 먼저 스트리밍 콘텐츠에 대한 링크를 얻은 다음 이를 VLC 플레이어에 입력해야 합니다. 사이트에서 Windows Media Player를 사용하여 오디오를 재생하는 경우 링크에 쉽게 접근할 수 있습니다. 사이트 페이지에 내장된 플레이어를 마우스 오른쪽 버튼으로 클릭하고 "속성"을 선택해야 합니다. '위치' 필드에서 주소를 찾아 클립보드에 복사합니다. 사이트에서 Flash 플레이어나 HTML5 기반으로 개발된 플레이어를 사용하는 경우 페이지의 소스 코드를 뒤져보거나 특수 유틸리티를 사용하여 링크를 "제거"해야 할 가능성이 높습니다.

다음 단계는 스트리밍 오디오를 변환하는 것입니다. 아마도 VLC에서의 이 작업이 간단하고 명백하다고 말할 수는 없을 것입니다. 오히려 번거롭고 혼란스럽습니다. "미디어 열기 URL" 메뉴 명령을 사용하면 스트리밍 콘텐츠를 파일에 쓸 수 있습니다. 기본적으로 VLC는 링크를 재생하도록 구성되어 있으며 이를 파일에 저장하려면 열리는 대화 상자에서 모드를 "변환"으로 변경해야 합니다. 대화 상자가 변경됩니다. 대상 파일이 새 창에 표시되고 프로필이 선택됩니다(즉, 녹음이 저장될 형식). "시작" 버튼을 클릭하면 플레이어가 스트리밍 오디오를 파일로 복사하기 시작합니다. 그는 이 작업을 전혀 눈에 띄지 않게 수행하며 원칙적으로 원하는 만큼 오랫동안 글을 쓸 수 있습니다. 이 프로세스는 독립적으로 제어되어야 합니다. 변환 프로세스를 중지하고 계속하면 결과 파일이 0으로 재설정됩니다. 따라서 이전에 저장한 파일의 이름을 바꿔야 합니다.

매번 이러한 작업을 반복하는 것은 매우 번거로운 일임이 분명합니다. 특히 서로 다른 시간에 서로 다른 스레드를 작성해야 하는 경우에는 더욱 그렇습니다. VLC 플레이어는 VLC Configurator라는 간단한 예약 다운로드 도구를 제공합니다. 무엇을, 어디에 쓸지(이러한 매개변수는 위에서 설명한 것과 동일한 방식으로 구성됨), 기간을 나타냅니다. 예를 들어, 특정 인터넷 라디오 프로그램을 매일 녹음해야 하는 경우 대화 상자에서 "반복" 및 "반복 간격" 옵션을 설정해야 합니다. 이제 출시 후 프로그램은 스트리밍 콘텐츠를 독립적으로 변환합니다.

그건 그렇고, VLC는 ASF 파일과 같은 스트림을 포켓 플레이어가 더 친숙하고 이해할 수 있는 MP3로 변환할 때도 도움이 됩니다. 이 작업은 매번 로컬 파일을 변환하여 수동으로 수행하거나, 아시다시피 Windows 7에 포함되어 있고 이 운영 체제의 이전 버전에서 사용할 수 있는 간단한 Powershell 스크립트를 사용하여 자동으로 수행할 수 있습니다. 스크립트에는 파일 경로, 파일 마스크 및 선택적으로 파일이 저장되는 결과 폴더(지정되지 않은 경우 파일이 소스 디렉터리에 기록됨) 등 여러 매개 변수가 전달됩니다. 루프 내에서 VLC 프로그램이 호출되어 매개변수(인코딩할 항목, 작성할 위치, 실제 인코딩 매개변수)가 전송됩니다. 인코딩이 완료되면 VLC가 RAM에서 언로드됩니다. 프로세스가 메모리에서 언로드될 때까지 기다리는 마지막 구성을 통해 이를 확인할 수 있습니다. 메모장이나 특수 "시각적" 편집기인 Powershell ISE 등 모든 텍스트 편집기에 이러한 스크립트를 입력할 수 있습니다. 이를 파일(예: Convert.ps1)에 저장하면 다음과 같은 구성으로 시작됩니다.

. Convert.ps1 c:  파일  음악 *.asf.

결론적으로 스크립트의 몇 가지 기능을 더 주목할 가치가 있습니다. Windows 운영 체제는 프로그램 경로를 자동으로 지정하지 않으므로 스크립트는 vlc.exe 경로도 지정해야 합니다. 64비트 버전의 경우 - C: 'Program Files (x86)'  VideoLAN  VLC (공백이 있는 줄은 따옴표로 묶음) 및 32비트 - C:  'Program Files'  VideoLAN  VLC  . 또한 스크립트를 실행하기 전에 VLC 프로그램을 종료해야 합니다. 그렇지 않으면 waitforexit() 메서드가 무기한 실행됩니다(스크립트에서 호출된 프로그램은 종료되지만 그 복사본은 남아 있기 때문입니다). 물론 스크립트에서 프로세스 식별자를 처리하는 것도 가능하지만 이러한 가능성은 프로세스를 복잡하게 만들 뿐입니다. 이 문제를 해결하려면 실행 중인 모든 VLC의 강제 종료를 스크립트 시작 부분에 추가하면 됩니다. ps vlc* | %($_.kill()). 또 다른 기능은 모든 스크립트에 서명이 필요한 Windows 7 보안 시스템과 관련되어 있습니다. Set-ExecutionPolicy RemoteSigned 명령을 사용하면 이 제한을 우회할 수 있으므로 Powershell에서 관리자로 실행해야 합니다.

스트리밍 콘텐츠를 MP3로 변환하기 위해 Powershell의 Convert.ps1 스크립트

param($inputpath, $wildcard, $outputpath = $inputpath)

ls -path $inputpath  $wildcard | % (

쓰기 호스트 $outputfile

vlc -i dummy $_.fullname ¨:sout=#transcode (acodec=mp3,ab=128,channels=2):standard (access=file,mux=asf,dst=$outputfile)¨ vlc://quit

FLV 비디오에서 오디오 추출

VLC와 Powershell을 함께 사용하는 또 다른 예는 FLV 형식의 Flash 비디오에서 오디오를 추출하는 것입니다. 이러한 비디오 클립은 잘 알려진 YouTube와 같은 전문 포털에 저장됩니다. 물론 Google 및 기타 비디오 호스팅 소유자는 콘텐츠 다운로드를 방지하기 위해 최선을 다하지만 보호를 우회하여 원하는 비디오를 얻을 수 있는 방법은 항상 존재합니다...

그러나 여기서 논의되는 작업은 예를 들어 포켓 플레이어에서 듣기 위해 알려진 방법으로 다운로드한 FLV 파일에서 오디오를 추출하는 방법입니다. 이러한 작업은 GUI와 명령줄 모두에서 VLC의 기능 내에 있습니다. 그런데 첫 번째 경우에는 이전과 거의 동일한 작업 세트를 수행해야 합니다. 메뉴에서 "미디어 - 변환/저장" 명령을 선택하고 소스 및 결과 파일과 변환 매개변수(예: 해당 코덱.

Powershell을 사용하여 수동 변환을 수행하려면 이전과 마찬가지로 소스 및 대상 폴더의 이름이 전송되는(기본적으로 소스와 동일) 작은 스크립트(flv2mp.ps1이라고 함)를 구성해야 합니다. 전체 트릭은 전달된 매개변수에 있습니다. 비디오가 필요하지 않기 때문에 더미 매개변수를 사용하고 표준 블록에서 파일 매개변수를 정의해야 하며 스크립트가 팝업 창으로 방해하지 않도록 간단히 차단해야 합니다. –dummy-quiet –sout 옵션을 사용합니다.

param($inputpath, $outputpath = $inputpath)

ls -경로 $inputpath  *.flv | % (

$outputfile = 조인 경로 $outputpath($_.name.replace($_.extension, '.mp3'))

쓰기 호스트 $outputfile

vlc $filename -I dummy --dummy-quiet --sout ¨#transcode (acodec=mp3,vcodec=dummy):standard (access=file,mux=raw,dst='$outputfile')¨ vlc://quit

PS VLC | %($_.waitforexit())

사이트의 음악은 일반적인 것보다 더 드뭅니다. 웹사이트에 음악을 삽입할 때 일부 사용자는 음악으로 인해 완전히 흥미를 잃을 수 있다는 점을 이해해야 합니다. 이 기사에서는 웹사이트에 음악을 삽입하는 몇 가지 옵션을 살펴보고 배경 음악을 만드는 방법도 살펴보겠습니다.

웹사이트에 배경음악을 삽입하는 방법

웹사이트에 배경음악을 삽입하는 것은 방문자를 잃는다는 점에서 가장 위험한 선택입니다. 배경 음악은 끌 수 없을 뿐만 아니라 볼륨도 어떤 방식으로든 조절할 수 없기 때문입니다(모두 컴퓨터의 현재 볼륨에 따라 다름). 그래서 배경음악을 삽입하기 전에 백 번 생각해야 합니다.

HTML에 음악을 삽입하는 방법에는 두 가지가 있습니다.

옵션 1. html 태그를 통해

배경음악 삽입 구문

태그에서 몇 가지 속성이 있습니다:

  • loop="value" - 음악의 반복 횟수(-1인 경우 무한 반복)
  • Balance="value" - 스테레오 밸런스(-10000에서 10000까지)
  • Volume="value" - 볼륨(최대 0, 최소 -10000)

페이지가 로드되면 음악이 자동으로 재생됩니다.

예를 들어

옵션 2. 태그를 통해

음악과 함께 개체를 삽입하는 구문

태그에서 다음 속성을 사용할 수 있습니다.

  • width="value" - 너비(픽셀 또는 백분율)
  • height="value" - 높이(픽셀 또는 백분율)
  • align="value" - 정렬(왼쪽 - 왼쪽, 오른쪽 - 오른쪽, 가운데 - 가운데)
  • Hidden="value" - 패널 가시성(true - 숨기기, false - 표시), 기본적으로 패널이 표시됩니다.
  • autostart="value" - 로딩 시 음악 재생(true - 예, false - 아니요)
  • loop="value" - 값 true - 원형으로 재생, false - 한 번

예를 들어

표준 플레이어는 브라우저마다 다르게 표시되므로 각각을 별도로 고려하지 않습니다.

html5에서는 태그를 사용할 수 있습니다

태그 사용의 의미

태그 구문

다음 속성을 사용할 수 있습니다.

  • autoplay="value" - 페이지가 로드되면 즉시 음악을 켭니다.
  • controls="value" - 브라우저에 플레이어 제어판을 표시합니다.
  • loop="value" - 순환을 담당합니다.
  • preload="value" - 페이지가 로드될 때 즉시 음악을 로드합니다.

내 생각에 고려된 옵션은 모두 표준 플레이어를 기반으로 하기 때문에 이상적인 솔루션이 아닙니다. 각 브라우저에는 자체 기본 플레이어가 있으며 일부에서는 전혀 작동하지 않을 수 있습니다. 따라서 웹사이트에 플레이어를 다운로드하고 여기에서 음악을 다운로드하는 것이 가장 좋습니다. 이러한 플레이어에는 중지, 볼륨 조정 등의 기능이 있습니다. - 모두 필요한 세트일반 사용자용.