야후! 사용자 인터페이스 블로그 (YUIBlog)

기반의 응용 프로그램으로 오디오 YUI 강화

소리는 하나의 주요 감각과 일상 생활의 주요 부분이며, 아직은 주로 웹상에서 무시됩니다. 웹 개발자가 HTML로 올 때 그것은되어야대로, 오디오로 쉽게 웹 사이트에 추가할 수 없습니다 알아요. 이유가 무엇입니까? 다음은 내장과 사운드를 제어하는 자바 스크립트 YUI으로부터의 내장 사운드, 몇 가지 아이디어와 몇 가지 데모와 역사 문제에 대한 몇 가지 생각이 있습니다.

데모

나 같은 경우는 걸지고 싶다는 욕구로보고 작품 읽기 때문에 선행을 몇 가지 재미있는 것들을 아마, 그렇지이고 지루한 작업입니다! ;) 기분이 데모 먼저 놀이 무료로 다음의 세부 사항에 대해 읽어보십시오.

• 데모 1 (실제) : 재생 MP3를 링크 인라인
• 데모 2 (재미) : 시끄러운는 DOM

HTML과 "멀티미디어"의 연혁

웹 아주 비주얼 프리젠 테이션에 좋다. 그것은, 설계 및 포함 이미지, 텍스트를 쉽게 만들 수이며, HTML 문서에 링크되어 있습니다. 미디어 형식 HTML을 기본적으로 오늘 4, 오디오 및 비디오 - 또는 오히려, <audio> 및 <video> - 뚜렷하게 실종 지원.

HTML 5는 오디오 및 비디오 가까이 그리 먼 장래에 />을 <img의 단순에 내장으로 데려 와야한다. 그 동안, 우리는 창의적인 업무 회피 오늘의 HTML 공통 4 지원하는 브라우저의 범위에 걸쳐 HTML을 - 5 - 같은 오디오 / 비디오 기능을 들먹일 필요.

(HTML을 4) Embedding으로 문제 오디오

웹 사이트에 오디오 오늘, 개발자들은 HTML의 목록을 표시 직접 MP3 파일에 대한 링크. 이 방법은 간단하고 보편 - 이해하고 검색 엔진에 의해 색인 생성 가능한 것이지만, 혼란과 일관성이 기본적으로 브라우징 경험을합니다.

사용자는 일반적으로 마우스 오른쪽 단추로 것인지 물으면, "로"와 저장 마침내 자신의 바탕 화면이나 링크를 클릭하십시오에서 파일을 열고 자신의 브라우저를 다운로드하고 MP3 파일을 엽니다. 일반적인 "클릭"일반적으로 삽입하는 플레이어와 함께 새 페이지에서 열립니다 또는 QuickTime 또는 Windows Media Player와 같은 외부 응용 프로그램을 시작합니다.

뿐만 아니라있다 "벌거벗은"MP3를 링크 추가 작업 및 사용자에 대한 혼란 그들을 처리 브라우저의 방법은 산만하고 떨어져 사이트의 경험에서 그들을지지 않습니다.

<개체가 / <embed> 직접 삽입 MP3 또는 기타 콘텐츠 다른 일반적인 방법이지만, 사용하는 또 불일치의 문제를 앓고 있는데, 개발자가 어떤 웹 페이지의 해당 영역에 표시될 수 있습니다 모를거야, 사용자가 주어진 수 순서대로 해당 파일 형식을 처리하는 응용 프로그램을 읽어 들일 수의 배열을 가지고 -이 경우에는, 가능성이 동일한 퀵타임 또는 Windows Media Player에서 직접 다운로드를 처리하는 것이 귀하의 페이지에서 위치에서 표시됩니다. 또, 안 좋은 솔루션입니다.

플래시 위젯은 때로는 MP3를 내용을 포함을위한 솔루션으로 사용되는 UI와 스킨은 100 % 플래시 오히려 HTML과 CSS 기반의보다 기반으로하는 경향이 있으며, 따라서 더 많은 대부분의 웹 개발자를위한 사용자 정의 어렵습니다. HTML 5는 표준 기반의 CSS를 - skinnable 및 스크립트 오디오 / 비디오 요소로 이것을 변경해야합니다.

그 동안 몇 가지 창의적인 솔루션은 오디오에 대한 더 "웹 개발자 접근할 수있는"위젯을 사용할 수 있습니다.

MP3를 링크 만들기 "일만": YUI +의 SoundManager 2

에서 현재 위치를 클릭 재생됩니다 MP3 파일해야 "점차적으로 향상된"링크가, 뭔가하고 브라우저의 정상적인 다운로드 작업을 차단해야합니다 이후에 요청을 처리할 수 있으며,로드를 처리할 수와 MP3 컨텐츠의 재생 자바 스크립트와 Flash를 결합하여,이 수 매우 효과적으로 할 수 있습니다.

개인적인 탐구에서 2002 년 DHTML을 다시 게임을위한 크로스 브라우저 음성 제어를 위해, 나는 JS + 플래시 오디오 API를 호출 SoundManager을 개발했습니다. 동영상을 갖는 포함하도록 진화 이후 SoundManager 2 구현과 사운드를 확장하여 플래시의 기본과 자바 스크립트 API는 그것을 제공합니다. 그 결과는 광범위하게 지원됩니다 JS 기반의 HTML을 소리까지 5 격차를 해소하는 데 도움이 오디오 기능을 연출 cross-browser/platform입니다.

YUI의 2 SoundManager을 결합함으로써 는 DOM 과 이벤트 유틸리티, 당신은 플레이어 다운로드 또는 내장된 브라우저가에 효과적인 솔루션을 오디오를 제어하기위한 내장하고 정상적으로 저하될 수 있습니다.

실용 예 : MP3를 재생할 링크

다음은 데모는 MP3 링크를 향상시키기 위해, 그들을 재생할 인라인 만들기 YUI과 SoundManager 2를 사용합니다. 유이네 행사 유틸리티 링크가 MP3 파일을 가리 키에 대한 클릭을 요격 후로드하고 돌아가기 전에 해당 URL을 재생할 SoundManager API를 사용하여 "false"를, 그리고 링크를로드 브라우저를 방지. 후속 클릭 / 일시 정지 상태로 플레이를 보여줄 것입니다.

이벤트에서는 자바 스크립트 / 플래시 존재하거나 한거 잘못되지 않습니다, 브라우저를 통해 간단하게 무너집니다 그리고 평소처럼 MP3를 링크를로드합니다.

• 데모 1 (실제) : 재생 MP3를 링크 인라인

오디오 귀하의 UI에 추가

자바 스크립트 기반의 애니메이션, 전환 및 모션 효과와 유동성을 웹 인터페이스 디자인을 추가할 더 평범 해지고 있습니다. 약게 적용된 오디오 및 보완 추가로 UI를 향상 경험이 더 의미있는 만들고있어.

UI의 피드백의 형태로 특정 응용 프로그램에서 소리 적절한 사용자 경험에 도움이 될 수 있습니다. 음향 효과는 플래시 기반의 사이트와 웹 기반 게임을위한 공통이며, 바탕 화면에 게임 오디오에서 일반적으로 이야기를 이야기의 핵심 부분입니다.

.. 하지만 이상은 - 이건 마

것이 중요 멈출 때를 아는 것은 중요한 일이다. 애니메이션 "공사"아래 리콜. GIF를? 어때 깜박 태그? 움직이는 텍스트 텍스트? 몇 가지 일들은 최고의 혼자 남아 있습니다. 아니 모든 HTML 페이지가, 깜박 필요로 이동, 슬라이드를 플래시 및 시끄러운있을 시간에 같은;도 "즐거움"입니다 검토에 적용된 최고. 자동 재생 음악이나 노이즈가있는 사용자를 귀찮았어 신속하게 귀하의 사이트의 포기로 이어질 수 있습니다.

아마도 좋은 이유는 폼 컨트롤과 같은 같은 표준 HTML 요소는 음향 효과 또는 알림을 그들과 관련된 필요도 없어요. 아마도 "침묵은 금입니다"그것은 그 최고의 웹 기본적으로 조용한 곳이에요, 성가신 및 혼란 수 있도록 없습니다.

"조용히 웹에 하나 주목할만한 예외로서"테마는 Internet Explorer를 일반적으로 "클릭"소리 페이지를 탐색, 아마도 사용자가 그 작업이 시작되었음을 알려 발생합니다. 이것은 음소거 최근 시대에,이되었다하지만 여전히 존재하고 여전히이 오늘날까지 일부 사용자를 귀찮게하는 것 같다.

"오락"예제 : DOM을 시끄러운

마치 그들이 사용되는대로 "시끄러운"폼 요소, 버튼 및 음성 피드백을 제공하기는 DOM 요소를 가질 수있다 할지도 침묵에 대한 논쟁에도 불구하고, 다음의 예입니다. 참신함이 사라지고 확실히 빨리 깨어나기이지만, 그것은 UI를 위해 유치 재미 요소를 추가할 수 없습니다.

• 데모 2 (재미) : 시끄러운는 DOM

기대 : HTML을 5

원주민 <audio>과 <video> 지원이 훨씬 쉽게 삽입 및 제어보다 미디어 포맷은 브라우저 내에서 타사 플러그인에 의존하지 않고 것입 의미합니다. 또한, 광범위한 자바 스크립트 API는 개발자들이 점점 - 혁신적인 경험을 만들 것을 권장한다.

대화 찾기 : 하십시요 Bloglines | 테크노

공유 및 연장 : 북마크와 del.icio.us | Digg Digg에 그것을! | 레딧!