2

カスタム<audio>プレーヤーのプラグインを使用していましたが、すべて問題ありませんでした。私は Mac OSX 10.8.2 の Safari ブラウザーで作業していましたが、他のブラウザーでプロジェクトをテストすることに決めたら、非常に奇妙なことが起こりました。簡単に言えば、プラグインは<audio>ページ内のタグを見つけて、それらを別のカスタム マークアップに変更することになっています。Safari では正常に動作しますが、Firefox と Opera では動作しないようです

Firefox と Opera には次の問題があります。オーディオ ソースがサポートされていない形式の場合、基本的に古いブラウザのフォールバックである別の (ミニ) プレーヤーを作成するプラグインの一部があります。どちらも非常に最新のブラウザであるため、このフォールバック プレーヤーを表示します。

プラグインはもともとhttp://tympanus.net/codrops/2012/12/04/responsive-touch-friendly-audio-player/から来ていますが、いくつかの変更を加えました。

canPlayType   = function( type )
        {
        var audioElement = document.createElement( 'audio' );
        return !!( audioElement.canPlayType && 
                   audioElement.canPlayType( 'audio/' + type.toLowerCase() + ';' ).replace( /no/, '' ) );
        };

そしてオリジナルは

canPlayType   = function( file )
        {
            var audioElement = document.createElement( 'audio' );
            return !!( audioElement.canPlayType &&
                    audioElement.canPlayType( 'audio/' + file.split( '.' ).pop().toLowerCase() + ';' ).replace( /no/, '' ) );
        };

そしてもう一つの小さな変化

else if( canPlayType( 'mp3' ) ) isSupport = true;

オリジナルはどこですか

else if( canPlayType( audioFile ) ) isSupport = true;

これらの変更は、自動的に検出するのではなく、src 内のファイルが mp3 であることを指定するために行われました (ローカル ファイルではなく、soundcloud API によって生成された URL を使用しているため)。このような変更がどのようにブラウザーに影響を与え、プラグインが機能しなくなるのかわかりません。関連する多くのコード ファイルがあるため、ここにすべてを投稿する代わりに、ここですべてを自分で確認できるようにドロップボックス フォルダーを作成しました。別のブラウザーで index.html ファイルを試して、私が話している問題を確認できます。 https://www.dropbox.com/sh/xutioz3hyrybvz3/f0-528WzH0

編集: jsbin http://jsbin.com/unupov/1/editでライブ デモも作成したので、さまざまなブラウザーでプレーヤーがどのように動作するかを確認できます。

編集 2: chrome の問題は無視してください。user20140268のおかげで修正されました。

4

2 に答える 2

3

リンクを CSS に変更しました。

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/player.css">

スクリプトと同様に:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/player.js"></script>

今ではクロムでうまく動作します

更新:
Firefox と Opera の両方が で mp3をサポートしていないよう<audio/>です。
この場合、player.js は<audio/>タグを にフォールバックし<embed/>ます。
再生を制御する API はありません。<embed/>代わりに、flash を使用するか、<embed/>変更中の player.js を可視化することができます。line 70

var thePlayer = !isSupport 
            ? $('<embed src="' + audioFile + '" width="100%" height="25" volume="100" autostart="' + isAutoPlay.toString() +'" loop="' + isLoop.toString() + '" />')
            : $( '<div class="' + params.classPrefix + '">' + $( '<div>' ).append( $this.eq( 0 ).clone() ).html() + '<div class="' + cssClass.playPause + '" title="' + params.strPlay + '"><a href="#">' + params.strPlay + '</a></div></div>' ),

thePlayer.addClass( cssClass.mini );で削除line 171

于 2013-03-09T17:22:25.410 に答える
0

ファイルタイプmp3には異なるメタタイプがある場合があり、適切に定義して機能させることができます

audio/x-mpeg-3

また

audio/mpeg3

また

audio/mpeg

これらのいずれかを試してください

audioElement.canPlayType('audio/' + type.toLowerCase() + ';' )

Firefox と Opera は厳密な JS とデータ型で動作し、一部の形式をサポートしていないため、これでうまくいくと思います!

うまくいったかどうかを試して返信してください:)

于 2013-03-12T04:26:52.273 に答える