2012-02-15 3 views
7

자바 스크립트를 통해 mp3 (매우 짧은) 파일을 재생하는 가장 좋은 크로스 브라우저 방식은 무엇입니까? 나는 다른 방법을 시도하지만 문제 ...자바 스크립트를 사용하여 mp3 파일 재생

편집은 항상 거기에 1 : 나는 "전체"플레이어가 필요하지 않습니다

은, 난 그냥 매번 뭔가

를 어떻게 호출 할 수있는 것보다 기능이 필요합니다

편집 2 :

좋아, 나는 내 문제를 더 잘 설명했습니다. 서버는 LAN에 연결된 스마트 폰이지만 항상 인터넷에 연결된 것은 아닙니다. 파일 크기가 3kb (wav의 60kb 대신)이기 때문에 mp3를 사용하고 싶지만,이 파일을 재생하는 메커니즘이 너무 무거울 경우 (플레이어 또는 jquery.js) wav 파일을 사용하는 것이 좋습니다. 기타 제안 사항?

+0

html5 오디오 태그 – Johan

+1

http://jplayer.org –

+0

@Johan [this] (http://msdn.microsoft.com/en-us/library/gg589489(v=vs.85)와 함께 html5 오디오 태그를 시도했습니다.) .aspx) 코드가 있지만 Chrome에서는 작동하지 않습니다 – supergiox

답변

0

Flowplayer을 사용하는 것이 좋습니다. 플래시 및 자바 스크립트로 작성되었으며 HTML5 대체 버전이 있습니다.

사이드로드 : 모든 iOS 기기 (iPad 등)에는 자동 재생 기능이 없습니다.

5

오디오 파일에 직접 다운로드하면 페이지가로드됩니다. 브라우저가 MP3를 지원하는지 검색합니다. 그렇다면 직접 다운로드를 AUDIO 태그로 점진적으로 향상 시키십시오.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Audio demo</title> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script> 
</head> 
<body> 
    <p id="audio"> 
     <a href="BadAppleEnglish.mp3">Listen &raquo;</a>   
    </p> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> 
    <script src="audio.js"></script> 
</body> 
</html> 

그리고 자바 스크립트 : 나는 미리 만들어진 MP3 재생 플러그인의 엄청나게 많은 수의 대부분이 이런 식으로 작동하는지 상상

$(function() { 
var audioElement = $('#audio'), 
    href = audioElement.children('a').attr('href'); 
$.template('audioTemplate', '<audio src="${src}" controls>'); 
if (Modernizr.audio.mp3) { 
    audioElement.empty(); 
    $.tmpl('audioTemplate', {src: href}).appendTo(audioElement); 
} 
}); 

다음은 샘플입니다.

UPDATE :

당신이 jQuery를 사용하지 않는 솔루션을 선호 거라고 지정하는 질문을 편집 한 이후

, 나는이를 다시 작성하는 jQuery를이 사소한 사용하지 않는 것을 지적 할 것이다. 더 길고 우아하지 않습니다. CDN에서로드 된 Javascript 라이브러리는 대개 브라우저에 의해 캐시됩니다.

+0

나는이 질문을 편집 함 – supergiox

14

사용이 :

new Audio('your/url/here').play() 

은이 (HTMLAudioElement)에 대한 문서가 MDN에서 찾을 수는 컨트롤의 대부분이 HTMLMediaElement 상속 있습니다.