2011-12-27 46 views
7

Tôi muốn phát tệp âm thanh mp3 bằng HTML. Tôi không muốn hiển thị toàn bộ trình phát với các nút điều khiển như Âm lượng… Tôi chỉ cần nút phát/tạm dừng, Được thiết kế bởi tôi, không phải là thiết kế cốt lõi của một số trình phát, như trình phát yahoo hoặc google.Phát Âm thanh bằng HTML

Ví dụ: âm thanh sẽ tự động phát. Khi một nút (có thể là một hình ảnh) được nhấp vào nó sẽ tạm dừng, và khi hình ảnh đó được nhấp một lần nữa, âm thanh sẽ phát lại.

Có khá vài ví dụ ở đây: http://www.w3schools.com/html/html_sounds.asp

Tôi có thể kiểm soát bất kỳ trong số họ để chơi/dừng từ mã JS?

+1

Thật không may, thực hiện điều này bản thân là một chút của một cơn ác mộng. Tôi khuyên bạn nên sử dụng một plug-in cho việc này - chỉ đơn giản là không có API Javascript chính thức cho âm thanh. –

+1

flash sẽ là lựa chọn duy nhất cho điều này – Joseph

Trả lời

9

Bạn có thể sử dụng html5 audio tag. Bạn có thể chỉ định các điều khiển của riêng bạn để phát lại.

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

Đây là giải pháp jQuery.

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

Đây là giải pháp không phải jQuery của bạn.

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

Các trình duyệt khác nhau hỗ trợ các định dạng âm thanh khác nhau. Bạn có thể chỉ định các phiên bản âm thanh dự phòng. Trang web này có số điện thoại đẹp chart of browser support kể từ tháng 7 năm 2011.

1

Hy vọng rằng trong một vài năm, HTML5 audio API sẽ được hỗ trợ trên nhiều trình duyệt hơn, nhưng hiện tại, phát âm thanh yêu cầu rất nhiều trình duyệt cụ thể để làm việc hoặc phụ thuộc vào plugin trình duyệt như flash.

Trong thời gian chờ đợi, tôi khuyên bạn nên sử dụng SoundManager2. Nó khá dễ dàng để làm việc với và sẽ liên quan đến đau đầu ít hơn nhiều so với thực hiện nó cho mình.

1

Audio.js có vẻ như nó có các tính năng tạo kiểu người chơi mà bạn đang tìm kiếm, với sự xuống cấp nghiêm ngặt đối với Flash nếu trình duyệt không hỗ trợ API âm thanh mới.

0

Bạn có thể chơi âm thanh bằng cách sử dụng nhúng tag

<!DOCTYPE html> 
<html> 
<body> 

<p><a href="horse.mp3">Play mp3</a></p> 
<p><a href="liar.wav">Play wav</a></p> 

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

</body> 
</html>