masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial H5 > HTML5 menggunakan teg Audio untuk mencapai kesan kemahiran tutorial _html5 penyegerakan lirik

HTML5 menggunakan teg Audio untuk mencapai kesan kemahiran tutorial _html5 penyegerakan lirik

WBOY
Lepaskan： 2016-05-16 15:51:56
asal
2523 orang telah melayarinya

Perkara yang paling berkuasa tentang HTML5 ialah pemprosesan fail media Contohnya, main balik video boleh dicapai dengan menggunakan tag vedio yang mudah. Begitu juga, terdapat teg yang sepadan untuk memproses fail audio dalam HTML5, iaitu, teg audio
HTML5 telah dikeluarkan sekian lama, tetapi teg audio di dalamnya hanya digunakan sekali, dan sudah tentu ia hanya untuk masukkan teg ini ke halaman. Kali ini saya hanya mengambil kesempatan untuk membantu rakan membuat beberapa halaman dan berlatih menggunakan tag audio.
Mula-mula anda perlu memasukkan tag audio ke dalam halaman Ambil perhatian bahawa adalah lebih baik untuk tidak menetapkan gelung='gelung' di sini. jika gelung ditetapkan kepada Jika gelung, atribut yang ditamatkan akan sentiasa palsu.
autoplay='autoplay' menetapkan halaman untuk memainkan muzik secara automatik selepas memuatkan Atribut pramuat dan autoplay mempunyai kesan yang sama Jika atribut autoplay muncul dalam teg, atribut pramuat akan diabaikan.
controls='controls' menetapkan bar kawalan untuk memaparkan muzik.

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <audio src="muzik/Semalam Sekali Lagi .mp3" id="aud" automain="automain" kawalan="kawalan" pramuat="auto"> 
  2. Pelayar anda tidak menyokong atribut audio, sila tukar penyemak imbas untuk menyemak imbas. 
  3. audio> 

Selepas anda mempunyai tag ini, tahniah, halaman anda kini boleh memainkan muzik. Tetapi ini akan menjadikan halaman itu terlalu membosankan, jadi saya menambah beberapa perkara pada halaman itu supaya lirik boleh dipaparkan pada halaman secara serentak dan muzik yang akan dimainkan juga boleh dipilih. Jadi mula-mula untuk mencapai kesan ini, kami perlu memuat turun beberapa fail lirik dalam format lrc, dan kemudian anda perlu memformat muzik. Kerana fail muzik pada mulanya kelihatan seperti ini


Kita perlu memasukkan setiap lirik ke dalam tatasusunan dua digit Selepas memformat, lirik akan menjadi seperti ini
Dilampirkan di sini ialah kod untuk memformat lirik

Kod XML/HTMLSalin kandungan ke papan keratan
  1. //Bahagian penyegerakan lirik
  2. fungsi parseLyric(teks) {
  3. //Pisahkan teks ke baris demi baris dan simpan dalam tatasusunan
  4. var garisan = teks.split('n'),
  5. //Ungkapan biasa yang digunakan untuk memadankan masa, hasil padanan adalah serupa dengan [xx:xx.xx]
  6. corak = /[d{2}:d{2}.d{2}]/g,
  7. //Array untuk menyimpan keputusan akhir
  8. hasil = [];
  9. //Alih keluar garisan tanpa masa
  10. sementara (!pattern.test(garisan[0])) {
  11. garisangarisan = lines.slice(1);
    12. };
    13. //Apabila menggunakan 'n' untuk menjana tatasusunan di atas, elemen terakhir dalam hasilnya ialah elemen kosong, yang akan dialih keluar di sini
    14. garisan[garisan.panjang - 1]
  14. .panjang === 0 && garisan.pop(); lines.forEach(function(v /*array element value*/ , i /*element index*/ , a /*array itself*/ ) {
  15. //Masa ekstrak [xx:xx.xx]
  16. var
    17. masa
  17. = v.padanan(corak), //Ekstrak lirik
    19. v
  19. nilai = v.ganti(corak, '' //Oleh kerana mungkin terdapat beberapa kali dalam satu baris, masa mungkin dalam bentuk [xx:xx.xx][xx:xx.xx][xx:xx.xx], yang perlu dipisahkan lagi
  20. masa.untukSetiap(fungsi(v1, i1, a1) {
  21. //Alih keluar kurungan segi empat sama dalam masa untuk mendapatkan xx:xx.xx
  22. var
    23. t
  23. = v1.slice(1, -1).split(':'); //Tolak hasil ke dalam tatasusunan terakhir
  24. result.push([parseInt(t[0], 10) * 60 parseFloat(t[1]), nilai]);
    25. });
    26. });
    27. //Akhir sekali, susun elemen dalam tatasusunan hasil mengikut masa supaya lirik boleh dipaparkan secara normal selepas menyimpan
    28. hasil.sort(fungsi(a, b) {
    29. kembali a[0] - b[0];
    30. });
    31. hasil pulangan;
    32. }
  33. Pada ketika ini, kami boleh menggunakan lirik setiap bahagian muzik dengan mudah. ​​Kami memerlukan fungsi untuk mendapatkan lirik dan memaparkannya pada halaman secara serentak, supaya muzik boleh ditukar secara normal. Kod dilampirkan di bawah.
Kod XML/HTML

Salin kandungan ke papan keratan

  1. fungsi fn(sgname){
  2. $.get('music/' sgname '.lrc',function(data){  
  3. var str=parseLyric(data);
    4. for(var
  4. i=0,li;i<str.length;i ){
  5. li=$('<li>' str[i][1] 'li>'); 
    6. $('#gc ul').tambah(li);
    7. }
    8. $('#aud')[0]
  8. .kemas kini tepat masa=fungsi(){//video Dicetuskan apabila kedudukan main balik semasa audio berubah
    9. untuk (var
  9. i = 0, l = str.panjang i < l i ) {
    10. jika (this.currentTime /*Masa main balik semasa*/
  10. > str[i][0]) {
    11. //Paparkan ke halaman
    12. $('#gc ul').css('atas',-i*40 200 'px'); //Alihkan lirik ke atas
    13. $('#gc ul li').css('color','#fff');
    14. $('#gc ul li:nth-child(' (i 1) ')').css('color','red'); //Serlahkan lirik yang sedang dimainkan
    15. }
    16. }
    17. if(this.ended){ //Tentukan sama ada muzik yang sedang dimainkan telah selesai dimainkan
    18. var
  18. lagu-lagu=$('.senarai_lagu li').panjang
    19. for(var
  19. i= 0,val;i<lagu-lagu;i ){
  20. val=$('.songs_list li:nth-child(' (i 1) ')').text();
    21. jika(
  21. val==sgname){
  22. i=(i==(lagu-1))?1:i 2; >
  23. sgname=$('.songs_list li:nth-child(' i ')').text(); //Tukar selepas muzik selesai memainkan Sekeping muzik $('#gc ul').empty(); //Kosongkan lirik
  24. $('#aud').attr('src','music/' sgname '.mp3');
  25. fn(sgname);
  26. kembali;
  27. }
  28. }
  29. }
  30. };
  31. });
  32. } fn($('.songs_list li:nth-child(1)').text());
  33. Sekarang di sini lirik muzik anda boleh dipaparkan pada halaman secara normal dan serentak. Tetapi masih ada satu perkara yang hilang, iaitu senarai muzik Saya berharap dapat mengklik pada muzik dalam senarai ini untuk memainkan muzik Kod tersebut dilampirkan di bawah.
Kod HTML



Kod XML/HTML

Salin kandungan ke papan keratan
  1. <div kelas="lagu_cnt" >    
  2. <ul kelas="senarai_lagu" >    
  3. <li>Semalam Sekali Lagi li>    
  4. <li>Anda Cantik li>    
  5. ul>    
  6. <butang kelas="sel_song" >点<br/>< br/>我butang>
  7. div>    
  8. <div id="gc" >    
  9. <ul>ul>    
  10. div>   

css代码

Kod XML/HTML复制内容到剪贴板
  1. #gc{    
  2. lebar: 400px;    
  3. tinggi: 400px;    
  4. latar belakang: lutsinar;    
  5. margin: 100px auto;    
  6. warna: #fff;    
  7. saiz fon: 18px;    
  8. limpahan: tersembunyi;    
  9. kedudukan: saudara;    
  10. }    
  11. #gc ul{    
  12. kedudukan: mutlak;    
  13. atas: 200px;    
  14. }    
  15. #gc ul li{    
  16. selaraskan teks: tengah;    
  17. tinggi: 40px;    
  18. ketinggian garisan: 40px;    
  19. }    
  20. .lagu_cnt{    
  21. terapung: kiri;    
  22. margin atas: 200px;    
  23. kedudukan: saudara;    
  24. }    
  25. .senarai_lagu{    
  26. warna latar belakang: rgba(0,0,0,.2);    
  27. jejari sempadan: 5px;    
  28. terapung: kiri;    
  29. lebar: 250px;    
  30. lapik: 15px;    
  31. margin-kiri: -280px;    
  32. }    
  33. .senarai_lagu li{    
  34. tinggi: 40px;    
  35. ketinggian garisan: 40px;    
  36. saiz fon: 16px;    
  37. warna: rgba(255,255,255,.8);    
  38. kursor: penunjuk;    
  39. }    
  40. .songs_list li:hover{    
  41. saiz fon: 20px;    
  42. warna: rgba(255,23,140,.6);    
  43. }    
  44. .sel_song{    
  45. kedudukan: mutlak;    
  46. atas: 50%;    
  47. lebar: 40px;    
  48. tinggi: 80px;    
  49. margin atas: -40px;    
  50. saiz fon: 16px;    
  51. selaraskan teks: tengah;    
  52. warna latar belakang: lutsinar;    
  53. sempadan: 1px pepejal #2DCB70;    
  54. berat fon: tebal;    
  55. kursor: penunjuk;    
  56. jejari sempadan: 3px;    
  57. fon-keluarga: sans-serif;    
  58. peralihan:semua 2s;    
  59. -moz-transition:semua 2s;    
  60. -webkit-transition:semua 2s;    
  61. -o-peralihan:semua 2s;    
  62. }    
  63. .sel_song:hover{    
  64. warna: #fff;    
  65. warna latar belakang: #2DCB70;    
  66. }    
  67. .senarai_lagu li.aktif{    
  68. warna: #f00;    
  69. }   

js代码

Kod XML/HTML复制内容到剪贴板
  1. $('.songs_list li:nth-child(1)').addClass('active');    
  2. $('.songs_cnt').mouseenter(function () {    
  3. var e=acara||window.event;    
  4. var teg= e.target||e.srcElement;    
  5. jika(tag.nodeName=='BUTTON'){    
  6. $('.songs_list').animate({'marginLeft':'0px'},'slow');    
  7. }    
  8. });    
  9. $('.songs_cnt').mouseleave(function () {    
  10. $('.songs_list').animate({'marginLeft':'-280px'},'slow');    
  11. });    
  12. $('.songs_list li').setiap(fungsi () {    
  13. $(ini).klik(fungsi () {    
  14. $('#aud').attr('src','music/' $(this).text() '.mp3');    
  15. $('#gc ul').kosong();    
  16. fn($(this).text());    
  17. $('.songs_list li').removeClass('active');    
  18. $(this).addClass('active');    
  19. });    
  20. })  

好了，到了这里，那么你的这个歌词同步的效果的一些功能差不多都有了，美作了，美作了，美作了，关了了他们一了歌词同步的效果今天也就到这里了。更多信息请登录脚本之家网站了解更多！

Label berkaitan：
audio html5
sumber：php.cn
Artikel sebelumnya：Penjelasan terperinci tentang teg