直接ダウンロードするだけで、ページをロードできます。ブラウザが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>
とJavaScript::私は構築済みの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