Bagaimana Embed MP3 File Audio Dalam Halaman Web

Pelajari cara menanamkan(embed) file MP3 (seperti lagu, musik atau podcast audio) pada halaman web sehingga pengunjung dapat mendengarkan audio di browser melalui Flash player tanpa memerlukan Quicktime atau Windows media player.

Embed MP3 File dengan Flash Players

Di sini kita mengexplore MP3 player berbasis flash dari Google dan Yahoo yang dalam ukuran kecil dan juga mudah menanamkan(embed) pada halaman web.

1. Google Reader MP3 Player

Google Reader memiliki MP3 player built-in yang hampir sama dengan Gmail player tetapi juga bekerja pada situs non-Google. Player ini memiliki kontrol volume, tidak ada branding Google dan auto-deteksi durasi dari file musik sehingga pembaca anda tahu berapa lama lagu itu akan bertahan. Berikut adalah contoh hidup diikuti dengan kode HTML embed:




Untuk menggunakan MP3 player ini di situs Web atau blog, copy-paste kode berikut dan ganti file_url dengan link ke file MP3 Anda.

code [script] :

<embed type="application/x-shockwave-flash" flashvars="audioUrl=file_url" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="400" height="27" quality="best"></embed>

2. Yahoo! MP3 Player

Jika Anda berpikir normal membosankan, cek ini. Yahoo! menawarkan generator kode (Mudah Listener) untuk membantu Anda membuat MP3 player berbasis Flash yang cocok dengan tema situs Anda warna dan tata letak.

Meskipun ini MP3 player Mudah,Tapi mengharuskan anda untuk melewati alamat halaman web yang berisi file MP3 (s), Anda dapat langsung melewati link MP3 dan akan bekerja dengan baik. Mendukung auto-play dan Anda dapat memutuskan di mana meta data yang terkait dengan file MP3 harus ditampilkan.

code [script] :

<embed src="http://webjay.org/flash/dark_player" width="400" height="40" wmode="transparent" flashVars="playlist_url=MP3_FILE_URL&amp;skin_color_1=-145,-89,-4,5&skin_color_2=-141,20,0,0" type="application/x-shockwave-flash" />

3. Yahoo! Media Player

Jika Anda mempertahankan blog MP3 atau menjalankan podcast dan teratur link ke file MP3, masuk akal sedikit untuk Mengembed Flash player terpisah dengan setiap file MP3. Karena itu akan merekomendasikan menggunakan Yahoo! Media Player yang otomatis mendeteksi link ke file MP3 di halaman web Anda dan menciptakan pemain tertanam untuk setiap link.

Yang harus Anda lakukan adalah memasukkan link berikut dalam template blog Anda dan semua hyperlink MP3 akan dikonversi menjadi MP3 player inline. Ini juga memiliki fitur shuffle dan pengunjung dapat dengan mudah melompat ke lagu dalam playlist.

code [script] :

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

4. Odeo MP3 Player

Odeo menawarkan MP3 player cukup mengesankan yang bekerja sempurna di halaman web serta pembaca RSS tapi masalah kecil adalah bahwa Odeo Player mengharuskan Anda untuk mengetik durasi pasti dari lagu dalam kode embed. Anda dapat mengabaikan langkah ini tapi kemudian progress bar tidak mencerminkan status benar ketika Anda memutar lagu. Dan tidak ada kontrol volume.

Untuk menggunakan MP3 player Odeo dalam situs web Anda, tambahkan kode berikut menggantikan MP3_FILE_URL dan DURATION dengan nilai-nilai yang relevan.

code [script] :

<embed type="application/x-shockwave-flash" src="http://www.odeo.com/flash/audio_player_standard_gray.swf" width="400" height="52" allowScriptAccess="always" wmode="transparent" flashvars="audio_duration=DURATION&amp;external_url=MP3_FILE_URL" />

Rangkuman: Dengan begitu banyak pilihan, bagaimana anda memilih MP3 player yang tepat untuk website Anda?

Sebagai minimalis, saya lebih memilih Google Reader pemutar MP3 karena menawarkan kontrol volume dan branding minimal. Tetapi jika Anda secara teratur menghubungkan ke file MP3, ini akan membuktikan rumit dan saya sarankan terintegrasi Yahoo! Media Player pada website Anda.


sumber : http://www.labnol.org

You have read this article Tutorial with the title Bagaimana Embed MP3 File Audio Dalam Halaman Web. You can bookmark this page URL http://elachelle89.blogspot.com/2011/02/bagaimana-embed-mp3-file-audio-dalam.html. Thanks!