Thiết Kế: tháng 5 2010

Chủ Nhật, 23 tháng 5, 2010

The Carpenters' Anthology

Bạn,

Hôm qua tôi mới tậu được một quyển The Carpenters' anthology, có 43 bài nhạc, mà tôi đã nghe qua. Trước kia thì tôi đã có quyển The Greatest Hits của họ rồi, nhưng chỉ có 20 bài thôi. Lên piano dợt quyển mới này thì thấy đã quá, cách Richard Carpenter để hợp âm rất hay, họ hay dùng các hợp âm 11, nhưng họ ký âm với cái bass khác, thí dụ như F/G, thì mình đánh chord F, nhưng dùng bass nốt G, thành ra nó là chord G với quãng 7,9 và 11. Cả quyển sách toàn những cách đánh như vậy, nghe rất jazzy kiểu Carpenters.

Anyhow, tôi cũng có chút thời gian rảnh, nên đi qua trang chính cùa nhóm Carpenters rồi cut-and-paste các CD của họ về, rồi gắn cái YouTube mashup vô. Cũng tốn thì giờ lắm, nhưng bù lại tìm ra được nhiều bài hiếm, mà vì khi mua CD thì mua Greatest Hits, hay Compilations, chứ không mua riêng từng đĩa như tôi đã sưu tầm với the Beatles và ABBA, nên cũng sót vài (chục) bài chưa hề nghe.

Trang đã hoàn tất, có thì giờ mời bạn vào thưởng thức - từ LP đầu tay đến khi ban nhạc rã đám, cũng như vài CD compilations làm sau khi Karen qua đời (1983).

http://hoctroviet.blogspot.com/p/carpenters-danh-sach-bai-hat.html

Riêng các bài nhạc Giáng sinh trong link trên thì tôi để dành để các bạn tha hồ mà search từ YouTube, và cũng vì tôi đã mua cả sách lẫn 2CD nên cũng đã nghe rất nhiều lần. Thật thú vị, vì tôi là một Phật tử, mà lại rất thích nghe nhạc Giáng Sinh mỗi cuối năm, tối nào đi làm về cũng bật 103.5 FM KOST để nghe, và lần nào thế nào cũng có Karen Carpenter hát ít nhất là một bài.

Tôi ước gì Richard và A&M sẽ phát hành một CD set như Beatles và ABBA đã làm, để tôi có thể mua một lượt rồi thưởng thức với âm thanh remastered, thay vì phải settled down với âm thanh của YouTube.

Chúc bạn một ngày cuối tuần vui vẻ.

Hoctro.

Thứ Bảy, 22 tháng 5, 2010

Tải YouTube video về máy - Chuyển thành MP3

Bạn,
Nhu liệu sau đây cho phép bạn tải về một YouTube video, và sau đó chuyển được sang thành MP3 để nghe.

#1: tải nhu liệu về máy

http://youtubedownload.altervista.org/

#2: Chỉnh loại file để tải:

Sau khi nhu liệu đã sẵn sàng, bạn sẽ thấy giao diện rất dễ sử dụng. Có hai nút chính, một để tải về, một để chuyển dạng.

Ấn vào nút thứ hai "Convert ..." để thay đổi loại file để download

Sau đó, chọn "Iphone video (MPEG-4 MP4)", và các chọn lựa khác theo hình sau:

#3: Tải MP4 về máy:

Chuyển sang option "Download video from YouTube"

Tìm đến chỗ có youtube video mà bạn thích, rồi cut-and-paste cái link vào "Enter video url", rồi ấn OK. Máy sẽ hiện tiếp một window khác, ấn OK, rồi chọn chỗ trên hard drive để lưu giữ.

#4 Chuyển từ MP4 sang MP3:

Sau cùng, khi muốn chuyển sang mp3 thì ấn vào option "Convert ...", rồi đổi "Convert to" sang "MPEG Audio Layer 3 (MP3)". Ấn vào cái nút có 3 dấu chấm để chọn file sẽ chuyển.

Nên chứa mp3 cùng chỗ với mp4, để biết là file nào đã convert, file nào chưa.

Chúc bạn thành công.

Thứ Sáu, 21 tháng 5, 2010

Connie Francis - Forget Domani

Bạn,

My Dad mới tậu được một cái CD chạy được MP3, tôi hỏi ông có thích nghe nhạc gì không, thì ông nói nhớ tìm nhạc Connie Francis. Tôi thì thích nghe nhạc xưa 60-70, cỡ Frank Sinatra thôi, còn trước nữa thì chưa "đủ tuổi" :-) Nên nghe cái tên Connie Francis lạ hoắc, chắc là ca sĩ hát nhạc Pháp gì đây?! Rồi lên Google/YouTube coi thì hóa ra bà là một ca sĩ thời 60, có đi sang Việt Nam hát động viên cho quân đội Đồng Minh nữa. Cũng có nhiều bài tôi biết nữa, như Fascination, Que Sera Sera, v.v. Thôi rồi, tôi mê nhạc của ba tôi :-))))))))))))

Một bài này tôi đã nghe trước do Frank Sinatra hát, nhưng nghe Connie Francis nghe cũng hay không kém. Bài có tên là Forget Domani, vậy mà trước giờ tôi nghe Frank hát cứ tưởng rằng "forget the money", thiệt quê xệ.

Link tiếp theo sau đây là của một người trẻ 22 tuổi đang sống ở Phi Luật Tân, cũng thích bà Connie mới lạ và sưu tầm rất nhiều nhạc của bà, (làm tôi bớt cảm thấy "wierd" là mình mê nhạc xưa :-)

http://www.youtube.com/user/glamourous888#p/u/110/RyFl2-HE_Kg

Thứ Hai, 17 tháng 5, 2010

Widget "Bài Liên Quan" ( hay là "Các Bài Viết Cùng Chủ Đề")

Bạn,

Anh Trần Hùng có nhắn là tôi nên đăng lại widget tôi viết là "Bài Liên Quan", vậy tôi đăng nó lại ở đây. widget này cho ta xem những bài liên quan bằng cách dùng AJAX tìm những posts có cùng label rồi đăng chúng lên.

Bước 1: chèn mã này vào header:

Bước 2: chèn mã này vào phần body, giữa những widget khác (tôi có để ra một dòng trống để bạn chèn vào, như trong hình sau):

<b:widget id='Blog3' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='nextprev'>
</b:includable>
<b:includable id='backlinks' var='post'>
</b:includable>
<b:includable id='post' var='post'>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
</b:includable>
<b:includable id='status-message'>
</b:includable>
<b:includable id='feedLinks'>
</b:includable>
<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <h4 id='comment-post-message'><data:postCommentMsg/></h4>
    <p><data:blogCommentMessage/></p>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' style='display: none'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='auto' src='' width='100%'/>
    <data:post.iframeColorizer/>
  </div>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
</b:includable>
<b:includable id='comments' var='post'>
</b:includable>
<b:includable id='main'>



<div class='widget-content'>

<h4>Các Bài Viết Cùng Chủ Đề</h4>
<div id='data2007' style='padding:15px;'/><br/><br/>
<h6>Related Article Widget by <u><a href='http://hoctro.blogspot.com/2008/10/new-and-improved-related-articles.html'>Hoctro</a></u></h6>

<script type='text/javascript'>

// Incorporating modified by Jackbook to the next line, thank you very much.
var homeUrl = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 8;
var maxNumberOfLabels = 10;
var urlArray = new Array();
<b:if cond='data:blog.pageType == "item"'>
maxNumberOfPostsPerLabel = 15;
</b:if>
<b:if cond='data:blog.pageType == "item"'>
maxNumberOfLabels = 4;
</b:if>
var titleArray = new Array();
var titleTest = 0;

function relInitialize() {
var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";

var test = 0;
// Do not add identical labels from posts
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;

if (numLabel < maxLabels) {
      var url = homeUrl + 'feeds/posts/default/-/'
+ encodeURIComponent(textLabel);
      var feed = new google.feeds.Feed(url);
      feed.setNumEntries(maxNumberOfPostsPerLabel);
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("data2007");
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            titleTest = 0;
            for (var i = 0; i < titleArray.length; i++)
              if ( titleArray[i] == entry["title"] ) titleTest = 1;
            if (titleTest == 0 ) {
              titleArray.push(entry["title"]);
              var div = document.createElement('div');
              var a = document.createElement('a');
              a.href = entry["link"];
              // Adding an if statement to exclude current post.
              // Addition from Jackbook.com. Thank you
              if( a.href!=location.href ) {
                var txt = document.createTextNode(entry["title"]);
                a.appendChild(txt);
                div.appendChild(a);
                container.appendChild(div);
              } // if not home page
            }// if titleTest
          } // for
        }// if result is not error
      }); // feed.load

      numLabel++;
     }
    }
    </b:loop>
    </b:loop>
   }
   google.load("feeds", "1");
   google.setOnLoadCallback(relInitialize);
</script>
</div>

</b:includable>
</b:widget>

Thế là xong! Tôi có làm thử lại và thành công (xem cuối trang).

Chú ý: Khi làm thành công thì bạn sẽ thấy trên layout->page elements cái widget này là một Blog! không sao hết, vì đó là cách tôi dùng để lấy labels. Nếu bạn không thích dùng widget nữa thì vào edit html và xóa dòng in đậm trong hình sau, rồi save template:

Thứ Bảy, 15 tháng 5, 2010

Trích dịch cách soạn nhạc từ "Improvising Jazz"

Bạn,

Tôi đọc được đoạn này trong sách "Improvising Jazz" của Jerry Coker trang 15-16, dịch thoát để bạn cùng xem:

...

Những biến thể liên tiếp, ít ra là tương xứng, của nhạc đề (motifs) của người trình tấu nhạc jazz, tạo nên một ảnh hưởng rõ rệt và mật thiết trong tương quan giữa người nghe và người chơi nhạc. Richmond Browne, jazz pianist và là một thầy giáo dạy lý thuyết nhạc ở trường đại học Yale, có viết thư trao đổi với tôi như sau:

...

Người trình tấu phải thiết lập cho người nghe được ĐIỂM quan trọng là gì - gọi là motif nếu bạn thích dùng chữ này - rồi trình bày cho người nghe thấy được mình đã "thấy" được gì trong motif đó, trải rộng ra những liên quan từ motif, mà không bao giờ tạo người nghe có cảm giác là anh ta đã quên bẵng cái tương quan ấy.

Nói khác đi, tôi tin rằng sự lặp lại (repetition) là một quy tắc căn bản, chứ không phải là sự dùng biến thể (variety). Cũng không nên lạm dụng sự lặp lại này. Người nghe luôn luôn tìm cách đoán xem giai điệu sẽ phát triển ra sao; những phỏng đoán sát na (infinitesimal predictions) xem nốt hay câu nhạc sắp tới sẽ là một lặp lại của một cái gì đó, hay là một nốt hay câu hoàn toàn mới. Người chơi nhạc, do vậy luôn luôn hoặc khẳng định, hoặc chối bỏ những phỏng đoán này của người nghe. Theo ý chúng tôi (Richmond và Kraehenbuehl của trường Yale), người nghe phải đoán trúng khoảng 50% - chứ nếu người ấy lúc nào cũng đoán trúng hết thì sẽ dễ bị chán (bored); ngược lại nếu người ấy đoán sai hết thì cũng sẽ bỏ cuộc (nghe và đoán) rồi tuyên bố loại nhạc này "chẳng có trật tự gì ráo!" ("unorganized").

Vì thế, nếu người chơi dùng một câu lặp một vài lần, người nghe sẽ không còn chú ý nữa một khi anh đã đoán trúng câu tới sẽ là gì. Rồi khi câu nhạc tiếp tục với một ý mới, người nghe sẽ chú ý trở lại và sẽ thích thú xem coi câu mới này sẽ lặp lại bao lâu. Tương tự, nếu người chơi chẳng bao giờ lặp lại một câu nào hết, thì dù anh ta có óc tưởng tượng cao siêu cách mấy, người nghe sẽ kết luận rằng trò chơi đoán nhạc này chẳng bõ chơi, rằng người nghe sẽ chẳng thể đoán trúng cái nào hết, rồi họ sẽ không thèm nghe nhạc nữa.

Khác biệt nhiều quá cũng là một loại giống nhau (sameness): nhàm. Giống nhau nhiều quá thì cũng nhàm - chỉ có đôi khi làm khác đi thì mới thỏa mãn được người nghe.

http://books.google.com/books?id=vsgQ_eDT79AC&printsec=frontcover&source=gbs_v2_summary_r&cad=0#v=onepage&q&f=false

Thứ Sáu, 7 tháng 5, 2010

Only Yesterday - The Carpenters

Từ hồi cách đây 1 tuần tôi tự nhiên tìm ra cái link của nhóm The Carpenters, rồi hì hục cắt dán và in ra gần 60 trang các bài viết cảm nghĩ của Richard, cũng như các bài viết khác.

http://www.richardandkarencarpenter.com/recordings_rev.htm

Những "stories behind the songs" sao mà vui thiệt! Ngồi nghĩ lại, thì ra tôi mê nhiều nhạc Carpenters hơn tôi tưởng, có lẽ cũng 40-50 bài chứ không ít. Nếu xắp hạng bên nhạc ngoại thì họ đứng hạng 3 trong top 10 bands của tôi rồi, chỉ sau ABBA và the Beatles. Công nhận Karen thật là có "tiếng hát vượt thời gian", và không gian nữa, xuyên thẳng từ recording studio tới tận tai mình mà nghe rất đồng cảm.

Hậu 30-4, mời bà con cô bác nghe bài này để tin rằng một ngày mai vui tươi lộng lẫy sẽ tới, và đẹp như khu vườn Huntington Library (?) trên Pasadena, California nơi họ thâu hình.

Only yesterday I was sad and I was lonely.
You showed me the way to leave the past
and all its tears behind me.
Tomorrow may be even brighter than today,
since I threw my sadness away only yesterday.

Only Yesterday

Music by Richard Carpenter
Lyrics by John Bettis

After long enough of being alone,
everyone must face their share of loneliness.
In my own time nobody knew
the pain I was goin' through.
Waitin' was all my heart could do.
Hope was all I had until you came,
maybe you can't see how much you mean to me.
You were the dawn breaking the night,
the promise of morning light
filling the world surroundin' me.

(chorus)
When I hold you, baby, baby,
feels like maybe things will be all right.
Baby, baby, your love's made me free as a song
singin' for ever.
Only yesterday I was sad and I was lonely.
You showed me the way to leave the past
and all its tears behind me.
Tomorrow may be even brighter than today,
since I threw my sadness away only yesterday.

(instrumental and vocal bridge)

I have found my home here in your arms,
nowhere else on earth I'd really rather be.
Life waits for us, share it with me,
The best is about to be,
And so much is left for us to see.

repeat chorus and fade

Thứ Hai, 3 tháng 5, 2010

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

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

Chủ Nhật, 2 tháng 5, 2010

Nghe nhạc YouTube từ một danh sách (Take 2)

Bạn mến,

Tôi rất vừa ý với cái YouTube mashup tôi làm hồi tháng 2, nhưng tôi cũng thấy cách này khó lắp đặt. Sau đây tôi sẽ trình bày một cách khác, mà bạn chỉ thêm Blogger HTML code rất it, rồi chỉ cần lắp 3 cái HTML/Javascript widgets là xong.

1. Cho đoạn code này ngay trước tag </head> và save template.

Phần 1 này rất quan trọng, nó dùng để load một cái Flash object vào trang, nếu không làm bước này thì các bước sau không chạy được.

2. Sau đó, vào trang Layout->Page Elements. Ấn vào link Add a Gadget ở cột phụ:

Ấn vào trang HTML/Javascript

rồi cho vào đoạn mã sau:

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

rồi ấn nút Save.

3. Ấn vào Add a Gadget và chọn tiếp trang HTML/Javascript

Chèn vào đoạn mã sau:


<script type="text/javascript">

var ytPlayer;

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

}

function loadVideo(id, num) {
if(ytPlayer) {
if (!num) num=0;
ytPlayer.loadVideoById(id, num);
}
else 
{
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()}
}

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


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 _run() {
loadPlayer();
}

google.setOnLoadCallback(_run);

</script>

4. Ấn vào Add a Gadget và chọn tiếp trang HTML/Javascript

Chèn vào đoạn mã sau, mỗi đoạn tag list (li) là một bài nhạc, với ID lấy từ link của address của video, như tôi tô đậm ở hình sau



<ul>

<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>

<li><a href="javascript:void(0);" onclick="loadVideo('hwgtZ48joP4');">Mùa Thu Cho Em (Ngô Thụy Miên) - Thanh Hà trình bày</a></li>

</ul>

Ngoài ra, bạn còn có thể bắt đầu bài nhạc từ số giây, thí dụ như:
loadVideo('OdQDXs75Ulo',20);

và nếu bài nhạc không cho embed, tôi cũng có thể mở một window để xem. Bạn phải dùng một function mới là loadVideoWindow, (thay vì chỉ là loadVideo)

loadVideoWindow('Uqxo1SKB0z8');

Bây giờ bạn sẽ thấy layout có 3 cái HTML/Javascript widgets:

Nếu mọi sự tốt đẹp, bạn sẽ thấy bài nhạc được load, rồi khi bạn ấn vào một link thì YouTube sẽ thay bài đang hát bằng 1 bài mới.

Chúc bạn thành công. Có gì không hiểu thì cứ hỏi, nếu biết thì tôi chỉ ngay.

Thân mến,

Hoctro
2/5/2010