Cara Menambahkan Lagu Pada Halaman Web

Terkadang kita ingin menambahkan / memasukkan lagu pada halaman web. Biar kesannya lebih menarik, atau hanya sekedar menampilkan lagu favorit saat ini, ataupun alasan lain yang kadang-kadang suka tidak jelas. Apalagi saat ini ada banyak situs di internet yang memungkinkan untuk mengunduh jenis lagu secara *gratis*.


Kira-kira seperti ini yang saya maksudkan:

Cemetery Dance Club – The End Is Not Yet To Come

Masih ingat saya dulu pernah menggunakan Yahoo Media Player. Cara ini cukup mudah. Jadi saya hanya perlu memasukkan kode Javascript pada halaman web kita, lalu memasukan kode dengan link yang berisi file mp3

<a href="lagu.mp3">Putar Lagu 1</a>

Tapi nampaknya http://mediaplayer.yahoo.com/js sudah tidak aktif lagi.

Kalau menggunakan WordPress, bisa mencari plugin audio player untuk WordPress. Karena saya tidak menggunakan wordpress, maka harus mencari sendiri “plugin” yang sesuai dengan keinginan. Pertama-tama saya mencari di jsDelivr dengan keyword audio. Kenapa jsDelivr? Karena jsDelivr mempunyai fitur untuk me-muat beberapa file/script dengah satu http request. Sebenarnya biar lebih gampang aja sih. Contoh bisa dilihat dibagian bawah pada source halaman ini.
Oke, lanjut lagi. Hasil pencarian menampilkan 2 hasil, yaitu Audio5js dan Audiojs. Setelah melihat panduan cara penggunaan di website masing-masing, sepertinya saya lebih tertarik untuk menggunakan AudioJs.

Setelah melihat tutorial, untuk menggunakannya berarti dengan menambahkan file audiojs dari jsDelivr. Jadi kira-kira seperti ini:

<script src="https://cdn.jsdelivr.net/g/jquery,jquery.migrate,audiojs"></script>

Pada akhir html ditambahkan kode javascript berikut:

<script>
  audiojs.events.ready(function() {
    var as = audiojs.createAll();
  });
</script>

Jadi tinggal menambahkan lagu format mp3 di halaman kita seperti ini:

 <audio src="song1.mp3" preload="auto" />

Sesudah saya masukan tag audio tersebut, saya perhatikan sepertinya tidak ada image “play” di player. Sedangkan kalau kode javascript nya dipisah menjadi seperti ini:

<script src="https://cdn.jsdelivr.net/g/jquery,jquery.migrate"></script>
<script src="https://cdn.jsdelivr.net/audiojs/0.1/audio.min.js"></script>

icon “play” nya muncul. Mungkin ada yang kurang cocok sewaktu file-file javascript tersebut di combine.

Mudah bukan?

Setelah itu saya mencoba melihat beberapa tampilan dengan “Responsive Design View” di Firefox (ctrl+shift+m)

screenshot 320x480px

screenshot 480x320px

Saat melihat ini, saya merasa ada yang kurang sreg, sepertinya membuat halaman ini menjadi kurang ‘responsive’, jadi memutuskan untuk mencari ‘plugin’ lain agar tetap bisa sesuai dengan tujuan membuat situs ini tetap ‘responsive’.

Lalu dengan semangat saya kembali mencari dengan google, dan menemukan artikel yang menarik http://osvaldas.info/audio-player-responsive-and-touch-friendly. Menurut artikel tersebut saya tinggal memasukan file audioplayer.js (8KB) atau audioplayer.min.js (minified; 4KB).

Pada halaman tersebut juga ada demo, untuk memudahkan, saya mengambil kode css dan javascript dari source code demo tersebut.
Karena ini adalah plugin untuk jQuery, maka jangan lupa untuk memasukkan kode jQuery dan file audioplayer.min.js ke dalam kode html.

<script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.andremoreno.com/js/audioplayer.min.js"></script>
<script>
$( function() {
	$('audio').audioPlayer();
});
</script>

Lalu menambahkan kode css berikut ke dalam halaman web, agar tampilannya lebih menarik:

.audioplayer
{
	height:2.5em;
	color:#fff;
	text-shadow:1px 1px 0 #000;
	border:1px solid #222;
	position:relative;
	z-index:1;
	background:#333
}

.audioplayer-mini
{
	width:2.5em;
	margin:0 auto
}

.audioplayer > div
{
	position:absolute
}

.audioplayer-playpause
{
	width:2.5em;
	height:100%;
	text-align:left;
	text-indent:-9999px;
	cursor:pointer;
	z-index:2;
	top:0;
	left:0
}

.audioplayer:not(.audioplayer-mini) .audioplayer-playpause
{
	border-right:1px solid #555;
	border-right-color:rgba(255,255,255,.1)
}

.audioplayer-mini .audioplayer-playpause
{
	width:100%
}

.audioplayer-playpause:hover,.audioplayer-playpause:focus
{
	background-color:#222
}

.audioplayer-playpause a
{
	display:block
}

.audioplayer-stopped .audioplayer-playpause a
{
	width:0;
	height:0;
	border:.5em solid transparent;
	border-right:none;
	border-left-color:#fff;
	content:'';
	position:absolute;
	top:50%;
	left:50%;
	margin:-.5em 0 0 -.25em
}

.audioplayer-playing .audioplayer-playpause a
{
	width:.75em;
	height:.75em;
	position:absolute;
	top:50%;
	left:50%;
	margin:-.375em 0 0 -.375em
}

.audioplayer-playing .audioplayer-playpause a:before,.audioplayer-playing .audioplayer-playpause a:after
{
	width:40%;
	height:100%;
	background-color:#fff;
	content:'';
	position:absolute;
	top:0
}

.audioplayer-playing .audioplayer-playpause a:before
{
	left:0
}

.audioplayer-playing .audioplayer-playpause a:after
{
	right:0
}

.audioplayer-time
{
	width:4.375em;
	height:100%;
	line-height:2.375em;
	text-align:center;
	z-index:2;
	top:0
}

.audioplayer-time-current
{
	border-left:1px solid #111;
	border-left-color:rgba(0,0,0,.25);
	left:2.5em
}

.audioplayer-time-duration
{
	border-right:1px solid #555;
	border-right-color:rgba(255,255,255,.1);
	right:2.5em
}

.audioplayer-novolume .audioplayer-time-duration
{
	border-right:0;
	right:0
}

.audioplayer-bar
{
	height:.875em;
	background-color:#222;
	cursor:pointer;
	z-index:1;
	top:50%;
	right:6.875em;
	left:6.875em;
	margin-top:-.438em
}

.audioplayer-novolume .audioplayer-bar
{
	right:4.375em
}

.audioplayer-bar div
{
	width:0;
	height:100%;
	position:absolute;
	left:0;
	top:0
}

.audioplayer-bar-loaded
{
	background-color:#333;
	z-index:1
}

.audioplayer-bar-played
{
	background:#007fd1;
	z-index:2
}

.audioplayer-volume
{
	width:2.5em;
	height:100%;
	border-left:1px solid #111;
	border-left-color:rgba(0,0,0,.25);
	text-align:left;
	text-indent:-9999px;
	cursor:pointer;
	z-index:2;
	top:0;
	right:0
}

.audioplayer-volume:hover,.audioplayer-volume:focus
{
	background-color:#222
}

.audioplayer-volume-button
{
	width:100%;
	height:100%
}

.audioplayer-volume-button a
{
	width:.313em;
	height:.375em;
	background-color:#fff;
	display:block;
	position:relative;
	z-index:1;
	top:40%;
	left:35%
}

.audioplayer-volume-button a:before,.audioplayer-volume-button a:after
{
	content:'';
	position:absolute
}

.audioplayer-volume-button a:before
{
	width:0;
	height:0;
	border:.5em solid transparent;
	border-left:none;
	border-right-color:#fff;
	z-index:2;
	top:50%;
	right:-.25em;
	margin-top:-.5em
}

.audioplayer:not(.audioplayer-muted) .audioplayer-volume-button a:after
{
	width:.313em;
	height:.313em;
	border:.25em double #fff;
	border-width:.25em .25em 0 0;
	left:.563em;
	top:-.063em;
	-webkit-border-radius:0 .938em 0 0;
	-moz-border-radius:0 .938em 0 0;
	border-radius:0 .938em 0 0;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg)
}

.audioplayer-volume-adjust
{
	height:6.25em;
	cursor:default;
	position:absolute;
	left:0;
	right:-1px;
	top:-9999px;
	background:#333
}

.audioplayer-volume:not(:hover) .audioplayer-volume-adjust
{
	opacity:0
}

.audioplayer-volume:hover .audioplayer-volume-adjust
{
	top:auto;
	bottom:100%
}

.audioplayer-volume-adjust > div
{
	width:40%;
	height:80%;
	background-color:#222;
	cursor:pointer;
	position:relative;
	z-index:1;
	margin:30% auto 0
}

.audioplayer-volume-adjust div div
{
	width:100%;
	height:100%;
	position:absolute;
	bottom:0;
	left:0;
	background:#007fd1
}

.audioplayer-novolume .audioplayer-volume
{
	display:none
}

.audioplayer
{
	-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 0 1.25em rgba(0,0,0,.5);
	-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 0 1.25em rgba(0,0,0,.5);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 0 1.25em rgba(0,0,0,.5)
}

.audioplayer-volume-adjust
{
	-webkit-box-shadow:-2px -2px 2px rgba(0,0,0,.15),2px -2px 2px rgba(0,0,0,.15);
	-moz-box-shadow:-2px -2px 2px rgba(0,0,0,.15),2px -2px 2px rgba(0,0,0,.15);
	box-shadow:-2px -2px 2px rgba(0,0,0,.15),2px -2px 2px rgba(0,0,0,.15)
}

.audioplayer-bar,.audioplayer-volume-adjust > div
{
	-webkit-box-shadow:-1px -1px 0 rgba(0,0,0,.5),1px 1px 0 rgba(255,255,255,.1);
	-moz-box-shadow:-1px -1px 0 rgba(0,0,0,.5),1px 1px 0 rgba(255,255,255,.1);
	box-shadow:-1px -1px 0 rgba(0,0,0,.5),1px 1px 0 rgba(255,255,255,.1)
}

.audioplayer-volume-adjust div div,.audioplayer-bar-played
{
	-webkit-box-shadow:inset 0 0 5px rgba(255,255,255,.5);
	-moz-box-shadow:inset 0 0 5px rgba(255,255,255,.5);
	box-shadow:inset 0 0 5px rgba(255,255,255,.5)
}

.audioplayer-playpause,.audioplayer-volume a
{
	-webkit-filter:drop-shadow(1px 1px 0 #000);
	-moz-filter:drop-shadow(1px 1px 0 #000);
	-ms-filter:drop-shadow(1px 1px 0 #000);
	-o-filter:drop-shadow(1px 1px 0 #000);
	filter:drop-shadow(1px 1px 0 #000)
}

.audioplayer,.audioplayer-volume-adjust
{
	background:-webkit-gradient(linear,left top,left bottom,from(#444),to(#222));
	background:-webkit-linear-gradient(top,#444,#222);
	background:-moz-linear-gradient(top,#444,#222);
	background:-ms-radial-gradient(top,#444,#222);
	background:-o-linear-gradient(top,#444,#222);
	background:linear-gradient(to bottom,#444,#222)
}

.audioplayer-bar-played
{
	background:-webkit-gradient(linear,left top,right top,from(#007fd1),to(#c600ff));
	background:-webkit-linear-gradient(left,#007fd1,#c600ff);
	background:-moz-linear-gradient(left,#007fd1,#c600ff);
	background:-ms-radial-gradient(left,#007fd1,#c600ff);
	background:-o-linear-gradient(left,#007fd1,#c600ff);
	background:linear-gradient(to right,#007fd1,#c600ff)
}

.audioplayer-volume-adjust div div
{
	background:-webkit-gradient(linear,left bottom,left top,from(#007fd1),to(#c600ff));
	background:-webkit-linear-gradient(bottom,#007fd1,#c600ff);
	background:-moz-linear-gradient(bottom,#007fd1,#c600ff);
	background:-ms-radial-gradient(bottom,#007fd1,#c600ff);
	background:-o-linear-gradient(bottom,#007fd1,#c600ff);
	background:linear-gradient(to top,#007fd1,#c600ff)
}

.audioplayer-bar,.audioplayer-bar div,.audioplayer-volume-adjust div
{
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px
}

.audioplayer
{
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px
}

.audioplayer-volume-adjust
{
	-webkit-border-top-left-radius:2px;
	-webkit-border-top-right-radius:2px;
	-moz-border-radius-topleft:2px;
	-moz-border-radius-topright:2px;
	border-top-left-radius:2px;
	border-top-right-radius:2px
}

.audioplayer *,.audioplayer :before,.audioplayer :after
{
	-webkit-transition:color .25s ease,background-color .25s ease,opacity .5s ease;
	-moz-transition:color .25s ease,background-color .25s ease,opacity .5s ease;
	-ms-transition:color .25s ease,background-color .25s ease,opacity .5s ease;
	-o-transition:color .25s ease,background-color .25s ease,opacity .5s ease;
	transition:color .25s ease,background-color .25s ease,opacity .5s ease
}

Setelah css dan javascript selesai ditambahkan, langsung mencoba memasukkan kode audio seperti yang dicontohkan. Di contoh tersebut diatas terdapat 3 jenis file audio, yaitu wav, mp3, dan ogg. Saya pribadi rada malas untuk mengubah menjadi wav, jadi memutuskan untuk menggunakan 2 jenis file saja, yaitu mp3 dan ogg.

<audio preload="auto" controls>
    <source src="file_lagu.mp3" />
    <source src="file_lagu.ogg" />
</audio>

Perhatikan kemiripan dari nama kedua file dalam kode diatas, yang berbeda hanya pada bagian ekstensi file nya saja. Ini adalah bagian yang agak merepotkan. Jadi kita juga harus mengubah/mengkonvert file mp3 menjadi ogg dan mengupload kedua file (mp3 dan ogg) tersebut ke hosting. Kedua file tersebut saya ubah bitrate nya menjadi 64kbps agar lebih cepat(?) sewaktu streaming. Untuk konverter dari mp3 ke ogg saya menggunakan fre:ac.
ps: saat ini masih mencari audio converter yang mudah dan *free*.

Jadilah tampilannya seperti diatas. Tinggal klik icon “play” untuk mendengarkan lagu.

Sekian dulu postingan kali ini.

Terima Kasih 😀


Edit

2017-03-10: Tutorial ini saya gunakan pada situs ini yang sebelumnya yang menggunakan Jekyll, sedangkan saat ini andremoreno.com sudah menggunakan WordPress.

You Might Also Like

Comments