Cara Membuat Pemutar Audio HTML5 Khusus dengan Pemilih Berkas

Pemutar Video HTML5 dengan demo Custom Controls Codepen yang menyertai Create Custom Controls untuk tutorial HTML5 Video Player Anda mendapat banyak cinta dari pengguna Codepen, mempromosikannya ke daerah nomor dua dari semua proyek Codepen saya, yang kedua sesudah Drag Files Into Browser Dari Desktop memakai Demo jQuery. Sebagai tindak lanjut, saya akan memberi perlakuan HTML5 Audio player yang sama sehingga kami sanggup memberikannya hal yang konsisten - dan bolehkah saya katakan, lebih menarik - lihat seluruh browser. Hari ini, kami akan melampirkan pemetik file yang memuat lagu dari perangkat pengguna, dan lain kali kami akan menciptakan penangan instruksi untuk semua kontrol.

Inspirasi Dibalik File Picker

Saat menciptakan demo, saya menyadari bahwa saya harus meng-host beberapa file audio di server Web saya. Bergantung pada berapa banyak orang yang mencoba pemainnya keluar, itu sanggup menempatkan beban yang cukup besar di server saya! Itu mendorong saya untuk menyediakan sarana bagi pengguna untuk menentukan file dari perangkat mereka sendiri melalui kontrol masukan file:

<input type="file" accept="audio/*"/> <div id="message"></div> <audio id="music" autoplay="autoplay">   Your browser does not support the audio format. </audio>  

Pada awalnya, saya tidak yakin apakah Anda sanggup mengambil file yang dipilih dan memainkannya. Ternyata Anda tidak bisa. Tapi, ada cara memakai metode static.createObjectURL (). Bagian dari antarmuka URL, ini menciptakan URL menurut file. Secara khusus, ini menciptakan tumpuan ke File (atau Blob)

                       // id for audio element var player = document.getElementById('music');   function playSelectedFile(event) {     var file = this.files[0];     player.src = URL.createObjectURL(file); }  var inputNode = document.querySelector('input');     inputNode.addEventListener('change', playSelectedFile, false); 

Menguji File untuk Konten Audio Jika kita membiarkan pengguna menentukan file, sebaiknya kita pastikan itu berisi audio dan bukan spreadsheet. Elemen AUDIO hadir dengan fungsi simpel yang disebut canPlayType () yang sanggup dipakai untuk menentukan apakah file yang dipilih berisi data audio atau tidak. Untuk melaksanakan itu, Anda harus melewatinya jenis file. Ini harus mengandung nilai seperti:

• video / ogg
• video / mp4
• video / webm
• audio / mpeg
• audio / ogg
• audio / mp4

Anehnya, canPlayType () mengembalikan sebuah string dan bukan boolean menyerupai yang Anda harapkan. Ini sanggup menjadi salah satu dari tiga nilai:

• "maybe" - browser kemungkinan besar mendukung jenis audio / video ini
• "maybe" - browser mungkin mendukung jenis audio / video ini
• "" - (empty string) browser tidak mendukung jenis audio / video ini

Banyak pengembang bertanya-tanya mengapa stringnya kosong. Pendapat langsung saya ialah mendukung tes kebenaran / kesalahan pada hasilnya, menyerupai kalau player.canPlayType (type) doSomething (). Ini juga gampang ditambahkan ke pesan seperti:

function playSelectedFile(event) {     var file    = this.files[0],         type    = file.type,         canPlay = player.canPlayType(type),         message = 'Can play type "' + type                  + '": ' + (canPlay ? canPlay : 'no');                      displayMessage(message, canPlay);          if (canPlay) player.src = URL.createObjectURL(file);     else         resetPlayer(); } 

Inilah instruksi displayMessage (). Ini mengatur teks pesan dan elemen class :

function displayMessage(message, canPlay) {     var element = document.querySelector('#message');     element.innerHTML = message;     element.className = canPlay ? 'info' : 'error'; } 

Inilah yang muncul kalau Anda mencoba menentukan file yang tidak sanggup dimainkan:

www.htmlgoodies.com

Memilih hasil file yang sanggup dimainkan dalam pesan berikut:

Kita tidak sanggup mendapat respons dari "mungkin" dari CanPlayType () karena akan memerlukan rincian perihal codec tertentu menyerupai "audio / ogg; codecs = vorbis" bersama dengan jenis file (yang tidak kita sediakan) untuk dikatakan yakin apakah browser sanggup memainkan tipe itu atau tidak. Dan bahkan dikala itu hanya berjalan sejauh "mungkin"!

Styling CSS

Dibutuhkan beberapa CSS yang cukup berat untuk menciptakan pemain kita terlihat sangat stylish! Kemudian lagi, banyak duplikasi untuk banyak sekali vendor browser.

/* General page stuff */ #audio_player, .info, .error, input {   display: block;   width: 427px;   margin: auto auto auto auto; }  .info {     background-color: aqua;      }  .error {     background-color: red;     color: white; }  /* Audio player styles start here */ #audio_player {   padding:2px 2px 1px 2px;   background-color:black;   border:2px solid darkgreen;   border-radius: 9px;   margin-top: 30px; }  button {   text-indent:-9999px;   width:16px;   height:18px;   border:none;   cursor:pointer;   background:transparent url('buttons.png') no-repeat 0 0;  }  .pause { background-position:-19px 0; } .stop { background-position:-38px 0; }  #volume-bar {   float:right;   width: 80px;   padding:0px 25px 0px 0px; } .mute { background-position:-95px 0; } .unmute { background-position:-114px 0; } .replay { background-position:-133px 0; }  progress {   color: green;   font-size: 12px;   width: 220px;   height: 12px;   border: none;   margin-right: 10px;   background: #434343;   border-radius: 9px; } progress::-moz-progress-bar {    color:green;   background:#434343;  }  progress[value]::-webkit-progress-bar {   background-color: #434343;   border-radius: 2px;   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; }  progress[value]::-webkit-progress-value {   background-color: green; }  input[type=range] {   -webkit-appearance: none;   width: 100%;   margin: 6.8px 0; } input[type=range]:focus {   outline: none; } input[type=range]::-webkit-slider-runnable-track {   width: 100%;   height: 4.4px;   cursor: pointer;   box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;   background: #205928;   border-radius: 1px;   border: 1.1px solid #18d501; } input[type=range]::-webkit-slider-thumb {   box-shadow: 2.6px 2.6px 3.7px #00aa00, 0px 0px 2.6px #00c300;   border: 2.5px solid #83e584;   height: 18px;   width: 9px;   border-radius: 3px;   background: #439643;   cursor: pointer;   -webkit-appearance: none;   margin-top: -7.9px; } input[type=range]:focus::-webkit-slider-runnable-track {   background: #276c30; } input[type=range]::-moz-range-track {   width: 100%;   height: 4.4px;   cursor: pointer;   box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;   background: #205928;   border-radius: 1px;   border: 1.1px solid #18d501; } input[type=range]::-moz-range-thumb {   box-shadow: 2.6px 2.6px 3.7px #00aa00, 0px 0px 2.6px #00c300;   border: 2.5px solid #83e584;   height: 18px;   width: 9px;   border-radius: 3px;   background: #439643;   cursor: pointer; } input[type=range]::-ms-track {   width: 100%;   height: 4.4px;   cursor: pointer;   background: transparent;   border-color: transparent;   color: transparent; } input[type=range]::-ms-fill-lower {   background: #194620;   border: 1.1px solid #18d501;   border-radius: 2px;   box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00; } input[type=range]::-ms-fill-upper {   background: #205928;   border: 1.1px solid #18d501;   border-radius: 2px;   box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00; } input[type=range]::-ms-thumb {   box-shadow: 2.6px 2.6px 3.7px #00aa00, 0px 0px 2.6px #00c300;   border: 2.5px solid #83e584;   height: 18px;   width: 9px;   border-radius: 3px;   background: #439643;   cursor: pointer;   height: 4.4px; } input[type=range]:focus::-ms-fill-lower {   background: #205928; } input[type=range]:focus::-ms-fill-upper {   background: #276c30; } 

Kesimpulan
Pada artikel berikutnya, kita akan mengikat kontrol ke beberapa instruksi JavaScript untuk menciptakan kerja pemutar audio kita. Sementara itu, jangan ragu untuk mencoba demo di Codepen. Ini berfungsi penuh, sehingga Anda sanggup mendapat puncak menyelinap di instruksi bab 2.

Sumber : www.htmlgoodies.com/