Sau bài viết "Share source web TShop chuyên bán Laptop, điện thoại viết bằng PHP" thì hôm nay mình sẽ giới thiệu đến bạn thư viện javascript "playmusic" để chơi nhạc kèm lời bài hát cực cool. Cái này tặng người ấy thì khỏi phải bàn. Nếu share tặng người ấy để tỏ tình mà không thành công thì liên hệ mình tỏ tình dùm cho nhé. Đặc biệt source code có thể dễ dàng cấu hình để mở những bài hát mà bạn thích.
Dưới đây là các link demo trực tiếp để bạn có thể xem trước:
- Những năm tháng ấy - Hồ Hạ (có vietsub, chạy slide hình và đổi màu lyric)
- Phía sau một cô gái - Soobin Hoàng Sơn (tắt chức năng vietsub (làm gì cần đâu ^^), tắt chạy slide và tắt đổi màu lyric)
- Anh không xứng - Jay Chou
3 link trên là ví dụ cho thấy việc tủy chỉnh chức năng, giao diện đa dạng rất dễ dàng mà mình đã cố gắng code để nếu bạn bạn không rành HTML, CSS, Javascript vẫn có thể hiểu và tự chỉnh.
Sau đây là các bước hướng dẫn chi tiết cách chỉnh sửa bài hát, giao diện.
Bước 1: Tải source code demo về tại link sau https://drive.google.com/file/d/0BzQoiVv05yaIaGFMSmhjRGFKNG8/view?usp=sharing
Bước 2: Giải nén ra thì các bạn sẽ thấy 2 file index.html và phiasaumotcogai.html và 4 thư mục css, images, js, music như hình dưới (còn cái file debug.txt bạn xóa đi mình upload mà quên xóa thôi :)) )
Mở file index.html hoặc phiasaumotcogai.html bằng 1 Editor bất kỳ như Notepad, Notepad++, Visual Studio Code, ... để xem thử code bên trong file. Bài viết này mình sẽ mở file index.html để giới thiệu vì file này đã bật đầy đủ thêm 3 chức năng là vietsub, chạy slile hình và đổi màu nền lyric vì thế dễ dàng để mình hướng dẫn bạn.
Bước 3: Code bên trong file index.html nhìn khá dài nhỉ nhưng đừng lo lắng quá vì dài là do lời bài hát của file này dài thôi (bài hát tận 6 phút 11 giây mà @@).
Trong file này bạn cần sửa lại 1 số các giá trị là file nhạc, danh sách hình ảnh, nội dung hiển thị, danh sách lời bài hát, thời gian của bài hát và bật hoặc tắt 1 số chức năng.
Đầu tiên là sửa file nhạc. Bạn tìm đến thẻ audio như bên dưới
Các bạn thay thế src chỉ đến đường dẫn bài nhạc mà bạn chọn nhé.
Tiếp theo là sửa danh sách hình ảnh. Phía dưới thẻ audio bạn sẽ thấy danh sách các thẻ img. Đây chính là thẻ để hiển thị các slide hình khi bài hát đang mở.
Các bạn chỉ việc thêm hình hoặc xoá bớt hình và thay đổi giá trị src đến đường dẫn hình của bạn. Nếu bạn chỉ để 1 hình (1 thẻ img) thì tương đương với việc bạn đã tắt chức năng chạy slide hình giống file phiasaumotcogai.html mình chỉ để 1 hình đó.
Chú ý: Vì hình sẽ hiển thị toàn màn hình nên các bạn chọn những hình background kích cỡ >= 1028 x 768 px nhé
Về phần nội dung hiển thị thì bạn tìm trong thẻ <div class="container">. Các bạn có thể tuỳ ý chỉnh nội dung trong thẻ này. Trong ví dụ mình để tên bài hát và tất cả lời của bài còn bạn có thể ghi lời tỏ tình, nội dung nhạc phim, ... bất kỳ thứ gì ý nghĩa mà bạn muốn.
Tiếp theo là sửa danh sách lời bài hát (lyrics). Phần này thì đòi hỏi bạn phải kiên trì và chỉnh chu bằng cách mở nhạc lên và dán lời bài hát và thời gian lời bài hát đó xuất hiện (tính theo đơn vị là giây). Bạn sửa lời bài hát và thời gian hiển thị lời nằm trong đoạn lệnh phía dưới.
Bạn gán lời bài hát vào thuộc tính content, nếu bài hát nước ngoài và có vietsub thì bạn gán lời vietsub vào thược tính content2 không thì để giống như cũ (nhớ tránh xoá nhầm thuộc tính content2 nhé) và gán thời gian lời hiển thị vào thuộc tính showAt
Chú ý: Nếu lời bái hát ngắn hơn thì bạn xoá bớt các dòng { content: ... } và nếu lời bài hát dài hơn thì bạn tự thêm các dong {content: ... } nhé. Phần này bạn chỉnh sửa cẩn thận không được xoá thuộc tính content2 nhé.
Giờ là đến phần bật hoặc tắt 1 số chức năng trong trang.
Các bạn nhìn cuối trang có đoạn lệnh sau:
Ý nghĩa đoạn lệnh này mình đã giải thích trong code rồi nên không cần giải thích thêm. Bạn sửa lại cho đúng nhé.
Bước 4: Save hoặc Save as ra 1 file .html khác nếu muốn giữ file index.html nhé
Vậy là xong. Mở file lên cùng hưởng thụ thành quả và chia sẻ lên group cho mọi người cùng thưởng thực nhé 😉
Mọi thắc mắc các bạn comment dưới bài viết nhé.
Đừng quên theo dõi đăng ký nhận tin từ blog nhé vì sau này blog sẽ có rất nhiều bài viết hướng dẫn lập trình nhé bạn.
Trong file này bạn cần sửa lại 1 số các giá trị là file nhạc, danh sách hình ảnh, nội dung hiển thị, danh sách lời bài hát, thời gian của bài hát và bật hoặc tắt 1 số chức năng.
Đầu tiên là sửa file nhạc. Bạn tìm đến thẻ audio như bên dưới
<audio autoplay="autoplay">
<source src="music/nhungnamthangay.mp3" type="audio/mp3"> <!-- Chèn đường dẫn nhạc vào -->
</audio>
Các bạn thay thế src chỉ đến đường dẫn bài nhạc mà bạn chọn nhé.
Tiếp theo là sửa danh sách hình ảnh. Phía dưới thẻ audio bạn sẽ thấy danh sách các thẻ img. Đây chính là thẻ để hiển thị các slide hình khi bài hát đang mở.
<!-- Danh sách hình sẽ đổi trong bài hát. Nếu chỉ để 1 hình thì <=> tắt chức năng hình tự đổi-->
<img src="images/nhungnamthangay/slide-1.jpg" />
<img src="images/nhungnamthangay/slide-2.jpg" />
<img src="images/nhungnamthangay/slide-3.jpg" />
<img src="images/nhungnamthangay/slide-4.jpg" />
<img src="images/nhungnamthangay/slide-5.jpg" />
<img src="images/nhungnamthangay/slide-6.jpg" />
<img src="images/nhungnamthangay/slide-7.jpg" />
<img src="images/nhungnamthangay/slide-8.jpg" />
<img src="images/nhungnamthangay/slide-9.jpg" />
<img src="images/nhungnamthangay/slide-10.jpg" />
<img src="images/nhungnamthangay/slide-11.jpg" />
<img src="images/nhungnamthangay/slide-12.jpg" />
Các bạn chỉ việc thêm hình hoặc xoá bớt hình và thay đổi giá trị src đến đường dẫn hình của bạn. Nếu bạn chỉ để 1 hình (1 thẻ img) thì tương đương với việc bạn đã tắt chức năng chạy slide hình giống file phiasaumotcogai.html mình chỉ để 1 hình đó.
Chú ý: Vì hình sẽ hiển thị toàn màn hình nên các bạn chọn những hình background kích cỡ >= 1028 x 768 px nhé
Về phần nội dung hiển thị thì bạn tìm trong thẻ <div class="container">. Các bạn có thể tuỳ ý chỉnh nội dung trong thẻ này. Trong ví dụ mình để tên bài hát và tất cả lời của bài còn bạn có thể ghi lời tỏ tình, nội dung nhạc phim, ... bất kỳ thứ gì ý nghĩa mà bạn muốn.
Tiếp theo là sửa danh sách lời bài hát (lyrics). Phần này thì đòi hỏi bạn phải kiên trì và chỉnh chu bằng cách mở nhạc lên và dán lời bài hát và thời gian lời bài hát đó xuất hiện (tính theo đơn vị là giây). Bạn sửa lời bài hát và thời gian hiển thị lời nằm trong đoạn lệnh phía dưới.
var lyrics = [
{ content: "You hui dao zui chu de qi dian ji yi zhong ni qing se de lian", content2:"Lại trở về điểm xuất phát ban đầu, gương mặt non nớt của em trong ký ức ", showAt: 18 },
{ content: "Wo men zhong yu lai dao le zhe yi tian",content2:"Cuối cùng chúng ta cũng đi đến được ngày này ", showAt: 24 },
{ content: "Zhuo dian xia de lao zhao pian wu shu hui yi lian jie ",content2:"Bức ảnh cũ dưới mặt bản, biết bao hổi ức nối tiếp nhau ", showAt: 30 },
{ content: "Jin tian nan hai yao fu nuu hai zui hou de yue",content2:"Hôm nay cậu trai đi đến gặp cô gái trong buổi hẹn cuối cùng.", showAt: 36 },
{ content: "You hui dao zui chu de qi dian dai dai de zhan zai jing zi qian",content2:"Lại trở về điểm xuất phát ban đầu, ngốc nghếch đứng trước gương ", showAt: 42 },
{ content: "Ben zhuo ji shang hong se ling dai de jie ",content2:"Vụng về thắt chiếc cà vạt đỏ ", showAt: 48 },
{ content: "Jiang tou fa shu cheng da ren mo yang chuan shang yi shen shuai qi xi zhuang ",content2:"Chải tóc thành bộ dạng người lớn, mặc một bộ âu phục lịch lãm ", showAt: 53 },
{ content: "Deng hui er jian ni yi ding bi xiang xiang mei ",content2:"Lát nữa gặp em nhất định sẽ đẹp hơn cả ngay trong tưởng tượng ", showAt: 60 },
{ content: "Hao xiang zai hui dao na xie nian de shi guang ",content2:"Rất muốn lại được trở về thời gian của những năm tháng ấy ", showAt: 67 },
{ content: "Hui dao jiao shi zuo wei qian hou gu yi tao ni wen rou de ma",content2:"Trở về chỗ ngồi trước, chỗ ngổi sau trong lớp, cố ý để được em mắng dịu dàng.", showAt: 71 },
{ content: "Hei ban shang pai lie zu he ni she de jie kai ma",content2:"Dãy số trên bảng đen em có nỡ giải đáp không? ", showAt: 79 },
{ content: "Shei yu shei zuo ta you ai zhe ta",content2:"Ai ngồi cạnh ai, cậu ấy đã yêu cô ấy mất rồi. ", showAt: 85 },
{ content: "Na xie nian cuo guo de da yu na xie nian cuo guo de ai qing",content2:"Cơn mưa bỏ lại của những năm tháng ấy. Tình yêu bỏ lại của những năm tháng ấy ", showAt: 94 },
{ content: "Hao xiang yong bao ni yong bao cuo guo de yong qi ", content2:"Thật muốn ôm lấy em, ôm lấy dũng khí đã để trôi xa ",showAt: 100 },
{ content: "Ceng jing xiang zheng fu quan shi jie dao zui hou hui shou cai fa xian ",content2:"Đã từng muốn chinh phục cả thế giới nhưng đến cuối cùng quay đầu nhìn anh lại mới nhận ra ", showAt: 106 },
{ content: "Zhe shi jie di di dian dian quan bu dou shi ni ", content2:"Từng mảnh từng mảnh trong thế giới này đều là em.",showAt: 111 },
{ content: "Na xie nian cuo guo de da yu na xie nian cuo guo de ai qing ",content2:"Cơn mưa bỏ lại của những năm tháng ấy, tình yêu bỏ lại của những năm tháng ấy ", showAt: 118 },
{ content: "Hao xiang gao su ni gao su ni wo mei you wang ji ", content2:"Thật muốn nói với em rằng anh vẫn chưa hề quên ",showAt: 124 },
{ content: "Na tian wan shang man tian xing xing ping xing shi kong xia de yue ding ",content2:"Bầu trời đầy sao trong đêm hôm ấy và hẹn ước dưới vòm trời ", showAt: 130 },
{ content: "Zai yi ci xiang yu wo hui jin jin bao zhe ni ",content2:"Nếu được gặp lại em, anh sẽ ôm lấy em thật chặt ", showAt: 135 },
{ content: "Jin jin bao zhe ni ",content2:"Ôm chặt lấy em... ", showAt: 141 },
{ content: "You hui dao zui chu de qi dian dai dai de zhan zai jing zi qian",content2:"Lại trở về điểm xuất phát ban đầu, ngốc nghếch đứng trước gương ", showAt: 158 },
{ content: "Ben zhuo ji shang hong se ling dai de jie ", content2:"Vụng về thắt chiếc cà vạt đỏ",showAt: 164 },
{ content: "Jiang tou fa shu cheng da ren mo yang chuan shang yi shen shuai qi xi zhuang ",content2:"Chải tóc thành bộ dạng người lớn, mặc một bộ âu phục lịch lãm ", showAt: 169 },
{ content: "Deng hui er jian ni yi ding bi xiang xiang mei ",content2:"Lát nữa gặp em nhất định sẽ đẹp hơn cả ngay trong tưởng tượng ", showAt: 176 },
{ content: "Hao xiang zai hui dao na xie nian de shi guang ",content2:"Rất muốn lại được trở về thời gian của những năm tháng ấy ", showAt: 183 },
...
{ content: "Jin jin bao zhe ni ",content2:"Ôm chặt lấy em... ", showAt: 333 }
]
Bạn gán lời bài hát vào thuộc tính content, nếu bài hát nước ngoài và có vietsub thì bạn gán lời vietsub vào thược tính content2 không thì để giống như cũ (nhớ tránh xoá nhầm thuộc tính content2 nhé) và gán thời gian lời hiển thị vào thuộc tính showAt
Chú ý: Nếu lời bái hát ngắn hơn thì bạn xoá bớt các dòng { content: ... } và nếu lời bài hát dài hơn thì bạn tự thêm các dong {content: ... } nhé. Phần này bạn chỉnh sửa cẩn thận không được xoá thuộc tính content2 nhé.
Giờ là đến phần bật hoặc tắt 1 số chức năng trong trang.
Các bạn nhìn cuối trang có đoạn lệnh sau:
// Bật hoặc tắt vietsub đi kèm (nếu bài hát là nhạc Việt thì để chắc chắn để false thôi nhé vì làm gì có vietsub ^^)
var enablePlayWidthContent2 = true;
// Bật hoặc tắt thay đổi màu nền của lời bài hát
var enableChangeBackgroundLyric = true;
// Lời giới thiệu về bài hát
var introduction = "Các bạn đang nghe ca khúc trích trong phim Những năm tháng ấy. Design by Tuấn Nguyễn";
// thời lượng bài hát
var minuteOfMusic = 6;
var secondOfMucsic = 11;
Ý nghĩa đoạn lệnh này mình đã giải thích trong code rồi nên không cần giải thích thêm. Bạn sửa lại cho đúng nhé.
Bước 4: Save hoặc Save as ra 1 file .html khác nếu muốn giữ file index.html nhé
Vậy là xong. Mở file lên cùng hưởng thụ thành quả và chia sẻ lên group cho mọi người cùng thưởng thực nhé 😉
Mọi thắc mắc các bạn comment dưới bài viết nhé.
Đừng quên theo dõi đăng ký nhận tin từ blog nhé vì sau này blog sẽ có rất nhiều bài viết hướng dẫn lập trình nhé bạn.
EmoticonEmoticon