Audio HTML5(audio)

Fungsi audio HTML5 sudah sangat berkuasa Main balik, lompat, penimbalan dan fungsi lain yang sebelum ini hanya boleh dilakukan dengan denyar boleh dikendalikan dengan mudah oleh audio HTML5.

Tetapi sehingga kini, tiada standard untuk memainkan audio pada halaman web.

Sintaks audio dan sifat dan kaedah

Gunakan sintaks
< src="song.mp3" controls="controls" loop="loop" autoplay="autoplay"> Sayang, penyemak imbas anda tidak menyokong teg audio html5</audio>
atribut
src ialah laluan lagu
mengawal Kawalan main balik Jika anda menulis controls="controls" dalam teg, halaman web akan memaparkan kawalan main balik yang disertakan dengan audio Jika tidak ditulis, ia tidak akan dipaparkan.
gelung Gelung lagu berada dalam teg Tambah atribut ini pada gelung lagu Jika lagu anda diambil dari latar belakang, anda juga boleh menetapkan gelung=true/false dalam ajax untuk mengawalnya
automain akan dimainkan secara automatik apabila lagu itu dimuatkan, tetapi hanya bahagian PC yang boleh melaksanakan bahagian mudah alih Tidak (pelayar PC jauh lebih lengkap daripada penyemak imbas mudah alih, dan sokongan untuk beberapa atribut akan menjadi lebih baik)
Sudah tentu, mereka adalah atribut juga boleh digunakan sebagai atribut objek untuk memanggil dan mengawal auido.*

Audio bukan sahaja label, ia juga merupakan objek di bawah tetingkap Objek mempunyai sifat dan kaedah Sebagai objek, apakah itu kaedah yang biasa digunakan?

Sifat objek:
currentTime Dapatkan masa main balik semasa
tempoh Dapatkan jumlah masa lagu
mainkan sama ada ia dimainkan mengembalikan benar/salah
jeda sama ada ia sedang menjeda dan mengembalikan benar/salah
Kaedah objek:
play() memainkan lagu
jeda() menjeda lagu
load() memuat semula lagu

Tiga format asas dalam HTML5:

1 Kod minimum

<audio src="song.ogg" controls="controls"> </audio>

2 Kod dengan peringatan ketidakserasian

<audio src="song.ogg" controls="controls">
Pelayar anda tidak menyokong teg audio.
</audio>

3 Cuba untuk serasi dengan tulisan penyemak imbas

< ;audio controls="controls">
<source src="song.ogg" type="audio/ogg" >
<source src="song.mp3" type="audio/mpeg ">
Pelayar anda tidak menyokong teg audio.
</audio>

<!doctype html>
<html>
    <head> 
    <meta charset="utf-8"> 
    <title>php.cn</title> 
    </head>
    <body>
        <audio controls>
           <source src="horse.ogg" type="audio/ogg">
           <source src="horse.mp3" type="audio/mpeg">
             您的浏览器不支持 audio 元素。
        </audio>
    </body>
</html>

bahagian seterusnya

fail baharu

<!Doctype html>
<html>
<head>
<title>HTML5多媒体</title>
<meta charset="utf-8"/>
<script> 
function onInputFileChange() { 
var file = document.getElementById('file').files[0]; 
var url = URL.createObjectURL(file); 
console.log(url); 
document.getElementById("audio_id").src = url; 
} 
</script> 
</head>
<body> 
<input type="file" id="file" onchange="onInputFileChange()"> 
<audio id="audio_id" controls autoplay loop>Your browser can't support HTML5 Audio</audio> 
</body> 
</html>

serahkan Tetapkan Semula Kod

Operasi automatik

Skrin penuh