Cách tạo trình phát âm thanh có thể nhúng của riêng tôi // không phải flash thuần túy

Question

Chúng tôi hiện đang phát triển một cộng đồng dựa trên nội dung âm thanh do người dùng tạo. Công nghệ cơ bản để phát âm thanh sẽ là Soundmanager 2 là HTML5. Chúng tôi đã tạo giao diện trình phát của riêng mình dựa trên các tùy chọn SM2 jQuery.

Để làm cho các tệp mp3 được tải lên có thể nhúng được Tôi hiện đang tìm kiếm công nghệ phù hợp. Trình phát phải có thể phát trên thiết bị di động (loại trừ các trình phát flash thuần túy, tôi giả định). Rò rỉ giao thông nên tránh được.

Cách tiếp cận tốt nhất để tạo đoạn mã trình phát có thể nhúng có liên quan đến tính tương thích và bảo mật của trình duyệt chéo (và thiết bị chéo) là gì?

IMHO, đó là những lựa chọn:

• Nhúng với một thẻ (như Facebook cung cấp)
• Nhúng với một thẻ <script> (rằng "tiêm" mã máy nghe nhạc vào DOM).
• Chỉ cần đưa ra một đoạn mã HTML rút ngắn, với tất cả các liên kết được thực hiện tuyệt đối (CSS, JS, hình ảnh)

EDIT: Để tránh hiểu sai: Tôi đang nói về một mã nhúng có thể được cung cấp cho khách truy cập của chúng tôi, vì vậy họ có thể sử dụng trình phát của chúng tôi trên các trang web từ xa của họ. Có, như Youtube hoặc Soundcloud.

Answer 1

Tôi chưa sử dụng SM2, vì vậy tôi không thể nói điều đó.

Tuy nhiên, nếu jQuery là một tùy chọn, tôi đã may mắn với jquery.mb.miniAudioPlayer, dựa trên jPlayer.

Dưới đây là một ví dụ về số lượng tối thiểu của các đánh dấu/code yêu cầu:

<script type="text/javascript" src="inc/jquery/1.3.2.min.js"></script> 
<script type="text/javascript" src="inc/mbScrollable.js"></script> 
<script type="text/javascript"> 
    $(function(){ 
     $(".audio").mb_miniAudioPlayer({ 
     width:240, 
     inLine:false 
     }); 
    }); 
</script> 

<div id="myScroll"> 
    <a id="m1" 
     class="audio {ogg:'http://www.miaowmusic.com/ogg/Miaow-07-Bubble.ogg', 
     mp3:'http://www.miaowmusic.com/ogg/Miaow-07-Bubble.mp3'}" 
     href="javascript:void(0)">miaowmusic - Bubble (mp3/ogg) 
    </a> 
</div> 

(. Như được thấy trên this page -Click 'cách')

Hoặc nói cách khác, để sử dụng sự cố của bạn : có, có một thẻ <script> "chèn" mã trình phát vào DOM.