audio HTML

Audio HTML (Audio)

Bunyi boleh dimainkan dengan cara yang berbeza dalam HTML.

Masalah dan Penyelesaian

Memainkan audio dalam HTML bukanlah mudah!

Anda perlu mengetahui banyak helah untuk memastikan fail audio anda berfungsi dalam semua penyemak imbas (Internet Explorer, Chrome, Firefox, Safari, Opera) dan pada semua perkakasan (PC, Mac, iPad, iPhone) Play .

Dalam bab ini, tapak web PHP Cina (php.cn) meringkaskan masalah dan penyelesaian untuk anda.

Menggunakan pemalam

Pemalam penyemak imbas- in ialah program komputer kecil yang memanjangkan kefungsian standard penyemak imbas anda.

Pemalam boleh ditambahkan pada halaman menggunakan teg <objek>

Teg ini mentakrifkan bekas untuk sumber (biasanya sumber bukan HTML). bergantung pada jenis, ia Dipaparkan oleh penyemak imbas dan juga oleh pemalam luaran.

Gunakan <embed> elemen
< 🎜 Teg >

Coretan kod berikut boleh memaparkan fail MP3 yang dibenamkan dalam halaman web:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<embed height="50" width="100" src="horse.mp3">
    <p>如果你无法听到该音频，那么可能你的电脑或浏览器不支持该文件格式。</p>
    <p>或者你没有打开扬声器。</p>
</embed>
</body>
</html>

Anda menemui audio dalam format mp3 secara setempat dan menggantikan src="horse.mp3" dengan fail mp3 anda, cuba buka halaman web sekali lagi

Masalah:

<embed> sah dalam HTML 4. Halaman gagal pengesahan HTML 4.
Penyemak imbas yang berbeza mempunyai sokongan yang berbeza untuk format audio.
Jika penyemak imbas tidak menyokong format fail, audio tidak boleh dimainkan tanpa pemalam.
Jika komputer pengguna tidak memasang pemalam, audio tidak boleh dimainkan.
Jika anda menukar fail kepada format lain, ia masih tidak boleh dimainkan dalam semua penyemak imbas.

Gunakan <objek> elemen
Teg

<teg objek> juga boleh menentukan bekas untuk kandungan luaran (bukan HTML).

Coretan kod berikut boleh memaparkan fail MP3 yang dibenamkan dalam halaman web:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<object height="100" width="300" data="Kalimba.mp3"></object>
<p>如果你无法听到该音频，那么可能你的电脑或浏览器不支持该文件格式。</p>
<p>或者你没有打开扬声器。</p>
</body>
</html>

Anda menemui audio dalam format mp3 secara setempat dan menggantikan src="horse.mp3" dengan fail mp3 anda, cuba buka halaman web sekali lagi

Soalan:

Penyemak imbas yang berbeza menyokong format audio Juga berbeza.
Jika penyemak imbas tidak menyokong format fail, audio tidak boleh dimainkan tanpa pemalam.
Jika komputer pengguna tidak memasang pemalam, audio tidak boleh dimainkan.
Jika anda menukar fail kepada format lain, ia masih tidak boleh dimainkan dalam semua penyemak imbas.

Menggunakan elemen HTML5 <audio>

HTML5 <audio> Elemen HTML5 , adalah menyalahi undang-undang dalam HTML 4 tetapi berfungsi dalam semua pelayar.

Elemen <audio> berfungsi dalam semua penyemak imbas moden.

Di bawah kami akan menggunakan teg <audio> untuk menerangkan fail MP3 (sah dalam Internet Explorer, Chrome dan Safari), Juga menambah fail jenis OGG (sah dalam pelayar Firefox dan Opera Jika ia gagal, ia akan memaparkan mesej teks ralat:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<audio controls>
    <source src="horse.mp3" type="audio/mpeg">
    <source src="horse.ogg" type="audio/ogg">
    您的浏览器不支持该音频格式。
</audio>
</body>
</html>

Jika penyemak imbas anda tidak menyokong format audio ia akan mengeluarkan "Your The browser does." tidak menyokong format audio ini", jika tidak, ia akan diterbalikkan

Masalah:

<audio> tag dalam HTML 4 ialah tidak sah. Halaman anda gagal pengesahan HTML 4.
Anda mesti menukar fail audio kepada format lain. Unsur
<audio> tidak berfungsi dalam penyemak imbas lama.

Penyelesaian HTML terbaik

Contoh di bawah menggunakan dua format audio yang berbeza. Elemen HTML5 <audio> cuba memainkan audio sebagai mp3 atau ogg. Jika itu gagal, kod akan kembali mencuba elemen <embed>

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<audio controls>
    <source src="horse.mp3" type="audio/mpeg">
    <source src="horse.ogg" type="audio/ogg">
    <embed height="50" width="100" src="horse.mp3">
</audio>
</body>
</html>

Ganti src dengan audio tempatan anda dan cuba

Soalan:

You The audio mesti ditukar kepada format yang berbeza. Elemen

<benamkan> tidak boleh kembali untuk memaparkan mesej ralat.

Yahoo Media Player - Cara mudah untuk menambah audio pada tapak web anda

Yahoo Media Player menyediakan pengguna anda dengan butang main kecil dan bukannya pemain penuh. Walau bagaimanapun, apabila anda mengklik butang, pemain penuh akan muncul.

Sila ambil perhatian bahawa pemain ini sentiasa dilabuhkan di bahagian bawah bingkai tingkap. Hanya klik padanya dan luncurkannya keluar.

Menggunakan Yahoo Player adalah percuma. Untuk menggunakannya, anda perlu memasukkan JavaScript ini di bahagian bawah halaman web:

Yahoo Player boleh memainkan MP3 dan pelbagai format lain. Anda boleh menukar halaman HTML anda menjadi senarai main profesional dengan mudah dengan hanya menambah baris kod pada halaman atau blog anda:

<script src="http://mediaplayer.yahoo.com/latest"></script>

Contoh

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<p><a href="Kalimba.mp3">Play mp3</a></p>
<script src="http://mediaplayer.yahoo.com/latest"></script>
</body>
</html>

Cari fail audio dan cuba

Gunakan hiperpautan

Jika halaman web mengandungi hiperpautan ke fail media, kebanyakan penyemak imbas akan menggunakan "aplikasi pembantu" untuk memainkan fail tersebut.

Coretan kod berikut memaparkan pautan ke fail mp3. Jika pengguna mengklik pada pautan, penyemak imbas akan melancarkan "aplikasi pembantu" untuk memainkan fail:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<h2>链接到一首歌</h2>
<p><a href="nverq.mp3">点击此处播放</a></p>
</body>
</html>

Cari fail audio dan cuba

Perihalan Sebaris Bunyi

Apabila anda memasukkan bunyi dalam halaman web, atau sebagai bahagian penting halaman web, ia dipanggil bunyi sebaris.

Jika anda bercadang untuk menggunakan bunyi sebaris dalam aplikasi web, anda perlu sedar bahawa ramai orang mendapati bunyi sebaris menjengkelkan. Juga ambil perhatian bahawa pengguna mungkin telah mematikan pilihan bunyi sebaris dalam penyemak imbas mereka.

Nasihat terbaik kami ialah memasukkan bunyi sebaris sahaja yang pengguna jangkakan untuk mendengarnya. Contoh positif ialah apabila pengguna perlu mendengar rakaman dan mengklik pada pautan, yang membuka halaman dan memainkan rakaman.

Teg Multimedia HTML

Teg Baharu HTML5

标签	描述
<embed>	定义内嵌对象。HTML4 中不赞成，HTML5 中允许。
<object>	定义内嵌对象。
<param>	定义对象的参数。

<audio>	定义了声音内容
<video>	定义一个视频或者影片
<source>	定义了media元素的多媒体资源(<video> 和 <audio>)
<track>	规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> </head> <body> <audio controls> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.ogg" type="audio/ogg"> <embed height="50" width="100" src="horse.mp3"> </audio> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik