“ 음소거 ” 속성을 사용하면 개발자는 필요에 따라 오디오를 음소거하거나 음소거 해제할 수 있는 옵션을 제공하여 오디오 재생을 제어할 수 있습니다. 최종 사용자에게 오디오를 음소거하거나 음소거 해제할 수 있는 자유를 제공하면 탐색 경험이 향상됩니다. 또한 JavaScript를 사용하면 오디오 재생을 보다 효율적으로 제어할 수 있는 동적 제어가 가능합니다.
이 기사에서는 JavaScript를 사용하여 HTML DOM 오디오 음소거 속성의 사용법을 설명합니다.
JavaScript에서 HTML DOM 오디오 음소거 속성을 사용하는 방법은 무엇입니까?
“ 음소거 ” 속성은 웹페이지의 오디오를 음소거하거나 음소거 해제하는 데 자주 사용됩니다. '의 값이 오디오.음소거 ” 속성은 “으로 설정됩니다. 진실 ”, 오디오가 음소거되고 음소거를 해제하려면 “ 음소거 ” 속성은 “으로 설정되어야 합니다. 거짓 '. 또한 음소거 속성은 다른 미디어 컨트롤과 통합되어 브라우저 간 호환성을 허용합니다.
통사론
JavaScript의 HTML DOM 오디오 음소거 속성에 대한 구문은 다음과 같습니다.
selectedObj.muted = 진실 | 거짓
어디 ' 선택된 개체 ”는 오디오가 음소거될 오디오 파일입니다. 이 속성은 두 가지 값만 저장할 수 있습니다: “ 진실 ' 또는 ' 거짓 '. 이 속성이 true로 설정되면 오디오 파일이 음소거되고 그 반대의 경우도 마찬가지입니다.
이제 HTML DOM을 더 잘 이해하기 위해 몇 가지 예를 살펴보겠습니다. 음소거 ' 재산.
예 1: 오디오 파일 음소거
이 예에서는 '를 사용하여 선택한 파일을 음소거합니다. 음소거 ' 재산. 예를 들어 아래 코드 블록을 방문하십시오.
< 사업부 >< h2 스타일 = '색상: 바다녹색;' > DOM 오디오 음소거 속성 h2 >< br >
< 오디오 ID = '데모오디오' 통제 수단 >
< 원천 소스 = '오디오.mp3' 유형 = '오디오/mpeg' >
오디오 >
< br >
< 단추 클릭하면 = '음소거세터()' > 음소거로 설정 단추 >
사업부 >
< 스크립트 >
허락하다 c = document.getElementById ( '데모오디오' ) ;
기능 음소거 설정기 ( ) {
c.음소거됨 = 진실 ;
알리다 ( '성공적으로 음소거되었습니다!' )
}
스크립트 >
코드 설명:
-
- 먼저 부모' 사업부 ” 요소는 “를 포함하는 생성됩니다. <오디오> ” ID가 “인 태그 데모오디오 '. 이 요소에는 단일 ' 원천 ” 요소에는 선택한 오디오 파일의 주소와 해당 유형이 포함됩니다.
- 다음으로 '를 호출하는 버튼이 생성됩니다. 음소거세터() ” 기능을 사용하여 “ 클릭하면 ” 이벤트 리스너.
- 그런 다음 ' <스크립트> ' 태그를 지정하고 'audio' 요소의 참조를 '라는 변수에 저장합니다. 씨 '.
- 그 후, “ 음소거세터() ' 함수는 '에 대한 값을 설정하기 위해 생성됩니다. 음소거 ” 속성을 “로 진실 '. 이렇게 하면 오디오가 음소거로 설정되고 이에 따라 경고 상자에 메시지가 표시됩니다.
컴파일 후:
위의 gif는 muted 속성을 사용하여 오디오가 음소거되었음을 보여줍니다.
예: 음소거 속성을 사용하여 오디오 음소거 및 음소거 해제
이 예에서는 선택한 오디오 파일이 음소거, 음소거 해제될 예정이며 ''를 활용하여 현재 상태를 검색합니다. 음소거 ' 재산. 예를 들어 아래 코드를 방문하세요.
< 사업부 >< 오디오 ID = '데모오디오' 통제 수단 >
< 원천 소스 = '오디오.mp3' 유형 = '오디오/mpeg' >
오디오 >< br >
< 단추 클릭하면 = '무음()' > 오디오 음소거 단추 >
< 단추 클릭하면 = 'unMute()' > 오디오 음소거 해제 단추 >
< 단추 클릭하면 = '음소거상태()' > 음소거 상태 단추 >
사업부 >
< 스크립트 >
var z = document.getElementById ( '데모오디오' ) ;
기능 무음 ( ) {
z.음소거 = 진실 ;
}
기능 unMute ( ) {
z.음소거 = 거짓 ;
}
기능 음소거상태 ( ) {
알리다 ( z.음소거 ) ;
}
스크립트 >
위 코드에 대한 설명은 다음과 같습니다.
-
- 먼저 HTML을 활용하여 오디오 파일을 웹페이지에 삽입합니다. <오디오> ' 그리고 ' <출처> ” 태그.
- 그런 다음 '라는 기능을 호출하는 세 개의 버튼이 생성됩니다. 무음() ',' unMute() ', 그리고 ' 음소거상태() '. 이러한 기능은 사용자가 해당 버튼을 클릭할 때 호출됩니다.
- 다음으로 '에 대해 true 및 false 값을 설정하여 이러한 함수를 정의합니다. 무음() ' 그리고 ' unMute() ” 기능. “ 음소거상태() ” 기능을 사용하려면 “만 첨부하세요. 음소거 ” 속성을 오디오 참조와 함께 사용하여 음소거 속성의 현재 상태를 검색합니다.
컴파일 후 출력은 다음과 같습니다.
출력에는 오디오 파일이 음소거, 음소거 해제 중이며 상태도 '를 사용하여 확인되고 있음이 표시됩니다. 음소거 ' 재산.
결론
HTML DOM 오디오 음소거 속성은 먼저 HTML '을 사용하여 웹 페이지에 오디오 파일을 삽입하여 사용됩니다. 오디오 ' 그리고 ' 원천 ” 요소. 그 후, 이 오디오에 대한 참조는 JavaScript 코드 내부의 변수에 저장되고 ' 음소거 ” 재산이 붙어 있습니다. 오디오를 음소거하려면 이 속성을 ' 진실 ' 그리고 ' 거짓 ” 음소거 해제 시나리오의 경우. 이 블로그는 DOM 오디오 음소거 속성의 작업 프로세스를 시연했습니다.