web-dev-qa-db-ja.com

HTML5を使用してiPadでオーディオファイルを自動再生する

IPadのSafariで自動再生するオーディオファイルを取得しようとしています。 MacでSafariを使用してページにアクセスしても問題ありません。 iPadでは、自動再生は機能しません。

iphoneaudioipadhtml5
84
milesmeow

UPDATE：これはハックであり、IOS 4.X以降では動作しません。これはIOS 3.2.Xで機能しました。

それは真実ではない。 Appleは、モバイルネットワークで使用できるトラフィックの量が多いため、IPadでビデオとオーディオを自動再生したくありません。オンラインコンテンツには自動再生を使用しません。オフラインHTMLサイトの場合、これは優れた機能であり、私はそれを使用しました。

「javascript fake click」ソリューションは次のとおりです。 http://www.roblaplaca.com/examples/html5AutoPlay/

サイトからコードをコピーして貼り付けます：

<script type="text/javascript"> 
        function fakeClick(fn) {
            var $a = $('<a href="#" id="fakeClick"></a>');
                $a.bind("click", function(e) {
                    e.preventDefault();
                    fn();
                });

            $("body").append($a);

            var evt, 
                el = $("#fakeClick").get(0);

            if (document.createEvent) {
                evt = document.createEvent("MouseEvents");
                if (evt.initMouseEvent) {
                    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                    el.dispatchEvent(evt);
                }
            }

            $(el).remove();
        }

        $(function() {
            var video = $("#someVideo").get(0);

            fakeClick(function() {
                video.play();
            });
        });

        </script>

これは私のソースではありません。しばらく前にこれを見つけて、IOS 3.2.XでIPadとIPhoneのコードをテストしました。

33
Fa11enAngel

また、これができない理由は、Appleが行ったビジネス上の決定であって、技術的な決定ではないことを強調したいと思います。つまり、iPod TouchのWebアプリからのサウンドを無効にするAppleの合理的な技術的正当性はありませんでした。これはWiFiデバイスのみであり、高価な帯域幅料金が発生する可能性のある電話ではないため、その引数にはそのデバイスのメリットはありません。彼らはWiFiネットワーク管理を支援していると言うかもしれませんが、私のWiFiネットワークの帯域幅に関する問題はAppleの問題ではなく私の懸念です。

また、彼らが本当に気にかけているのが、望ましくない過度の帯域幅の消費を防ぐことである場合、ユーザーがWebアプリのサウンドをオプトインできるようにする設定を提供します。また、Webサイトが他の手段で同等の帯域幅を消費するのを制限するために何かをします。しかし、そのような制限はありません。 Webサイトはバックグラウンドで何度も何度も巨大なファイルをダウンロードすることができ、Appleはそれをあまり気にしません。そして最後に、サウンドはとにかくダウンロードできると信じているので、帯域幅ISは実際に保存されていません！ Appleは、ユーザーの操作なしに自動的にプレイすることを許可せず、ゲームで使用できないようにします。これはもちろん彼らの真の目的です。

Appleは、HTML5アプリがネイティブアプリと同等以上の能力を持っていることに気付き始めたため、サウンドをブロックしました。 Web Appsでサウンドが必要な場合は、Microsoftのように反競争的であることをやめるためにAppleに働きかける必要があります。ここで修正できる技術的な問題はありません。

102
Rick M

Appleは、さまざまなビジネス上の理由から、iOSデバイスでの多くのHTML5 Web標準を迷惑な形で拒否しています。最終的に、タッチイベントの前にサウンドファイルをプリロードまたは自動再生することはできません。一度に1つのサウンドしか再生できず、Ogg/Vorbisをサポートしていません。ただし、オーディオをもう少し制御できるようにするための巧妙な回避策を見つけました。

<audio id="soundHandle" style="display:none;"></audio>

<script type="text/javascript">

var soundHandle = document.getElementById('soundHandle');

$(document).ready(function() {
    addEventListener('touchstart', function (e) {
        soundHandle.src = 'audio.mp3';
        soundHandle.loop = true;
        soundHandle.play();
        soundHandle.pause();
    });
});

</script>

基本的に、最初のタッチイベントでオーディオファイルの再生を開始し、すぐに一時停止します。これで、Javascript全体でsoundHandle.play（）およびsoundHandle.pause（）コマンドを使用し、タッチイベントなしでオーディオを制御できます。完全に時間を調整できる場合は、音が終わった直後に一時停止してください。その後、もう一度再生すると、最初にループバックします。これは、Appleがここで行ったすべての混乱を解決するわけではありませんが、1つの解決策です。

27
kaleazy

IOS 4.2.1の時点では、偽のクリックも.load（）トリックも、iOSデバイスでオーディオを自動再生するために機能しません。私が知っている唯一のオプションは、ユーザーに実際にクリックアクションを実行させ、クリックイベントハンドラーで再生を開始させることですwithout非同期（ajax、setTimeoutなど）で.play（）呼び出しをラップします。

間違っている場合は誰か教えてください。最新のアップデートの前に、iPadとiPhoneの両方に機能する抜け穴があり、それらはすべて閉じられたように見えます。

23
David Gouldin

音声が説明どおりに機能していないことを確認します（少なくともiPad 4.3.5を実行している場合）。特定の問題は、オーディオが非同期メソッド（ajax、タイマーイベントなど）でロードされないことですが、プリロードされていれば再生されます。問題は、ユーザーがトリガーするイベントで負荷をかける必要があることです。したがって、ユーザーが再生を開始するためのボタンを使用できる場合は、次のようなことができます。

function initSounds() {
    window.sounds = new Object();
    var sound = new Audio('assets/sounds/clap.mp3');
    sound.load();
    window.sounds['clap.mp3'] = sound;
}

次に、たとえばajaxリクエストで再生するには、次のようにします。

function doSomething() {
    $.post('testReply.php',function(data){
        window.sounds['clap.mp3'].play();
    }); 
}

最善の解決策ではありませんが、特に原因はユーザーがトリガーしないイベントでのロード機能であることがわかっているので役立ちます。

編集：Appleの説明を見つけましたが、iOS 4以降に影響します： http://developer.Apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

9
Jacob Mouka

オーディオタグまたはビデオタグの.play（）メソッドの前に.load（）メソッドを呼び出してみてください...それぞれHTMLAudioElementまたはHTMLVideoElementになります。それが私にとってiPadで機能する唯一の方法でした！

7
Brian Brown

IPadまたはiPhoneでは、ビデオまたはオーディオタグの自動再生は機能しません。これは、ユーザー帯域幅を節約するためにAppleによって設定された制限です。

5
Andrew

この質問に対する答えは、（少なくとも今） Safari HTML5 docs で明確に文書化されているように思えます。

携帯電話ネットワークを介したダウンロードのユーザー制御

IOS上のSafari（iPadを含むすべてのデバイス）で、ユーザーがセルラーネットワーク上にいて、データユニットごとに課金される場合、プリロードと自動再生は無効になります。ユーザーが開始するまでデータはロードされません。これは、play（）またはload（）メソッドがユーザーのアクションによってトリガーされない限り、ユーザーが再生を開始するまでJavaScript play（）およびload（）メソッドも非アクティブであることを意味します。つまり、ユーザーが開始した[再生]ボタンは機能しますが、onLoad = "play（）"イベントは機能しません。

これでムービーが再生されます：<input type="button" value="Play" onClick="document.myMovie.play()">

これはiOSでは何もしません：<body onLoad="document.myMovie.play()">

5
Adrian

IOS4.2（dev build）の下で簡単なプロトタイプWebアプリを開発している間、このことに戸惑っています。解決策は実際には非常に簡単です。 HTMLページに既にタグがあるとは思えないことに注意してください。実際には、タグをドキュメントに動的に挿入する必要があります（この例では、Javascriptの追加にPrototype 1.7を使用しています）。

this.soundFile = new Element("audio", {id: "audio-1", src: "audio-1.mp3", controls: ""});
document.body.appendChild(this.soundFile);
this.soundFile.load();
this.soundFile.play();

コントローラーを設定していないので、CSSを使って隠したり、画面外に配置したりするために、トリッキーなことをする必要はありません。

これは完全に機能するようです。

2
Jon Jardine

Appleはこの標準を完全にはサポートしていませんが、回避策があります。 正当化 はセルラーネットワークの輻輳です。これは、ランダムなオーディオを再生するページにたどり着く可能性があるためです。この動作は、おそらく一貫性のために、デバイスがWi-Fiに接続しても変わりません。ところで、とにかく、これらのページは通常悪い考えです。すべてのWebページにサウンドトラックを配置しようとするべきではありません。それはただ間違っています。 :)

html5オーディオは、ユーザーアクションの結果として開始された場合に再生されます。ページの読み込みはカウントされません。そのため、Webアプリをオールインワンページアプリに再構築する必要があります。オーディオを再生するページを開くリンクの代わりに、現在のページでページを変更せずに再生するには、そのリンクが必要です。この「ユーザーインタラクション」ルールは、オーディオまたはビデオ要素で呼び出すことができるhtml5メソッドに適用されます。呼び出しは、ページのロード時に自動的に起動される場合、効果なしで戻りますが、イベントハンドラーから呼び出されたときに機能します。

2
bmidgley

私の解決策は、前のメニューの実際のタッチイベントからトリガーすることです。もちろん、特定のプレーヤーインターフェイスを使用することを強制しません。私の目的では、これはうまく機能します。使用する既存のインターフェイスがない場合は、盗聴されます。たぶんあなたは傾斜イベントか何かを試すことができます...

1
Luke Stanley

次を使用してAudio要素を作成する場合：

var a = new Audio("my_audio_file.wav");

そして、以下を介してsuspendイベントリスナーを追加します。

a.addEventListener("suspend", function () {console.log('suspended')}, false);

そして、ファイルをモバイルSafari（iPadまたはiPhone）にロードすると、「中断」が開発者コンソールに記録されます。 HTML5仕様によれば、これは、「ユーザーエージェントは現在メディアデータを意図的にフェッチしていないが、メディアリソース全体をダウンロードしていない」ことを意味します。

後続のa.load（）を呼び出し、「canplay」イベントをテストしてからa.play（）を使用することは、サウンドを自動トリガーするのに適した方法のようです。

1
Vince

これを処理するには、オーディオをトリガーできるすべてのイベントのイベントハンドラーをbody要素にアタッチします。bodyエレメントは、自動再生機能を持つhtmlオーディオ要素を1回再生します。

var mobile = /iPad|iPhone|iPod|Android/.test(navigator.userAgent) && !window.MSStream;
if (mobile) {
    $('body').on('touchstart click doubleclick keydown', function() {
        $("audio[autoplay='autoplay']").each(
            function(){
                this.play();
                this.removeAttribute('autoplay');
            });
    });
}
0
Andrew Hancox

これはうまくいくようです：

<html>
<title>
iPad Sound Test  - Auto Play
</title>
</head>
<body>
<audio id="audio" src="mp3test.mp3" controls="controls" loop="loop">
</audio>
<script type="text/javascript"> 
    window.onload = function() {
        var audioPlayer = document.getElementById("audio");
        audioPlayer.load();
        audioPlayer.play();
    };
    </script> 

</body>
</html>

こちらで実際にご覧ください： http://www.johncoles.co.uk/ipad/test/1.html（Archived）

iOS 4.2以降、これは機能しなくなりました。すみません。

0
John Coles

Ipad v.5.1.1でテストされたjQueryで動作

$('video').get(0).play();

ページからビデオ要素を追加/削除する必要があります。

0
Adrian