Membina pemain audio berkuasa javascript mudah alih-tutorial js-php.cn

Membina pemain audio berkuasa javascript mudah alih

Lisa Kudrow

Lepaskan： 2025-02-20 12:57:09

asal

541 orang telah melayarinya

Building a Mobile JavaScript Powered Audio Player

Saya peminat besar HTML5 dan JavaScript API, yang telah meneroka banyak, termasuk GetUsermedia, ucapan web, dan orientasi skrin API (dengan repositori GitHub yang berdedikasi). Artikel ini menunjukkan membina pemain audio JavaScript yang mesra mudah alih yang memanfaatkan beberapa API untuk pengalaman pengguna yang dipertingkatkan.

Ciri -ciri Utama:

Pemain audio JavaScript ini menggunakan cahaya ambien, kedekatan, status bateri, pemberitahuan web, dan API getaran untuk mencipta pengalaman mudah alih yang responsif dan menarik. Ia dibina dengan peningkatan progresif, berfungsi dengan betul walaupun API tertentu tidak disokong. Khususnya, ia menyesuaikan tema berdasarkan cahaya ambien, jeda/drama berdasarkan kedekatan, dan menguruskan main balik berdasarkan tahap bateri, memberitahu pengguna dan memberikan maklum balas haptik apabila perlu. Kod ini boleh didapati di GitHub, dan demo langsung disediakan.

Penggunaan API:

Pemain menggunakan API ini:

API cahaya ambien:

API Kekejaman:
API Status Bateri Bateri :
Pemberitahuan Web API:
API Getaran: memberikan maklum balas haptik untuk mengukuhkan pemberitahuan tahap bateri.
Tutorial menganggap kebiasaan dengan API ini. Pemain menggunakan elemen HTML5 asli sebagai sandaran, memaparkan mesej jika elemen tidak disokong.

Struktur HTML:

<audio></audio>

HTML adalah mudah: Penerangan ringkas, elemen

dengan kawalan asli diaktifkan ( atribut), pautan CSS Stylesheet, dan kemasukan fail JavaScript. pada mulanya mempunyai kelas .

<audio></audio> controls CSS Styling: body normal-theme

CSS mentakrifkan gaya untuk

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Mobile Audio Player</title>
  <meta name="description" content="APIs-powered Audio Player">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.php.cn/link/1dfd06d3b151a21b879f3710d6b49786">
</head>
<body class="normal-theme">
  <h1>APIs-powered Audio Player</h1>
  <p>This demo showcases a simple APIs-powered audio player using the Proximity, Battery Status, Vibration, Web Notifications, and Ambient Light APIs.</p>
  <audio id="audio" src="http://freshly-ground.com/data/audio/mpc/20090119%20-%20Untitled%20Groove.mp3" controls>
    <p>Your browser doesn't support the <code>audio</code> element.</p>
  </audio>
  <🎜>
</body>
</html>

Salin selepas log masuk

dan tiga tema (

, , ), masing -masing dengan variasi warna latar belakang dan teks untuk kebolehbacaan optimum dalam keadaan pencahayaan yang berbeza.

body dark-theme logik javascript: normal-theme light-theme

Kod JavaScript ujian pertama untuk sokongan API, kemudian mentakrifkan tetapan konfigurasi untuk ambang dan mesej pemberitahuan. Ia mengambil elemen audio dan melaksanakan fungsi API: kawalan main balik berasaskan jarak, penukaran tema berdasarkan tahap cahaya, dan pemantauan tahap bateri dengan pemberitahuan dan maklum balas getaran. Kod Lengkap tersedia di GitHub.

body {
  max-width: 600px;
  margin: 0 auto;
  font-size: 20px;
  padding: 0 1em;
}

.dark-theme {
  background-color: #000000;
  color: #FFFFFF;
}

.normal-theme {
  background-color: #B8FFF7;
  color: #C53131;
}

.light-theme {
  background-color: #FFFFFF;
  color: #000000;
}

Salin selepas log masuk

Kesimpulan:

Tutorial ini menunjukkan kuasa API JavaScript dalam mewujudkan aplikasi mudah alih yang kaya dengan ciri. Pengalaman pengguna yang dipertingkatkan mempamerkan potensi API ini untuk membina aplikasi fokus mudah alih yang menarik dan responsif. Repositori dan demo github disediakan untuk penjelajahan lanjut.

Soalan Lazim (Soalan Lazim): (Soalan Lazim ini dikekalkan dari input asal, tetapi penempatan mereka diselaraskan untuk aliran dan kebolehbacaan yang lebih baik.)

Seksyen Soalan Lazim, menangani ciri senarai main, kawalan tersuai, respons, integrasi API Audio Web, bar kemajuan, kawalan volum dan bisu, gelung dan fungsi shuffle, dan butang muat turun, tetap tidak berubah dan boleh didapati dalam output asal.

Atas ialah kandungan terperinci Membina pemain audio berkuasa javascript mudah alih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!