CSS와 함께 소리를냅니다

CSS는 스타일링, 레이아웃 및 시각적 프레젠테이션에서 탁월하며 색상, 크기 및 애니메이션으로 가득합니다. 그러나 웹 페이지에서 오디오 재생을 미묘하게 제어 할 수 있다는 것을 알고 있습니까?

이 기사는 진정한 해킹보다 HTML과 CSS를 정확하게 적용하는 영리한 기술을 공개합니다. 그러나 제작 환경의 경우 오디오 제어를 위해 기본 오디오 요소 및/또는 JavaScript를 사용하는 것이 좋습니다.

기술

CSS 중심의 사운드 재생에는 몇 가지 방법이 존재하지만 핵심 원칙은 일관성이 있습니다. 오디오 파일을 페이지 내에 숨겨진 요소로 포함시키고 재생을 트리거하도록 공개합니다. 예는 다음과 같습니다.

<style>
  embed { display: none; }
  button:active   embed { display: block; }
</style>
<button>소리를 재생하십시오</button>
<embed src="path-to-audio-file.mp3"></embed>

이것은 그것을 사용합니다<embed></embed> 꼬리표. 그만큼<object></object> 태그는 유사한 기능을 제공합니다.

<object data="path-to-audio-file.mp3"></object>

중요한 고려 사항 :

이전 코데펜 피아노 프로젝트는이 기술의 효과를 보여주었습니다. 그러나 최근 브라우저 업데이트는 다음과 같습니다.

• 보안 제한 : 사용<embed></embed> 또는<object></object> 오디오 파일을 엄격한 보안 검사에 적용합니다. CORS 정책은 오디오 파일이 웹 페이지와 동일한 프로토콜 및 도메인에 상주해야합니다. Base64 인코딩은 이것을 우회하지 않습니다. 자동 재생은 브라우저 설정에서 명시 적으로 활성화되어야 할 수 있습니다.

• 단일 재생 : 이전 브라우저 동작과 달리 사운드는 일반적으로 한 번만 재생됩니다. 이것은 기술의 적용 가능성을 크게 제한합니다.

서버 측 제어는 CORS 문제를 완화 할 수 있지만 자동 재생 제한 사항은 사용자 의존적으로 남아 있으며 우리의 통제를 넘어서는 상태입니다.

이것이 작동하는 이유

기본 메커니즘은<embed></embed> 그리고<object></object> 태그 : 브라우저는 요소가 "잠재적으로 활성화"되거나 렌더 상태를 변경하면 내장 된 오디오를 처리하고 렌더링합니다. 기술적으로 해킹은 아니지만 브라우저 불일치가 존재합니다.

브라우저 호환성

크로스 브라우저 지원은 일치하지 않습니다.

• 오페라와 크롬 : 우수한 호환성.

• 크롬 기반 브라우저 : 지원은 다양합니다. MacOS의 Edge는 안정적으로 작동하지만 Brave에는 최신 버전이 필요할 수 있습니다.

• Safari, Internet Explorer, Edge (Windows) : 일반적으로 지원되지 않습니다.

• Firefox : 페이지로드에서 모든 사운드를 한 번에 재생 한 다음 사용자 상호 작용에 대한 보안 경고로 인해 후속 재생을 차단합니다.

이 CSS 트릭은 재미 있지만 "집에서 시도하지 마십시오"기술로 간주됩니다. 물론, 당신은 그 기발한 소프트웨어 개발자입니다.

위 내용은 CSS와 함께 소리를냅니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!