오디오 파일에 직접 다운로드하면 페이지가로드됩니다. 브라우저가 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 »</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 라이브러리는 대개 브라우저에 의해 캐시됩니다.
html5 오디오 태그 – Johan
http://jplayer.org –
@Johan [this] (http://msdn.microsoft.com/en-us/library/gg589489(v=vs.85)와 함께 html5 오디오 태그를 시도했습니다.) .aspx) 코드가 있지만 Chrome에서는 작동하지 않습니다 – supergiox