1

さまざまなオーディオクリップを使ったサウンドボードの作成に取り組んでいます。

標準のHTML5オーディオコントロールを使用するのではなく、ユーザーがボタンを押したときに関連するクリップが再生されるように、各ボタンにタイトルテキストのスタイルを設定したいと思います。

次のコードを使用して、HTML 5ブラウザー（Chrome、Firefox、Safari、およびIE9 +）ですべてが正常に機能しています。

    <script type="text/javascript" charset="utf-8">
       $(function() {
            $("audio").removeAttr("controls").each(function(i, audioElement) {
                var audio = $(this);
                var that = this; //closure to keep reference to current audio tag
                $("#doc").append($('<button>'+audio.attr("title")+'</button>').click(function() {
                    that.play();
                }));
            });
        });
    </script>

    <!-- Sample Audio Clip -->
    <audio controls preload="auto" autobuffer title="Sounds of Laughter"> 
    <source src="assets/clips/1.mp3" />
    <source src="assets/clips/1.ogg" />
    </audio>

ただし、このソリューションは、InternetExplorer8などのHTML5に準拠していないブラウザーではサポートされていません。

（a）ブラウザがHTML 5タグをサポートしていないかどうかを検出し、サウンドボードの代替バージョンにリダイレクトするか、（b）フォールバック（フラッシュ、など）サポートが存在しない場合は、ボタンにカスタムスタイルを使用します。

4

3 に答える 3

2

ギャレットが言ったようにModernizrとjPlayerの両方を使用する必要があります

互換性を確認する方法については、Garrettの回答を確認してください。互換性に基づいてHTML5またはFlashをシームレスに再生することが唯一の目標である場合に、なぜそれが役立つのかはわかりませんが。jPlayerはそれを自動的に行います。

あなたはそれをインスタンス化する必要があります：

$("#music").jPlayer({
    ready: function (event) {
        $(this).jPlayer("setMedia", {
            mp3:"music.mp3",
            oga:"music.ogg"
        });
    },
    swfPath: "js",
    supplied: "mp3, oga"
});

以下は、使用するインターフェースによって異なります。jPlayerにはいくつかのスキンがありますが、自分の意志に合わせて変更することも、私のようにインターフェイス全体を最初から作成してjPlayermethidsを使用することもできます。

于 2012-07-31T19:42:38.793 に答える
1

Modernizrスクリプト ライブラリを確認してください。これにより、ブラウザーでサポートされている HTML5 機能に基づいて条件付きロジックを実行できます。たとえば、次のようなことができます。

var audio = new Audio();
audio.src = Modernizr.audio.ogg ? 'background.ogg' :
            Modernizr.audio.mp3 ? 'background.mp3' :
                                  'background.m4a';
audio.play();

ドキュメントはhttp://modernizr.com/docs/#features-html5にあります。

于 2012-07-29T20:09:47.413 に答える
0

MP3 から OGG へのフォールバック用に少し変更した別の例を見つけました。canPlayType次の方法を使用します。

var audiofile = 'example.mp3';
var audioTag = document.createElement('audio');
if (!(!!(audioTag.canPlayType) && ("no" != audioTag.canPlayType("audio/mpeg"))
      && ("" != audioTag.canPlayType("audio/mpeg")))) {
    audiofile = audiofile.replace('.mp3','.ogg');
}
于 2016-05-26T10:12:09.487 に答える