Trong những ngày cuối thu này thì mình cũng khá là bận rộn với 1 đống deadline, bài tập lớn ở trên trường. Nghe một bài nhạc yêu thích trên youtube sẽ giúp mình cảm thấy khá hơn rất nhiều. Hôm nay có dịp nên mình quyết định viết 1 bài blog chia sẻ một đoạn script nho nhỏ của mình là làm thế nào để lặp lại một đoạn nhạc yêu thích trên youtube. :)) Show Dạo gần đây, trên youtube mình hay xem 1 MV của anh Acy Xuân Tài, nghe nhạc thấy hay quá, nhạc nghe cuốn quá ! Các bạn có thể nghe thử ở link này:https://www.youtube.com/watch?v=uGR10-C_3vU Đặt vấn đềNếu dùng loop mặc định của Youtube thì sẽ nghe đi nghe lại cả bài. Tuy nhiên, mình chỉ thích nghe đoạn hát thôi, không thích nghe đoạn intro và outro ở đầu. Vì vậy mình viết 1 đoạn script nho nhỏ, paste vào console để thực hiện thủ đoạn này, tiện share với mọi người luôn. Đoạn Source code: function simpleLoop(startTime, endTime) { // TODO: Check valid endtime console.log('-- Run here') var ytplayer = document.getElementById("movie_player"); var currentTime = ytplayer.getCurrentTime(); var isRunToStart = currentTime > startTime var suitableTimeout = endTime - startTime if (currentTime <= startTime || currentTime > endTime){ ytplayer.seekTo(startTime) } else { suitableTimeout = endTime - currentTime } console.log('>> Start timeout after: ', suitableTimeout * 1000) setTimeout(function () { simpleLoop(startTime, endTime) }, suitableTimeout * 1000) } simpleLoop(146, 364)Các bạn có thể dán đoạn script kia vào console trong DevTool của trình duyệt bằng cách nhấn phím F12 rồi chuyển sang tab console (nếu đang ở tab khác) Rồi sau đó các bạn thay thời gian mà bạn muốn lặp lại ở trong video vào hàm simpleLoop (startTime và endTime) , startTime là thời gian bắt đầu ; endTime là thời gian kết thúc nha. Lưu ý: Thời gian chạy trong đoạn script kia đơn vị là giây(second), nên các bạn thay thời gian muốn lặp thì hãy chuyển sang đơn vị 'giây' trước nha! Giải ThíchVà mình sẽ giải thích thuật toán của đoạn code kia, các bạn có thể hình dung qua sơ đồ sau:  Ngược lại, nếu thời gian hiện tại đang ở đoạn muốn nghe, thời gian timeout sẽ là từ thời điểm hiện tại cho tới thời điểm kết thúc. Sau khi tính toán được thời gian timeout, thực hiện gọi đệ quy lại chính hàm check này. Để cho tiện, mình lưu lại thành tool vào thanh bookmark bar của chrome. Đoạn code dưới đây có thêm phần nhập vào start time và end time, để bạn có thể dễ dàng sử dụng. Các bước lưu như sau:
2. Thay thế phần URL bằng đoạn code dưới đây javascript: !function () { var oldValue = localStorage.getItem("simple_loop_" + location.href); var input = prompt("Time range: start,end", oldValue || ""); var times = input.split(","); localStorage.setItem("simple_loop_" + location.href, input); if (times.length !== 2) { alert('Invalid format. Please check your input'); return; } var startTime = parseInt(times[0]); var endTime = parseInt(times[1]); function simpleLoop(startTime, endTime) { console.log('-- Run here'); var ytplayer = document.getElementById("movie_player"); var currentTime = ytplayer.getCurrentTime(); var suitableTimeout = endTime - startTime; if (currentTime <= startTime || currentTime > endTime) { ytplayer.seekTo(startTime); } else { suitableTimeout = endTime - currentTime; } console.log('>> Start timeout after: ', suitableTimeout * 1000); setTimeout(function () { simpleLoop(startTime, endTime); }, suitableTimeout * 1000); } simpleLoop(startTime, endTime); }();Mỗi khi sử dụng, bạn chỉ cần click vào bookmark, nhập thời gian muốn lặp lại. Đơn giản đúng không nào?Cảm ơn các bạn đã đọc đến đây và đừng quên nhấn đánh giá và share bài viết này cho mọi người cùng biết nha! Hẹn gặp các bạn trong những bài viết sau. |
