Memutar Audio dalam HTML

Saya ingin memutar file audio mp3 dalam HTML. Saya tidak ingin menampilkan keseluruhan pemutar dengan kontrol seperti Volume dll. Saya hanya memerlukan tombol putar/jeda, yang dirancang oleh saya, bukan desain inti dari beberapa pemutar, seperti yahoo player, atau google one.

Misalnya audio akan diputar otomatis. Saat sebuah tombol (mungkin gambar) diklik, tombol tersebut akan berhenti sejenak, dan saat gambar tersebut diklik lagi, audio akan diputar kembali.

Ada beberapa contoh di sini: http://www.w3schools.com/html/html_sounds.asp

Bisakah saya mengontrol salah satu dari mereka untuk memutar/berhenti dari kode JS?


html audio playback
person Sohail    schedule 27.12.2011    source sumber
comment
Sayangnya, menerapkannya sendiri merupakan mimpi buruk. Saya sarankan menggunakan plug-in untuk ini--tidak ada API Javascript resmi untuk audio.   -  person Peter Olson    schedule 27.12.2011
comment
flash akan menjadi satu-satunya alternatif untuk ini   -  person Joseph    schedule 27.12.2011

Jawaban (4)


arrow_upward
15
arrow_downward

Anda dapat menggunakan tag audio html5. Anda dapat menentukan kontrol Anda sendiri untuk pemutaran.

<audio preload="auto" autobuffer> 
  <source src="elvis.mp3" />
  <source src="elvis.wav" /> <!-- fallback if no mp3 support in browser -->
</audio>

Ini adalah solusi jQuery.

http://jsfiddle.net/QPW27/109/

Seperti inilah solusi non-jQuery Anda.

var foo = document.getElementById('player');
foo.pause();  //just bind play/pause to some onclick events on your page
foo.play();

Browser yang berbeda mendukung format audio yang berbeda. Anda dapat menentukan versi audio cadangan. Situs web ini memiliki bagan dukungan browser per Juli 2011.

person mrtsherman    schedule 27.12.2011

arrow_upward
2
arrow_downward

Mudah-mudahan, dalam beberapa tahun, API audio HTML5 akan didukung di lebih banyak browser, namun saat ini, memutar suara memerlukan banyak peretasan khusus browser agar semuanya berfungsi, atau ketergantungan pada plugin browser seperti flash.

Sementara itu, saya sarankan menggunakan SoundManager2. Ini cukup mudah untuk dikerjakan dan tidak akan menimbulkan banyak sakit kepala dibandingkan melakukannya sendiri.

person Peter Olson    schedule 27.12.2011

arrow_upward
1
arrow_downward

Audio.js sepertinya memiliki fitur gaya pemutar yang Anda cari, dengan degradasi yang bagus menjadi Flash jika browser tidak mendukung API audio baru.

person Aaron    schedule 27.12.2011

arrow_upward
0
arrow_downward

Anda dapat memutar audio dengan menggunakan tag sematan

<!DOCTYPE html>
<html>
<body>

<p><a href="/idhorse.mp3">Play mp3</a></p>
<p><a href="/idliar.wav">Play wav</a></p>

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

</body>
</html>
person chandru    schedule 12.12.2012