2012-02-15 35 views
7

Cách tốt nhất và trình duyệt chéo nào để phát tệp mp3 (rất ngắn) qua javascript? tôi đã cố gắng nhiều cách khác nhau nhưng luôn có một vấn đề ...Phát tệp mp3 bằng cách sử dụng javascript

EDIT 1:

Tôi không cần một cầu thủ "đầy đủ", tôi chỉ cần một chức năng hơn tôi có thể gọi mọi chuyện xảy ra

CHỈNH SỬA 2:

Ok, tôi đã giải thích tốt hơn vấn đề của mình. Máy chủ là một điện thoại thông minh được kết nối trong mạng LAN, nhưng không phải lúc nào cũng kết nối internet. Tôi muốn sử dụng mp3 vì tệp chỉ nặng 3kb (thay vì 60kb wav), nhưng nếu cơ chế phát tệp này quá "nặng" (một trình phát hoặc jquery.js), tôi nghĩ tốt hơn là nên sử dụng tệp wav. Các đề xuất khác?

+0

thẻ âm thanh html5 – Johan

+1

http://jplayer.org –

+0

@Johan Tôi đã thử thẻ âm thanh html5 với [this] (http://msdn.microsoft.com/en-us/library/gg589489 (v = vs.85) .aspx) mã, nhưng nó không hoạt động trên Chrome – supergiox

Trả lời

0

Tôi khuyên bạn nên sử dụng Flowplayer. Nó được viết bằng Flash và JavaScript và có dự phòng HTML5.

Sidenote: Trên tất cả các thiết bị iOS (iPad, v.v.), không có tự động phát.

5

Tải trang chỉ tải xuống trực tiếp vào tệp âm thanh. Phát hiện nếu trình duyệt hỗ trợ MP3. Nếu có, tăng dần việc tải xuống trực tiếp vào thẻ AUDIO. Dưới đây là một ví dụ:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Audio demo</title> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script> 
</head> 
<body> 
    <p id="audio"> 
     <a href="BadAppleEnglish.mp3">Listen &raquo;</a>   
    </p> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> 
    <script src="audio.js"></script> 
</body> 
</html> 

Và Javascript:

$(function() { 
var audioElement = $('#audio'), 
    href = audioElement.children('a').attr('href'); 
$.template('audioTemplate', '<audio src="${src}" controls>'); 
if (Modernizr.audio.mp3) { 
    audioElement.empty(); 
    $.tmpl('audioTemplate', {src: href}).appendTo(audioElement); 
} 
}); 

Tôi tưởng tượng rằng hầu hết các zillions của plugin chơi được xây dựng sẵn MP3 làm việc như thế này.

UPDATE:

Vì bạn đã chỉnh sửa câu hỏi để xác định rằng bạn muốn một giải pháp mà không sử dụng jQuery, tôi sẽ chỉ ra rằng viết lại này không sử dụng jQuery là tầm thường. Nó chỉ dài hơn và ít thanh lịch hơn. Hãy nhớ rằng các thư viện Javascript được tải từ CDN thường được trình duyệt lưu vào bộ nhớ cache.

+0

Tôi đã chỉnh sửa câu hỏi – supergiox

14

Sử dụng này:

new Audio('your/url/here').play() 

Các tài liệu cho việc này (HTMLAudioElement) có thể được tìm thấy tại MDN, lưu ý rằng hầu hết các điều khiển được thừa hưởng bởi HTMLMediaElement.

Các vấn đề liên quan