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

강화 유이 - 오디오와 응용 프로그램을 기반으로

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

데모

만약 당신이 나를 좋아한다면 당신은 아마 재미 물건보고 싶었 구요 ... 앞에 있기 때문에 읽기 작업이고, 지루한 작업입니다! ;) 데모 먼저 플레이를 누른 다음 세부 정보를 위해 무료 읽어주십시오.

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

HTML과 "멀티미디어"의 간략한 역사

웹 꽤 시각적 프레 젠 테이션을 잘합니다. 그것은, 설계 및 내장의 이미지, 텍스트 작성, 간단하고 HTML 문서에 링크되어있습니다. 미디어 형식은 기본적으로 HTML을 오늘 4, 오디오 및 비디오 지원 - 또는 오히려, <audio> 및 <video> - 위치 뚜렷하게 누락되었습니다.

HTML 5는 가까워 <img의 단순 오디오 및 비디오를 포함 데려 와야한다 />가 아니 그리 먼 미래에있다. 그러는 동안, 우리는 창조적인 작업의 휴양지로해야 - arounds HTML을 얻기 위해 오늘날의 일반적인 HTML을 4 영역 브라우저 지원에 걸쳐 5와 같은 오디오 / 비디오 기능.

(HTML을 4) 문제가 Embedding 오디오와 함께

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

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

뿐만 아니라 "벌거벗은 거냐"MP3 추가 작업 및 혼란스러운 사용자들을 처리의 브라우저의 방법에 대한 링크가 산만하고 귀하의 사이트의 경험에서 멀어지면 멀어 질수록.

<개체를 사용하여 / <embed> 직접 삽입 MP3 또는 기타 콘텐츠를 다른 일반적인 방법이지만, 다시 불일치의 문제로 고통 받고, 개발자는 어떤 웹 페이지의 해당 영역에 표시할 수있습니다, 사용자가 주어진 모를 수도 에 표시된 것이 애플 리케이션의 순서대로 파일 형식을 처리하는 데 로드할 수있습니다 -이 경우에는 직접 다운로드를 처리할 것이 어떤 배열 가능성이 동일한 QuickTime 또는 Windows Media Player가 필요 - 장소 귀하의 페이지에있습니다. 다시 말하지만, 안 좋은 솔루션입니다.

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

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

"MP3 링크"그냥 작품 만들기 : 유이 + SoundManager 2

"점차적으로 가지고하려면 그런 환경에서 MP3를 재생됩니다 향상"링크를 클릭하면 위, 뭔가해야 요격 브라우저의 정상적인 다운로드 작업을하고 이후 요청을 처리; 로딩을 처리하려면 MP3의 재생 콘텐츠의 자바 스크립트 및 플래시를 결합하여,이 수 매우 효과적으로 할 수.

개인적인 모험에서 크로스를 브라우저 오디오 컨트롤 2002 년 DHTML을 게임을 다시 시작, 나는 JS + 플래시 오디오 API를 SoundManager 전화를 개발했다. 이후 비디오, SoundManager 2를 포함하도록 진화를 가졌 구현 및 Flash의 기본 사운드 API를 확장하고 자바 스크립트로 제공합니다. 이 JS에 대한 격차 사운드까지 HTML 5의 중심 다리를 도울 수있는 결과 cross-browser/platform 스크립트 오디오 기능을 광범위하게 지원됩니다.

유이의는 DOM과 이벤트 유틸리티와 SoundManager 2 결합함으로써, 당신은 내장과 브라우저에서 정상적으로 다운로드하거나 삽입하는 플레이어를 떨어뜨릴 수있는 오디오를 제어하기위한 효과적인 해결책을 가지고있습니다.

실용 예 : 재생할 MP3 링크

다음 데모 MP3 링크를 향상시키고, 그들이 낮으면 인라인을 선택 YUI 및 SoundManager 2를 사용합니다. 링크가 MP3 파일을 가리키고에 유이의 이벤트를 클릭하고 유틸리티를 가로채 다음을로드하고 해당 URL을 재생할 ""false를 반환하기 전에 SoundManager API를 사용하여 링크를로드 브라우저를 방지. 클릭 후속 플레이 토글됩니다 / 일시 정지 상태.

이벤트에서는 자바 스크립트 / 플래시 또는 존재하지 않습니다 무슨 일 생기면 잘못되면, 브라우저를 통해 간단하게 평소처럼 MP3 플레이어 '링크를로드 떨어질 것입니다.

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

귀하의 UI를 위해 오디오 추가

자바 스크립트 - 애니메이션, 전환 및 모션 효과와 유동성 웹 인터페이스 디자인에 추가 더 평범 해지고 기반. 현명하게 적용된 오디오 및 보완 수있는 더 경험이 더 많은 의미를 만들고 UI를 강화합니다.

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

.. 하지만 오버하지 마 - 이건 마

그것은 멈춰야 할 때는 아는 것이 중요합니다. "건설 아래의"애니메이션 불러옵니다. GIF를? 어때 깜빡 태그? 움직이는 텍스트를? 어떤 것들은 최선을 혼자 남아있습니다. 아니 모든 HTML 페이지, 슬라이드 플래시 및 소음가 동시에 깜박로 이동해야합니다;도 "즐거움"최고 적당히 적용됩니다. 자동차와 함께 귀찮았어 사용자 음악 재생이나 노이즈를 신속하게 귀하의 사이트의 포기로 이어질 수있습니다.

아마도 좋은 이유는 양식 컨트롤과 같은 같은 표준 HTML 요소를 음향 효과 또는 통지와 관련된 필요도 없어요. 아마도 "침묵은 금입니다"그리고 그것을 최선의 방법은 웹 기본적으로 조용한 장소가되므로, 성가시게 굴지 말고 그리고 혼란.

"침묵 웹 하나 주목할만한 예외"의 테마, Internet Explorer가로서 일반적으로 "클릭하면"페이지를 탐색 발생하는 사운드, 아마도 행동하기 시작했다 사용자를 통지합니다. 이것은 최근의 시대에,하지만 여전히 존재하고 음소거되고있다 여전히이 오늘날 일부 사용자를 귀찮게하는 것 같습니다.

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

침묵에 대한 논쟁에도 불구하고, 다음과 같은 그것은 그들이 이용 당하고있는거야 "가 들리는 시끄러운 피드백을 제공하는"폼 요소, 단추와 DOM 요소를 가지고 어떤 수도의 예입니다. 참신 확실하게 빨리 깨어나기이지만, UI를 위해 유치한 재미 요소를 추가할 않습니다.

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

기대 : HTML 5는

기본 <audio> 및 <video> 지원을 훨씬 쉽게 포함되며, 더 많은 미디어 형식을 제어하는 브라우저 내에서 타사 플러그인에 의존하지 않고도 의미합니다. 또한, 광범위한 자바 스크립트 API는 개발자들이 점점 만드는 혁신적인 경험을 격려해야합니다.

대화 찾기 : 하십시요 Bloglines | Technorati은

공유하고 확장 : 스크랩 야후! My Web 내 웹 | 스크랩 del.icio.us와 | 그게 digg! | reddit!