Làm cách nào để nhúng âm thanh vào trang web?

Question

Tôi đã tìm kiếm câu trả lời cho lứa tuổi và tôi dường như không thể tìm thấy những gì tôi cần.

Tôi chưa bao giờ mã hóa bất kỳ thứ gì được kết nối với nội dung âm thanh.

Điều tôi muốn làm là nhúng các tệp nhạc trong một trang web (Có thứ gì đó a'la ít trình phát mp3 trên trang web). Tôi muốn khán giả có thể chơi, dừng các bài hát bằng cách sử dụng các bộ điều khiển tùy chỉnh.

Làm cách nào để mã các nút tùy chỉnh được tạo sao cho tất cả các nút này hoạt động tốt?

Tôi chỉ phải viết mã HTML và CSS (php, java v.v. còn lại cho người khác). Bạn sẽ khuyên tôi nên làm gì để tạo tính năng này trên mẫu?

Cảm ơn bạn =)

P.S.

tôi phải sử dụng XHTML 1.0 Transitional

Answer 1

Bạn có thể sử dụng nhiều thứ.

• Nếu bạn là một tiêu chuẩn junkie, bạn có thể sử dụng thẻ HTML5 <audio>:

Here is the official W3C specification for the audio tag.

Cách sử dụng:

<audio controls> 
<source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4" 
     type='audio/mp4'> 
<!-- The next two lines are only executed if the browser doesn't support MP4 files --> 
<source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga" 
     type='audio/ogg; codecs=vorbis'> 
<!-- The next line will only be executed if the browser doesn't support the <audio> tag--> 
<p>Your user agent does not support the HTML5 Audio element.</p> 
</audio> 

jsFiddle here.

• Hoặc, nếu bạn muốn hỗ trợ các trình duyệt cũ, bạn có thể sử dụng many of the free audio flash players available. Chẳng hạn như:

  • Dewplayer
  • MP3 Player (tên nhàm chán ... phải không? :))
  • Website Music Player (thậm chí còn nhàm chán hơn ... phải không?)
  • Zanorg Player

Lưu ý: Tôi không chắc chắn đó là những tốt nhất người, như tôi chưa bao giờ sử dụng một (chưa).

---

UPDATE: Như đã đề cập trong bình luận của câu trả lời khác, bạn đang sử dụng XHTML 1.0 Transitional. Bạn có thể nhận được <audio> để làm việc với một số hack.

---

UPDATE 2: Tôi chỉ nhớ một cách khác để làm âm thanh chơi. Điều này sẽ hoạt động trong XHTML !!! Điều này hoàn toàn tuân thủ các tiêu chuẩn.

Bạn sử dụng này Javascript:

var aud = document.createElement("iframe"); 
aud.setAttribute('src', "http://yoursite.com/youraudio.mp4"); // replace with actual file path 
aud.setAttribute('width', '1px'); 
aud.setAttribute('height', '1px'); 
aud.setAttribute('scrolling', 'no'); 
aud.style.border = "0px"; 
document.body.appendChild(aud); 

This is my answer to another question.

---

UPDATE 3: Để tùy chỉnh các điều khiển, bạn có thể sử dụng giống như this.

Answer 2

Nếu bạn đang sử dụng HTML 5, có các yếu tố <audio>.

On MDN:

Yếu tố audio được sử dụng để nhúng nội dung âm thanh trong một HTML hoặc tài liệu XHTML. Phần tử âm thanh đã được thêm vào như một phần của HTML5.

---

Cập nhật:

Để chơi âm thanh trong trình duyệt trong các phiên bản HTML trước 5 (bao gồm XHTML), bạn cần phải sử dụng một trong nhiều người chơi flash âm thanh.

Answer 3

Chắc chắn yếu tố HTML5 là con đường để đi. Có ít nhất cơ bản hỗ trợ cho nó trong các phiên bản gần đây nhất của hầu hết các trình duyệt:

http://caniuse.com/#feat=audio

Và nó cho phép để xác định những việc cần làm khi nguyên tố này không được hỗ trợ bởi trình duyệt.Ví dụ, bạn có thể thêm một liên kết đến một tập tin bằng cách thực hiện:

<audio controls src="intro.mp3"> 
    <a href="intro.mp3">Introduction to HTML5 (10:12) - MP3 - 3.2MB</a> 
</audio> 

Bạn có thể tìm thấy ví dụ này và biết thêm thông tin về các yếu tố âm thanh trong liên kết sau:

http://hacks.mozilla.org/2012/04/enhanceyourhtml5appwithaudio/

Cuối cùng, tốt tin tức được rằng dev Derby mozilla tháng Tư là về yếu tố này vì vậy đó là lẽ sẽ cung cấp vô số ví dụ tuyệt vời về cách tận dụng tối đa ra khỏi yếu tố này:

http://hacks.mozilla.org/2012/04/april-dev-derby-show-us-what-you-can-do-with-html5-audio/

Answer 4

Dưới đây là một giải pháp để thực hiện một máy nghe nhạc âm thanh dễ tiếp cận với hợp lệ xHTML và không xâm phạm nhờ javascript để W3C Web Audio API:

Phải làm gì:

1. Nếu trình duyệt có khả năng đọc, sau đó chúng tôi hiển thị điều khiển
2. Nếu trình duyệt không có khả năng đọc, chúng tôi chỉ làm cho một liên kết đến tập tin

Trước al l, chúng tôi kiểm tra nếu trình duyệt thực hiện API Web âm thanh:

if (typeof Audio === 'undefined') { 
    // abort 
} 

Sau đó chúng tôi instanciate một đối tượng Audio:

var player = new Audio('mysong.ogg'); 

Sau đó chúng ta có thể kiểm tra nếu trình duyệt có thể giải mã loại file:

if(!player.canPlayType('audio/ogg')) { 
    // abort 
} 

Hoặc thậm chí nếu nó có thể chơi các codec:

if(!player.canPlayType('audio/ogg; codecs="vorbis"')) { 
    // abort 
} 

Sau đó, chúng tôi có thể sử dụng player.play(), player.pause();

Tôi đã thực hiện một plugin JQuery nhỏ mà tôi gọi là nanodio để kiểm tra điều này.

Bạn có thể kiểm tra như thế nào nó hoạt động trên my demo page (xin lỗi, nhưng văn bản là trong tiếng Pháp: p)

Chỉ cần nhấp vào một liên kết để chơi, và nhấn một lần nữa để tạm dừng. Nếu trình duyệt có thể đọc nó nguyên bản, nó sẽ. Nếu không thể, nó sẽ tải xuống tệp.

Đây chỉ là một ví dụ nhỏ, nhưng bạn có thể cải thiện nó để sử dụng bất kỳ phần tử nào trên trang của bạn dưới dạng nút điều khiển hoặc tạo các nút trên trang web bằng javascript ... Bất kể bạn muốn gì.

Answer 5

Tôi phát hiện thấy IE hoặc Chrome bị tắt trên hầu hết các trường hợp này hoặc chúng yêu cầu thư viện bên ngoài. Tôi chỉ muốn chơi một MP3, và tôi thấy trang http://www.w3schools.com/html/html_sounds.asp rất hữu ích.

<audio controls> 
    <source src="horse.mp3" type="audio/mpeg"> 
    <embed height="50" width="100" src="horse.mp3"> 
</audio> 

Đã làm việc cho tôi trên trình duyệt mà tôi đã thử, nhưng tôi không có một số trình duyệt cũ vào thời điểm này.

Answer 6

<html> 

<head> 
    <H1> 
     Automatically play music files on your website when a page loads 
    </H1> 
</head> 

<body> 
    <embed src="YourMusic.mp3" autostart="true" loop="true" width="2" height="0"> 
    </embed> 
</body> 

</html>