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

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

사운드, 주요 감각 중 하나이며, 일상 생활의 주요 부분이며 아직 크게 웹상에서 무시됩니다. 웹 개발자가 HTML로 오면, 오디오로 웹 사이트에 추가할 있어야하는데 쉽지 않을 것을 알아요. 왜 그런가요? 다음은 삽입 소리와 함께 역사적인 문제, 몇 가지 아이디어와 삽입 그리고 유이로 자바 스크립트에서 사운드를 제어하는​​ 몇 가지 데모를 몇 가지 생각을하고 있습니다.

데모

내 경우에는 같은거야, 당신은 지루한 것은 작품과 독서가 작품 전면을 볼 수 있기 때문에 아마도 싶었던 몇 가지 재미있는 물건 - 업! ;) 및 데모 먼저 재생 다음 내용을 읽어 주시기 바랍니다.

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

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

웹 아주 시각적인 표현에 좋습니다. 그것은, 설계 및 포함 이미지, 텍스트 및 링크가 HTML 문서를 작성 쉽습니다. 또는 오히려, <audio> 및 <video> - - 기본적으로 HTML을 4, 오디오 및 비디오 오늘날 지원되는 미디어 포맷 뚜렷하게 누락되었습니다.

HTML은 5 오디오 및 비디오 그리 먼 미래에 />을 <img의 단순 가까이 퍼가기으로 데려 와야한다. 그 동안, 우리는 오늘날의 일반적인 HTML을 지원하는 4 브라우저의 범위에 걸쳐 HTML을 - 5와 같은 오디오 / 비디오 기능을 얻으려면 창의적인 작업 어떤일 의지해야합니다.

오디오 퍼가기과 (HTML을 4) 문제

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

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

뿐만 아니라있는 "벌거벗은"MP3를 링크가 추가 작업 및 사용자에 대한 혼란, 그들을 취급 브라우저의 방법은 산만하고 사이트의 경험에서 그들을 멀리 걸립니다.

를 사용하여 <object>이 / <embed>하지만, 직접 삽입 MP3 또는 기타 콘텐츠를 다른 일반적인 방법입니다 다시 불일치의 문제에 시달리고, 개발자가 수있는 사용자가 주어진, 웹 페이지의 영역에서 나타날 수 있습니다는지 알 수 없습니다 페이지에서 적절한로 표시됩니다이 경우에는, 가능성 직접 다운로드를 처리하는 것과 같은 QuickTime을 또는 Windows Media Player - 지금 주문 해당 파일 형식을 처리하기 위해 응용 프로그램을 로드할 수의 배열되어 있습니다. 또, 안 좋은 솔루션입니다.

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

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

MP3를 링크 만들기 "일만": 유이 + SoundManager 2

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

다시 2002 년의 DHTML 게임 크로스 브라우저 오디오 컨트롤을 얻을 수있는 탐구에, 나는 API는 SoundManager라고 불리는 JS + 플래시 오디오를 개발하였습니다. 비디오를 포함하도록 진화 이후 데, SoundManager 2 구현 및 API를 확장하여 플래시의 기본 소리와 자바 스크립트로 제공합니다. 결과가 광범위하게 지원하는 HTML 5의 때까지 JS 구동 사운드에 대한 격차를 해소하는 데 도움이 오디오 기능을 연출 cross-browser/platform입니다.

의 유이 2 SoundManager을 결합함으로써 DOM을 하고 이벤트 유틸리티, 당신은 플레이어를 다운로드하거나 임베디드 브라우저가 저하될 수있는 효과적인 솔루션을 정상적으로하실 수 삽입 및 제어 오디오를.

실용 예 : 재생 가능한 MP3를 링크

다음과 같은 데모는 유이와 SoundManager 2 그들 플레이 인라인 만들기, MP3를 링크를 향상시키기 위해 사용합니다. 유이의 이벤트 유틸리티 링크가 MP3 파일을 가리키고 다음로드하고 "false"를 반환하기 전에 해당 URL을 재생 SoundManager API를 사용하고 링크를로드 브라우저를 방해에 대한 클릭을 요격. 후속 클릭 재생 / 일시 정지 상태를 전환합니다.

이벤트 자바 스크립트 / 플래시거나 다른 잘못되면 브라우저는 단순히 통해 가을하고 평소처럼 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에! | reddit!