Cách tùy chỉnh trình phát âm thanh SoundCloud

Stream âm thanh đã xuất hiển thị trên Internet từ năm 1990 và ngày nay không có nhiều nền tảng stream âm thanh phổ biến để lựa chọn. Một trong các lựa chọn phổ biến nhất là SoundCloud. SoundCloud có một số ưu thế khác biệt so với những đối thủ cạnh tranh, bao gồm việc đơn giản nhúng trình phát.

Mặc dù trình phát được nhúng rất thân thiện và mang tính đảm bảo – bạn cũng có thể có thể đặt chúng trên thanh bên, trên bài đăng hoặc trang chủ – nhưng có các hạn chế khi tùy chỉnh trình phát. Bạn chỉ có thể thay đổi màu sắc và kích thước trước khi chia sẻ hoặc nhúng nó. Nếu bạn muốn đưa trình phát vào trang web của mình với thiết kế hoàn toàn mới, thì bạn cũng có thể có thể thích ToneDen.

ToneDen là bản build thư viện Javascript để tùy chỉnh trình phát âm thanh SoundCloud. Nó mang tính đáp ứng, có khả năng tùy biến và mở rộng. Bạn cũng có thể có thể thay đổi giao diện, kích hoạt keyboard event (sự kiện khi bạn nhấn một nút trên bàn phím), chọn hiển thị trình phát chỉ còn một track duy nhất hoặc với danh sách phát đầy đủ. Trong bài viết này, Quantrimang.com sẽ chỉ dẫn bạn cài đặt và tối ưu hóa cơ bản trình phát âm thanh SoundCloud. Cùng bắt đầu ngay thôi nào!

1. Cài đặt trình phát

Để có được trình phát SoundCloud tùy chỉnh, bạn không cần bất kỳ script được nhúng nào từ trang SoundCloud. Tất cả những gì bạn cần làm chỉ là xác định một nhân tố với ID duy nhất sau đó thêm script được yêu cầu.

Ví dụ, bạn mong muốn thêm 1 trong số người sử dụng yêu mến từ SoundCloud, Regina Spektor, vào trang web của mình. Điều đầu tiên mà bạn sẽ khiến là tạo một div với ID duy nhất, giả sử là “player” chẳng hạn.

Sau đó, bạn thêm Javascript luôn phải có sau đây vào thẻ đóng (closing tag) của body:

      (function() { var script = document.createElement('script'); script.type = 'text/javascript'; script.async = true; script.src = 'http://sd.toneden.io/production/toneden.loader.js' var entry = document.getElementsByTagName('script')[0]; entry.parentNode.insertBefore(script, entry); }()); ToneDenReady = window.ToneDenReady || []; ToneDenReady.push(function() { // This is where all the action happens: ToneDen.player.create({ dom: '#player', urls: [ 'https://soundcloud.com/reginaspektor' ] }); });      

Hàm đầu tiên về cơ bản là gọi thư viện Javascript của ToneDen. Chỉ cần để tất cả như ngày nay và nếu bạn muốn host nguồn trên máy chủ của riêng mình, hãy lấy nó tại đây.

Hàm thứ hai là nơi bạn nên tham khảo tất cả các tài nguyên. Để hiển thị trình phát, cung cấp cho dom cùng ID như bạn đã xác định trước đó. Và để gọi nguồn âm thanh, bạn chỉ cần thêm urls với URL người sử dụng mà bạn muốn. Nếu bạn chỉ cần các track âm thanh được chọn, thì hãy kể cả các URL âm thanh như vậy:

   urls: [ 'https://soundcloud.com/reginaspektor/samson', 'https://soundcloud.com/reginaspektor/us', 'https://soundcloud.com/reginaspektor/alltherowboats', ]   

Mọi việc hoàn tất! Bây giờ bạn đã có được trình phát SoundClound đẹp mắt của mình.

2. Tùy chỉnh trình phát

Như đã đề cập, bạn cũng có thể tùy chỉnh trình phát ToneDen nếu bạn không thích tùy chọn mặc định. Để tùy chỉnh nó, chỉ cần cho dù là API liên quan trong hàm thứ hai. Xem qua trang tài liệu API tại https://github.com/ToneDen/Player#api để biết thêm chi tiết.

Đoạn snippet sau đây là bản demo cho chuyện sử dụng API đơn giản, như skin để thay đổi màu trình phát, single để thay đổi giao diện người sử dụng sao cho trông thật tối giản và visualizerType để hiển thị một loại trực giác hóa khác.

   ToneDenReady = window.ToneDenReady || []; ToneDenReady.push(function() { // This is where all the action happens: ToneDen.player.create({ dom: '#player', urls: [ 'https://soundcloud.com/reginaspektor/samson', 'https://soundcloud.com/reginaspektor/us', 'https://soundcloud.com/reginaspektor/alltherowboats', ], single: true, skin: 'dark', visualizerType: 'bars' }); });   

Trình phát của bạn bây giờ sẽ trông như thế này:

Nếu bạn mong muốn có nhiều trình phát trên trang, thật dễ dàng để tạo thêm một số ToneDen.player.create như vậy:

   ToneDenReady.push(function() { ToneDen.player.create({ dom: '#player1', urls: [ 'https://soundcloud.com/giraffage' ] }); ToneDen.player.create({ dom: '#player2', urls: [ 'https://soundcloud.com/teendaze' ] }); ToneDen.player.create({ dom: '#player3', urls: [ 'https://soundcloud.com/beat-culture' ] }); });   

Chỉ với một số code bổ sung, lúc này bạn có thể tạo phiên bản trình phát SoundCloud của riêng mình. Điều mà nhiều người dùng thích nhất từ ​​thư viện này là thiết kế tối giản và khả năng đơn giản tùy chỉnh. Bạn cũng có thể tích hợp trình phát này vào blog WordPress của mình với một số hướng dẫn đơn giản ở dưới trang ToneDen. Link tham khảo:

   https://www.toneden.io/player   

Chúc bạn thực hành thành công!

SoundCloud,SoundCloud Audio Player,cách tùy chỉnh SoundCloud Audio Player,trình phát âm thanh SoundCloud

Nội dung Cách tùy chỉnh trình phát âm thanh SoundCloud được tổng hợp sưu tầm biên tập bởi: Tin Học Trường Tín. Mọi ý kiến vui lòng gửi Liên Hệ cho truongtin.top để điều chỉnh. truongtin.top tks.