Cara Membuat Pemutar Audio HTML5 Khusus dengan Pemilih Berkas - Peteng Pikir : Artikel Seputar SEO, Film, Webiste, HTML, Gadget, dan Masih Banyak Lagi

Post Top Ad

Wednesday, 27 September 2017

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 tempat nomor dua dari semua proyek Codepen saya, yang kedua setelah Drag Files Into Browser Dari Desktop menggunakan Demo jQuery. Sebagai tindak lanjut, saya akan memberi perlakuan HTML5 Audio player yang sama sehingga kami dapat 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 membuat penangan kode untuk semua kontrol.

Inspirasi Dibalik File Picker

Saat membuat 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 bisa menempatkan beban yang cukup besar di server saya! Itu mendorong saya untuk menyediakan sarana bagi pengguna untuk memilih 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 bisa mengambil file yang dipilih dan memainkannya. Ternyata Anda tidak bisa. Tapi, ada cara menggunakan metode static.createObjectURL (). Bagian dari antarmuka URL, ini membuat URL berdasarkan file. Secara khusus, ini membuat referensi 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 memilih file, sebaiknya kita pastikan itu berisi audio dan bukan spreadsheet. Elemen AUDIO hadir dengan fungsi praktis yang disebut canPlayType () yang dapat digunakan untuk menentukan apakah file yang dipilih berisi data audio atau tidak. Untuk melakukan 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 seperti yang Anda harapkan. Ini bisa 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 pribadi saya adalah mendukung tes kebenaran / kesalahan pada hasilnya, seperti jika player.canPlayType (type) doSomething (). Ini juga mudah 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 kode 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 jika Anda mencoba memilih file yang tidak dapat dimainkan:
www.htmlgoodies.com

Memilih hasil file yang dapat dimainkan dalam pesan berikut:

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

Styling CSS

Dibutuhkan beberapa CSS yang cukup berat untuk membuat pemain kita terlihat sangat stylish! Kemudian lagi, banyak duplikasi untuk berbagai 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 kode JavaScript untuk membuat kerja pemutar audio kita. Sementara itu, jangan ragu untuk mencoba demo di Codepen. Ini berfungsi penuh, sehingga Anda bisa mendapatkan puncak menyelinap di kode bagian 2.

Sumber : www.htmlgoodies.com/

3 comments:

  1. Artikelnya sangat menarik gan, semoga bermanfaat buat yang membutuhkan, kunjungan baliknya di Layanan Internet Gratis

    ReplyDelete
  2. keren gan artikelnya sangat bermanfaat...

    ReplyDelete
  3. Wah, bgini rupanya cara membuatnya. Thanks for this article gan.

    ReplyDelete

Post Bottom Ad