Thiết Kế: Nghe nhạc YouTube từ một danh sách

Bạn,

Nhân rảnh rỗi và có bạn Nhã hỏi một câu hỏi nhỏ, tôi viết bài này để giới thiệu thêm vài cái links hữu ích cho các bạn hiểu thêm hay muốn dùng Google's và tại sao tôi nảy ra ý tưởng là một cái "mashup" về YouTube trong Blogger.

Cách đây vài tháng, tôi tìm ra được một Youtube của một người bên Đài Loan, chứa rất nhiều nhạc Paul Mauriat, trong đó hơn một nửa là nhạc hiếm, nhiều bài tôi chưa từng nghe.

http://www.youtube.com/profile?user=o1160507#p/u/6/jxwkhbxO2V0

Lúc đó tôi cũng i-tờ về YouTube, chỉ biết dùng embed code rồi mang về lắp từng bài, mỗi khi thấy có bài hay. Kiểu này mang mấy cái embed này về mà lắp 300+ bài chắc chết! Lại tốn nhiều công sức nữa!

Cùng lúc đang mê nhạc Paul trở lại đó, thì tôi lại tìm ra một trang nhạc khác, có đầy đủ Paul's discography:

http://www.soundtrackfan.com/pmauriat/discos/discografia-referencial-visual.html

Thấy đẹp là tôi muốn rinh về ngay, và đã in ra một tập nhạc thật đẹp để ngắm, nhưng rồi tôi nghĩ, nếu mình ấn vào một bài, mà nghe được ngay, rồi ấn vào link khác, nó sẽ đổi nhạc, nhưng vẫn chung một trang đang xem, thì hay biết mấy. Nghĩ là đi tìm dụng cụ làm liền.

Như mọi khi, muốn viết tiện ích cho Goggle, thì phải vào trang này:

http://code.google.com/intl/en/

Viết cho YouTube thì phải lần mò đến trang này:

http://code.google.com/intl/en/apis/youtube/overview.html

Lựa các trang để tìm ra trang thích hợp, thì tôi tới trang này:

http://code.google.com/intl/en/apis/youtube/js_api_reference.html

Thế là in ra để "ngâm cứu". Sau một ngày tìm hiểu thì tôi đã hiểu sơ sơ cách gắn. Bước kế tiếp là gắn thử.

Đầu tiên là tôi đi tìm trang "demonstration" (demo)

http://code.google.com/intl/en/apis/youtube/youtube_player_demo.html

Công nhận cái trang này chỉ rất nhiều cách để thay đổi Youtube video. Tôi bèn in ra code để xem, thì thấy cũng OK, chỉ cái là nó nhiều thứ linh tinh quá. May thay, tôi nhớ Google có một cái tool rất "cool", đó là Google Code Playground, cho phép bạn code thử trên ô trên, và máy sẽ hiện kết quả trên ô dưới. (Bạn phải dùng Firefox để access được trang này.)

http://code.google.com/apis/ajax/playground/?exp=youtube#simple_embed

Tôi dòm vào cái code, thì thấy nó thật đơn giản, đơn giản hơn nhiều cái HTML code demo 10+ trang mà tôi đã in.

Nếu bạn ấn vào nút Edit HTML trong góc phải bên trên, bạn sẽ thấy toàn bộ mã, đây là căn bản mã mà tôi dùng để lắp ráp trang mashup sau này.

Đó là "lịch sử hình thành" của mashup. Sau đây là giải thích sơ ý nghĩa của từng bước của post trước:

http://hoctroviet.blogspot.com/2010/05/nghe-nhac-youtube-tu-mot-danh-sach-take.html

1. Đoạn mã này dùng để "load" swfobject, version 2.1, cũng như load

<script src='http://www.google.com/jsapi' type="text/javascript" />
<script type='text/javascript' >
google.load("swfobject", "2.1");
</script>

Câu script đầu thì làm cho variable "google" dùng được.
Câu thứ hai dùng để load swfobject, là phần mềm từ Adobe, dùng kỹ thuật Flash, để có thể load video vào. Nếu không có dòng này, thì dòng dưới #3 swfobject.embedSWF("http://www.youtube.com ... không thực hiện được. Ngoài ra, hai câu scripts này phải nằm trong phần head, cho máy laod trước khi load phần body.

2. Ba câu sau là chỗ mà video sẽ hiện ra. Vì thế, nếu ta làm nó thành một widget, thì ta có thể dễ dàng di chuyển sau này khi dùng trang Layout->Page Elements. Nếu tinh ý hơn, như cách bạn Nhã đang dùng, ta cũng có thể chèn đoạn này vào trong một post. Tuy nhiên, ta chỉ chèn được một lần thôi, vì tên tag videoDiv là unique, nếu để 2 cái thì cái thứ hai không có tác dụng, chỉ đứng trơ ra đó mà dòm thôi.

<div id='content-links'>
<div id='videodiv'>Loading... </div>
</div>

3. Phần mã chính.

Trước tiên, khi browser loads trang mình vô memory, nó sẽ thấy lệnh này:

google.setOnLoadCallback(_run);

Câu này nói là nếu máy load được thì làm ơn load dùm một function có tên là _run.

Đây là function _run(), nó có thể làm nhiều việc, như load vài ba cái player chẳng hạn, nhưng trong application này nó chỉ load một function có tên là loadPlayer()

function _run() {
loadPlayer();
}

Đây là nội dung của loadPlayer()

function loadPlayer() {

var videoID = "jfivtWEAyrk";

var params = { allowScriptAccess: "always" };
var atts = { id: "ytPlayer" };
swfobject.embedSWF("http://www.youtube.com/v/"
+ videoID +
"&enablejsapi=1&playerapiid=player1",
"videodiv", "320", "270", "8", null, null, params,
atts);
}

Function này đại khái là nó muốn load một cái player, với video có tên là "jfivtWEAyrk", với chiều rộng là 320 pixels, chiều cao là 270 pixels.

Nếu máy load thành công thì hình sẽ hiện ra trong tag "videoDiv", còn không thì ta thấy dòng chữ Loading ... ở step 2 hoài.

Các giải thích khác mời bạn xem kỹ hơn ở đây http://code.google.com/intl/en/apis/youtube/js_api_reference.html

Nếu có hình hiện ra, máy cũng sẽ đọc tiếp được những lệnh mình muốn làm trong function onYouTubePlayerReady(playerId).
Function này cũng không là gì cao siêu hết, chỉ nhắn rằng nếu có gì trục trặc từ rày về sau (onError), thì gọi function onPlayerError() để nó tìm cách chữa.

function onYouTubePlayerReady(playerId)
{
ytPlayer = document.getElementById("ytPlayer");
ytPlayer.addEventListener("onError", "onPlayerError");
}

Thực ra thì cũng chả chữa được gì, nó chỉ tạo ra một cái info window, rồi báo tên lỗi mà thôi.

function onPlayerError(errorCode) {
alert("An error occured of type:" + errorCode);
}

Hai đoạn code chính tôi chèn vào để mashup, là:

function loadVideo(id, num) {
if(ytPlayer) {
if (!num) num=0;
ytPlayer.loadVideoById(id, num);
}
else
{

loadVideoWindow(id);
}
}

là một bản thêm thắt kha khá so với bản gốc trên trang hướng dẫn:

function play() {
if (ytplayer) {
ytplayer.playVideo();
}
}

Tôi viết rằng, nếu cái ytPlayer mà load thành công, thì trước tiên xem số giây (seconds) có gửi theo không, nếu không thì cho nó = zero, tức là ở đầu video. Đôi khi, một video có MC giới thiệu rườm rà, ta có thể dùng cách này để nghe thẳng nhạc mà khỏi phải nghe MC ca. Sau đó thì tôi gọi thẳng function ytPlayer.loadVideoById(id, num); để load và chơi bài nhạc với id, và num đã gửi kèm trong lệnh gọi, thí dụ như:

<li><a href="javascript:void(0);" onclick="loadVideo('4pOElMjQ-DI');">Tà Áo Xanh (Đoàn Chuẩn - Từ Linh) - Lệ Thu trình bày</a></li>

Ngoài ra, nếu ytPlayer load không thành công, tôi cũng sẽ mở được nó ra với lệnh gọi loadVideoWindow(id);:

function loadVideoWindow(id) {
var ytlink;
var newwindow;
ytlink = "http://www.youtube.com/watch?v=" + id;
newwindow = window.open(ytlink,'name','height=600,width=700');

if (window.focus) {newwindow.focus()}
}

trong đó, tôi thu xếp ("assembled") cái URL cho nó gọi Youtube link, rồi mở một cái window mới, chiều rộng 700, chiều cao 600 pixels. Sau rốt là làm cho window đó active bằng lệnh newwindow.focus().

Trong cái mashup trước, tôi còn tìm tòi để sửa Youtube video thành một thanh, chỉ có nghe chứ không thấy hình. Nếu bạn xem kỹ 3 cái CSS tags, thì thấy tôi tìm cách làm nó "bất động", lúc nào cũng nằm ở bên dưới tay phải. Hiện tôi còn để trang như vậy ở bên blog anh ngữ

http://hoctro.blogspot.com/

Bài mashup đó ở đây:

http://hoctroviet.blogspot.com/2010/02/embedding-youtube-music-ngay-trong.html

Sau khi làm xong mashup, tôi bỏ ra một vài ngày lắp trang này, chỉ mới hòan thành một nửa trên, dùng nhạc của anh bạn người Đài Loan, vì nửa dưới số lượng bài khó tìm hơn trên YouTube.
http://hoctroviet.blogspot.com/p/paul-mauriat.html

Cái mà tôi ghét nhất khi làm xong là phải coi xem hai bên Internet Explorer, và Firefox có work hay không. Vì Firefox là hậu thân của Netscape hồi "browser war" năm 95, trong đó Microsoft thắng cuộc, nên hai software này không hề muốn compatible với nhau chút nào, làm người developers như tôi phải khổ sở để làm vừa ý, cho mashup chạy được cả hai bên. Code javascipt thì đúng rồi, mà bên này chạy còn bên kia thì không, chả hiểu tại sao????
Đó là "sự tích Youtube mashup" :-) Như bạn thấy, cũng chẳng có gì là bí hiểm, nói như Steve Jobs trong bài diễn văn ông đọc chào mừng ra trường, là ông chỉ biết cách "connect the dots" thôi. Tôi có dịch bài đó ở đây, nhân mùa tan trường mời bạn cùng xem lại.

http://hoctroviet.blogspot.com/2009/11/ban-phai-tim-thay-ieu-ban-yeu-thich-loi.html

Chúc bạn một đầu tuần thật vui.

Hoctro.
5/3/2010

Thiết Kế

Thứ Hai, 3 tháng 5, 2010

Nghe nhạc YouTube từ một danh sách - Chuyện hậu trường

Không có nhận xét nào:

Đăng nhận xét