Cách nghe nhạc YouTube theo trang Hoctroviet

Bạn,

Theo lời yêu cầu của bạn HT, tôi "bật mí" cho các bạn (lần nữa) cách chèn mã vào trong trang nhà của bạn để bạn có thể nghe nhiều nhạc mà không cần phải chèn (embed) nhiều windows.

Lưu ý: Sáng nay (27 tháng 4) do hơi vội nên tôi chép thiếu hai dòng (chỗ chữ xanh bước 2), nếu bạn nào lỡ thử dùng mà không được cho tôi gửi lời xin lỗi. Tôi đã sửa lại và thử dùng mã mới thêm vào và lắp thành công trang này. Thời gian lắp ít hơn 5 phút nếu bạn từ từ làm, còn tôi vì biết chỗ nào lắp vào rồi thì chỉ tốn dưới 1 phút là xong. (Hoctro)

Bước 1: Mở trang Design, vào Edit HTML rồi chèn đoạn mã này ngay ở đầu:

<!-- Bước 1: bắt đầu chèn mã từ chỗ này -->
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5//themes/base/jquery.ui.all.css' rel='stylesheet'/>

<!-- Đây là CSS để sửa vị trí và các chiều ngang và dọc của youtube -->
<style>
#videoDiv { margin-right: 3px;}
#videoInfo {margin-left: 3px;}
#content-links {RIGHT: 5px; WIDTH: 480px; height: 380px; POSITION: fixed; BOTTOM: 6px}
</style>

<!-- Đây là các lệnh gọi các fuctions của các libraries chính -->
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load(&quot;swfobject&quot;, &quot;2.1&quot;);
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='http://www.google.com/jsapi' type='text/javascript'/>


<!-- Đây là youtube code -->
<script type='text/javascript'>//<![CDATA[

var urls = [];
var incr = 0;
var total = "";
var titles = [];
var skip = 0;

function getParams() {
  $('div.post-body a[onclick]').each(function(i) {
    urls[i] = $(this).attr('onclick');
    titles[i] = $(this).html();
    skip = 0;
  }); // each

  // alert(total);
}
// Callback main function
$(document).ready(function() {
  getParams() ;

  $('div.post-body a[onclick]').click(function() {
    var $element = $(this);
    updateHTML('videoHeader', $element.html());
  });
}); // function

//]]>
</script>


<script type='text/javascript'>
/*
* Change out the video that is playing
*/



// Update a particular HTML element with a new value
function updateHTML(elmId, value) {
document.getElementById(elmId).innerHTML = value;
}

// Make the Youtube player visible or not. Basically at loading time it
// should be off, and only be on whenever the first video is clicked.
function ytVisible(value) {
attr = (value == true) ? &quot;visible&quot; : &quot;hidden&quot;;
document.getElementById(&quot;ytPlayer&quot;).style.visibility = attr;
document.getElementById(&quot;content-links&quot;).style.visibility = attr;
}

 // Loads the selected video into the player.

function loadVideo(id, num) {

  if(ytplayer) {
    ytVisible(true);
    if (!num) num=0;
    ytplayer.loadVideoById(id, num);
    //updateHTML(&#39;videoHeader&#39;, &quot;&quot;);
  }
  else // Flash not allowed, call loadVideoWindow
  {
    loadVideoWindow(id);
  }
}

// Open a new window in case the video doesn&#39;t allow embedding
// or for peaceful degradation purposes
function loadVideoWindow(id) {
  var ytlink;
  var newwindow;
  ytlink = &quot;http://www.youtube.com/watch?v=&quot; + id;
  newwindow=window.open(ytlink,&#39;name&#39;,&#39;height=600,width=700&#39;);
  if (window.focus) {newwindow.focus()}
  }
// This function is called when an error is thrown by the player
function onPlayerError(errorCode) {
  skip++;
  if (skip &lt; 5) genRandom();
 // alert(&quot;An error occured of type:&quot; + errorCode);
}

function genRandom() {
  var randomNumber=Math.floor(Math.random()*(urls.length-1));
  urls[randomNumber].apply();
  updateHTML(&#39;videoHeader&#39;, titles[randomNumber]);
}
// This function is called when an error is thrown by the player
function onStateChange(errorCode) {
 if (errorCode == 0) { // current vid is ended
   // Best line ever!!!
   genRandom();
  }
}

// This function is automatically called by the player once it loads
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById(&quot;ytPlayer&quot;);
ytplayer.addEventListener(&quot;onError&quot;, &quot;onPlayerError&quot;);
ytplayer.addEventListener(&quot;onStateChange&quot;, &quot;onStateChange&quot;);
ytVisible(false);

}


// The &quot;main method&quot; of this sample. Called when someone clicks &quot;Run&quot;.
function loadPlayer() {
// The video to load
var videoID = &quot;aym9D3xYzrs&quot;
// Lets Flash from another domain call JavaScript
var params = { allowScriptAccess: &quot;always&quot; };
// The element id of the Flash embed
var atts = { id: &quot;ytPlayer&quot; };
// All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
swfobject.embedSWF(&quot;http://www.youtube.com/v/&quot; + videoID +
&quot;&amp;enablejsapi=1&amp;border=1&amp;color1=0x2b405b&amp;color2=0x6b8ab6&amp;playerapiid=player1&quot;, &quot;videoDiv&quot;, &quot;480&quot;, &quot;350&quot;, &quot;8&quot;, null, null, params, atts);

}
function _run() {
loadPlayer();

}
google.setOnLoadCallback(_run);


</script>

<!-- Hết bước 1 -->

Tiếp theo, thêm vào bước 2 ở gần cuối khung, ngay trước trang tag /body:

<!-- Bước 2: Chèn một table chứa mã để hiển thị video -->

<div id='content-links'>
<div style='background-color:#000;'>

<table align='center' width='90%'>
<tr>
<td align='left' width='120%'>
<b><span id='videoHeader' style='color:#fff;'>...</span></b>   
</td>
<td align='right' width='20%'><a href='javascript:void(0);' onclick='genRandom();' style='color:#fff;'>  Skip</a></td>
</tr>
</table>
</div>
<div id='videoDiv'>Loading... </div>
</div>

<!-- Hết bước 2 - Nhớ chèn toàn bộ bước này trước tag /body -->

Bước 3: Cách tạo các links chứa bài:

Quy tắc #1: các bài phải nằm trong một div có class="post-body" mới chạy liên tục được. Nếu các nhãn nằm trong thân bài thì khỏi cần làm điều này vì thân bài đã là class="post-body" rồi.

Thí dụ như các links sau là thân bài, nên khỏi cần chèn (hình lấy từ trang nhạc Paul Mauriat)

còn các links sau phải chèn div với class="post-body" vì là một widget ngoài phần "body". Hình lấy từ widget "Raymond Lefevre" tôi mới lắp thêm.

<div class="post-body" >

<ul>
<li><a href="javascript:void(0);" onclick="loadVideo('9bGyrIciQHk');">VIENS VIENS </a></li>

<li><a href="javascript:void(0);" onclick="loadVideo('Ni2UKwfsZEQ');">TU TE RECONNAITRAS </a></li>

<li><a href="javascript:void(0);" onclick="loadVideo('NUXkAnEq7VI');">MY LOVE </a></li>

<li><a href="javascript:void(0);" onclick="loadVideo('D4Exp08zZXQ');">UN GRANDE AMORE E NIENTE PIU </a></li>

<li><a href="javascript:void(0);" onclick="loadVideo('J3SJ0RwXTqM');">REVIENS MON AMOUR REVIENS </a></li>

<li><a href="javascript:void(0);" onclick="loadVideo('WmhOn2RXys0');">NOUS IRONS A VERONE </a></li>

<li><a href="javascript:void(0);" onclick="loadVideo('sxI7jrqTrso')">Ainsi Soit-Il (1977)</a></li>
</ul>
</div>

Quy tắc #2: tạo các links.

Trong trang của mình, thêm vào tag "a" với href có cái ID của bài nhạc mình muốn nghe, thí dụ như:


<li><a href="javascript:void(0);" onclick="loadVideo('lOMhkGZdujY');">VOUS LES FEMMES (You the Women) (02:02)(Enrique Macias / P.-R. Blanc & Jacques Demarny)</a></li>


<li><a href="javascript:void(0);" onclick="loadVideo('-JutiwteRj8');">N'AVOUE JAMAIS (I Wanna Know) (02:01)(Guy Mardel - Francoise Dorin)</a></li>

Ngoài ra, bạn còn có thể bắt đầu bài nhạc từ số giây, thí dụ như bài Dancing on the ceiling dưới đây tôi cho bắt đầu từ 20 giây bằng cách them vào:

loadVideo('OdQDXs75Ulo',20);

và nếu bài nhạc không cho embed như bài Beat It, 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');

Hãy xem các biến thể đó ở đoạn sau:

"In 1985, a team of superstars gathered together to record the song"We Are the World". The song itself was a collaboration between Michael Jackson ((Beat It) and Lionel Richie (Hello, Dancing on the ceiling, etc.)"

Chúc bạn thành công, có gì thì hỏi ngay ở trang này.

Thân mến,

Hoctro