Peristiwa mana yang dapat diterima untuk memulai pemutaran audio HTML5 di Chrome seluler

Browser seluler memerlukan tindakan pengguna untuk mulai memutar elemen Audio. Peristiwa klik memenuhi persyaratan, namun tampaknya touchstart bukanlah peristiwa permulaan yang dapat diterima di Chrome pada Android atau iOS. (Lihat di bawah)

Adakah yang tahu di mana menemukan definisi tepat tentang konteks peristiwa yang diperlukan untuk mulai bermain.

(Saya mencoba memecahkan masalah UX menggunakan ide-ide di Bagaimana untuk mencegah zoom ketuk dua kali di iOS dan Android. Sejak memposting pertanyaan awal saya, saya telah menemukan solusi yang memecahkan masalah UX tanpa menggunakan touchstart, tapi menurut saya pertanyaan penting tentang peristiwa mana dianggap sebagai tindakan pengguna yang masih valid.)

Tambahan:

Ada anggapan bahwa saya salah tentang acara touchstart, jadi sebagai catatan, saya menyediakan program pengujian yang sepele. Karena memerlukan file musik asli dan perangkat seluler, JSFiddle bukanlah platform yang cocok (kecuali ada yang tahu cara mensimulasikan acara touchstart di biola). Untuk mereproduksi pengamatan saya, edit javascript untuk memuat file audio Anda sendiri.

<!DOCTYPE html>
<html>
<body>

<br>
<button type="button" id="but1">click</button>
<button type="button" id="but2">touch</button>
<br>
<br>
<span id="message"></span>

<script>

var e;

e = document.getElementById('but1');
e.onclick = click;
e = document.getElementById('but2');
e.ontouchstart = touchstart;

function click() {
  alert('caught click');
  play();
  event.preventDefault();
}

function touchstart() {
  alert('caught touchstart');
  play();
  event.preventDefault();
}

var p;
var t;

function play() {

  p = new Audio();
  p.src = '/k487.mp3';      //  CHANGE THIS
  p.preload = 'auto';
  p.play();

  t = setInterval(report,1000);
}

function report() {

  var s = 'Player readyState='+p.readyState+', currentTime='+p.currentTime;
  var e = document.getElementById('message');

  e.innerHTML = s;
}

</script>
</body>
</html>

Saat saya memuat halaman ini di Chrome 58 pada Android 6.0.1 tombol Klik berfungsi seperti yang diharapkan, menghasilkan popup, memutar musik, dan memperbarui waktu pemutaran.

Jika saya memuat ulang halaman dan menyentuh tombol Sentuh, saya mendapatkan popup, namun tidak ada musik yang diputar. Tampilan status menunjukkan readyState sebesar 4 dan currentTime sebesar 0. Dengan kata lain, event touchstart diizinkan untuk memuat audio namun tidak untuk memulai pemutaran.

Karena saya tidak dapat menemukan dokumentasi tentang peristiwa apa yang dimaksudkan agar berfungsi, saya tidak tahu apakah menganggap ini sebagai bug Chrome, atau perilaku yang dimaksudkan.


person gawkmeister    schedule 16.06.2017    source sumber


Jawaban (2)


Saat metode play() pada elemen media dipanggil, agen pengguna harus menjalankan langkah-langkah berikut https://html.spec.whatwg.org/multipage/media.html#dom-media-play

langkah1: jika elemen media tidak diizinkan untuk diputar...

lalu saya penasaran syaratnya boleh main, lompat ke sini https://html.spec.whatwg.org/multipage/media.html#allowed-to-play

ia mengatakan:

Misalnya, agen pengguna dapat mengharuskan pemutaran dipicu oleh aktivasi pengguna, namun pengecualian dapat dibuat untuk mengizinkan pemutaran saat tidak bersuara

lalu muncul 'triggered-by-user-activation' di sini menurut saya itulah alasannya:

Algoritme dipicu oleh aktivasi pengguna jika salah satu kondisi berikut ini benar:

Tugas yang menjalankan algoritme saat ini sedang memproses perilaku aktivasi yang atribut isTrusted peristiwa kliknya benar.

  • mengubah
  • klik
  • menu konteks
  • klik dbl
  • mouseup
  • penunjuk ke atas
  • mengatur ulang
  • kirim
  • ujung sentuh

'touchstart' tidak disebutkan di sana.

semoga itu bisa membantu Anda.

person Topppy    schedule 23.05.2018
comment
Sepertinya daftar ini lebih bersifat teoritis. Di ponsel chrome, acara touchend juga memunculkan pengecualian bahwa pemutaran media tidak diperbolehkan. - person crazy; 27.11.2020

Di halaman ini Anda akan menemukan jawaban atas pertanyaan ini.

Gunakan beberapa popup atau animasi apa pun yang menarik perhatian pengguna untuk diketuk.

dalam ingatanku ... android dan iOS tidak memiliki perilaku yang sama, ini tentang jumlah maksimal audio yang dapat kita mulai buffer dengan trik ini.

    var EXE_JUST_ONE_TIME = false;

    document.addEventListener("touchstart" , function(e) {

    if (EXE_JUST_ONE_TIME == false){
    EXE_JUST_ONE_TIME = true;

    document.getElementById("LaserShot").play(); // need for play pause just for buffering start
    document.getElementById("LaserShot").pause();
    // now you can play programmability from js 
    document.getElementById("LaserShot_CLONE").play();
    document.getElementById("LaserShot_CLONE").pause();

    }
  else if(EXE_JUST_ONE_TIME = true){

    document.getElementById("MakeReadyotherAudio1").play();
    document.getElementById("MakeReadyotherAudio1").pause();

     EXE_JUST_ONE_TIME = 'NOMORE'

  } 


    }

Jika Anda memiliki masalah, saya dapat membuatkan Anda cuplikan kode dengan contoh yang berfungsi!

Saya memasukkan 90% dalam pengembangan web seluler dalam fungsi acara di awal:

   document.getElementById("myAnchor").addEventListener("click", function(event){
    event.preventDefault()
});

//Kadang-kadang bahkan jika Anda tidak menggunakan suatu event, ada baiknya untuk menggantinya:

  window.addEventListener('touchstart', function(e){
      e.preventDefault()

    }, false)

    window.addEventListener('touchmove', function(e){
        e.preventDefault()

    }, false)

    window.addEventListener('touchend', function(e){    
        e.preventDefault()


    }, false)

    window.addEventListener('touchleave', function(e){    
        e.preventDefault()


    }, false)
    window.addEventListener('touchcancel', function(e){    
        e.preventDefault()


    }, false)
    window.addEventListener('touchenter', function(e){    
        e.preventDefault()


    }, false)

Jika mau, Anda dapat menggunakan perpustakaan ini: pengoptimalan acara desktop/seluler untuk kanvas

person Nikola Lukic    schedule 16.06.2017
comment
Ini sepertinya menjawab pertanyaan yang berbeda. Tampaknya Anda memahami bahwa klik awal pada sesuatu diperlukan untuk memulai pemutar. - person gawkmeister; 18.06.2017
comment
touchstart bukanlah acara permulaan yang dapat diterima, ini tidak benar. Lihat kemungkinan jalur bug: stackoverflow.com/questions/2794769/ Saya selalu menggunakan acara sentuh khusus seluler. - person Nikola Lukic; 18.06.2017
comment
Saya telah menambahkan bukti saya ke pertanyaan awal. - person gawkmeister; 21.06.2017