Code Music Player Xịn Xò Từ A-Z | Thực hành JavaScript | Code trình phát nhạc
Ғылым және технология
👉 Xem Lộ Trình Học: fullstack.edu.vn/learning-paths
👉 Đăng Ký Học Offline Tại F8: short.f8team.dev/dang-ky-hoc-...
Trong video này mình sẽ hướng dẫn các bạn chi tiết từ bước để Code Music Player Xịn Xò Từ A-Z | Thực hành JavaScript | Code trình phát nhạc.
- Giải thích cách hoạt động của querySelector.bind(document): • Fn.bind() method trong...
- Link code HTML, CSS mẫu: codepen.io/ng-ngc-sn-the-bash...
- Link full code HTML, CSS, Javascript: codepen.io/ng-ngc-sn-the-bash...
- Link ảnh thiết kế: static.collectui.com/shots/36...
#hoclaptrinh #hoclaptrinhmienphi #javascript #frontend #backend #devops #f8
-------
☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: s.net.vn/D8kL
Công cụ viết CV xin việc chuyên nghiệp: mycv.vn
--------------
☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn: fullstack.edu.vn/courses/less...
Xây dựng giao diện với HTML, CSS: fullstack.edu.vn/courses/html...
Xây dựng web responsive: fullstack.edu.vn/courses/resp...
Lập trình Javascript cơ bản: fullstack.edu.vn/courses/java...
Lập trình Javascript nâng cao: fullstack.edu.vn/courses/java...
Làm việc với Terminal & Ubuntu: fullstack.edu.vn/courses/wind...
Xây Dựng Website với ReactJS: fullstack.edu.vn/courses/reactjs
Xây dựng web với Node & Express: fullstack.edu.vn/courses/nodejs
HTML, CSS tips: fullstack.edu.vn/courses/html...
Ứng dụng cảnh báo khi sờ lên mặt: fullstack.edu.vn/courses/tool...
Xem thêm tại: fullstack.edu.vn/courses
-------------------------------------
F8 Official
(c) Sơn Đặng
Website: fullstack.edu.vn
Facebook cá nhân: / sondnf8
Nhóm Học Lập Trình Web: / f8official
Email: contact@fullstack.edu.vn
© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức.
Пікірлер: 234
*Giải thích cách hoạt động của querySelector.bind(document): kzread.info/dash/bejne/aJ5txJSYdZaaerA.html Nhiệm vụ còn lại dành cho các bạn: 1. Hạn chế tối đa các bài hát bị lặp lại 2. Fix lỗi khi tua bài hát, click giữ một chút sẽ thấy lỗi, vì event updatetime nó liên tục chạy dẫn tới lỗi 3. Fix lỗi khi next tới 1-3 bài đầu danh sách thì không “scroll into view” 4. Lưu lại vị trí bài hát đang nghe, F5 lại ứng dụng không bị quay trở về bài đầu tiên 5. Thêm chức năng điều chỉnh âm lượng, lưu vị trí âm lượng người dùng đã chọn. Mặc định 100%
@thang8617
3 жыл бұрын
e chỉ biết fix cái số 2 😑
@nguyenphuongnam1232
3 жыл бұрын
@@thang8617 chia sẽ cách với bạn ơi
@baoduy7198
3 жыл бұрын
@@thang8617 quan tâm
@thang8617
3 жыл бұрын
Đơn giản mà. Đầu tiên tạo 1 biến boolean tên là isTimeupdate gán bằng true, sau đó đưa biến đó vào phần if trong progress.ontimeupdate. Tiếp theo tạo một sự kiện khi người dùng chạm vào thanh progress. Khi người dùng chạm vào sẽ gán isTimeupdate bằng false. Sau đó gán lại biến isTimeupdate bằng true trong progress.onchange khi người dùng đã tua xong thôi, hihi
@juhandvan
3 жыл бұрын
@@thang8617 Cái chức năng tua, sao mình test bằng cách fix giá trị mà nó vẫn không hoạt động nhỉ: progress.onchange = function (e) { audio.currentTime = 100; }; Mình nghĩ không phải do sự kiện audio.ontimeupdate vì mình comment nó lại rồi vẫn không được, không hiểu lý do là gì
Nhờ học khoá JavaScript của a, e có đủ kiến thức tự tin để học tiếp react. Respect
Cảm ơn anh và chúc anh một năm mới vui vẻ..mong anh có thật nhiều sức khỏe để ra nhiều ví dụ hơn nữa để mọi ng áp dụng kiến thức JavaScript vào ạ
Cảm ơn thầy vì năm vừa qua nhé, nhờ kênh thầy mn học đc rất nhiều, chúc thầy năm mới vui vẻ và nhiều sức khỏe bên gđ
Có thông báo em vào xem luôn. Em chúc anh Sơn năm mới mạnh khoẻ, vui vẻ và thành thành công nhé. Và sớm ra thêm nhiều khoá học bổ ích cho bọn em nhé 😊😊😊
chúc anh sơn năm mới vui vẻ, sự nghiệp thăng tiến, và quan trọng là ra clip đều đều :3
Chúc mừng năm mới anh Sơn, chúc anh càng ngày càng phát triển F8 tiến xa hơn
Cảm ơn vì những chia sẻ của a, năm mới e chúc anh nhiều sức khỏe và thành công hơn nhé! :D Mong rằng năm nay có thêm khóa react của a :3
Chúc anh cùng f8 năm mới thật nhiều sức khỏe, thành công ạ
Hay quá anh ơi. Thật ngưỡng mộ anh. Chúc anh năm mới nhiều sức khoẻ và gặp nhiều điều may mắn.
cuối cùng thì sau gần 5 tháng thì cũng tới được phần này rồi hơi chậm nhưng thật vui vì bản thận đã lỗ lực hết mình cảm ơn anh Sơn Đặng thật là nhiều ạ
quá xịn luôn anh ơi, mỗi lần xem video của anh là em lại biết thêm được vài kiến thức mới hehe
Chúc mừng năm mới anh ! Mong anh có nhiều sức khỏe vào niềm vui trong cuộc sống nhé
Hay anh ơi. Kênh của anh vừa học vừa thực hành luôn nên học đỡ nản mà rất cuốn
Món quà lì xì đầu năm rất ý nghĩa. Cám ơn anh Sơn nhiều và chúc cho F8 sẽ có một năm 2021 thành công rực rỡ. À a Sơn quê ở đâu vậy ạ
cảm ơn anh vì chia kiến thức , kĩ năng anh chia sẻ , chúc anh va gia đình năm mới thật nhiều sức khoẻ , thành công , hạnh phúc
Chúc anh một năm mới bình an, vui vẻ và hạnh phúc bên gia đình và người thân
Tuyệt vời quá anh, năm mới đặt mục tiêu gì là làm được mục tiêu đó nha các bạn.
Chờ mãi, cám ơn a Sơn nhiềuuuuuuuuuu
cảm ơn anh nhiều chúc mừng năm mới anh, mong anh luôn giữ được sức khỏe.
bài giảng của anh quá hay và chi tiết, cám ơn anh Sơn Đặng nhiều ^^
Chúc mừng năm mới a và mọi người nhé
Cám ơn anh, một video tuy dài nhưng vô cùng bổ ích vs những ai đam mê js như e,
Chúc mừng nắm mới a. Cảm ơn nhưng gì a đã chia sẻ năm 2020
Chúc mừng anh năm mới vui vẻ và gia đình anh có nhiều sức khoẻ
chúc anh năm mới vui vẻ ạ. cảm ơn anh vì những khoá học ahi
cảm ơn anh. Chúc anh năm mới vui vẻ. Content video này rất ok, nhưng chất lượng video hơi thấp, hơi khó đọc code ở darkmode. Để mai em lên PC xem thử. Lần nữa chúc anh và gia đình năm mới nhiều sức khoẻ
Cảm ơn anh rất nhiều ạ, nhờ có các khoá học của anh mà em đã có thể tự ngồi mày mò được các fw như React với Vue và em cũng mới xin được làm thực tập ở một công ty, ra tết em sẽ đi làm. Chúc anh và gia đình có một năm mới dồi dào sức khoẻ, an khang thịnh vượng, vạn sự như ý ạ.
@angminhuc6674
2 жыл бұрын
@@pmusic708 đúng r bạn, bạn cứ học kỹ từng video một và hiểu được những gì a Sơn nói thì thoải mái đi làm bạn nhé.
@thanhdanhhonguyen3310
2 жыл бұрын
Mình đang học java scrip ở f8 mà chưa thấy a sơn ra clip hướng dẫn thực tế để áp dụng
Chúc anh năm mới tràn đầy sức khỏe
Anh làm video ẩn/hiện header theo tốc độ cuộn trang như của ứng dụng KZread và fb trên di động đi anh. Tức là mình cuộn từ từ thì thanh header cũng từ từ ẩn/hiện đi, cuộn nhanh thì nó ẩn/hiện nhanh đấy ạ
chúc mừng năm mới a vs mng nhé 💯❤️🦋
1. 2. đổi onchange thành oninput 3. đổi nearest thành center 4. 5.
@chovycon3056
2 жыл бұрын
Bạn cho mình hỏi sao bạn biết được onchange thành oninput hay v . Mình cảm ơn
@nghiahoang9201
Жыл бұрын
@@chovycon3056 .
A ơi cho em hỏi. Khi đi làm thì be đưa api fe thì có đưa luôn URL để test trên postman k ạ. Em đang học gọi API mà em thấy ngta test API trên postman mà em k biết đc sao lại có URL như thế. Happy new year nha a
Anh cho em hỏi về 1 chút về kĩ thuật anh dùng padding-top ở phút 13:39 thì em có tự test thì thấy nếu bỏ đi padding-top thì height của thẻ cha cũng trở về 0 thì cái padding-top có phải thay vì mình viết thêm 1 cái height cho thẻ cha và thẻ con sẽ kế thừa cái height ấy thông qua thuộc tính inherit thì mình ko cần viết height cho thẻ cha mà chỉ cần để padding-top cho thẻ con thì nó cũng sẽ lấp đầy được cái height của thẻ cha đúng ko anh. Nhưng mà chỉ số 100% này nó lại kế thừa từ width của thằng Cha để nó setup cho cúi height của nó vì khi em comment width:100% đi thì width bằng 0*200. Không biết em hiểu như thế có đúng không anh !
Quá hay anh ơi Tết vẫn làm video☺☺
Quá tuyệt vời a ơi 👍👍
thanks anh nhén, luôn ủng hộ anh !!
Video của anh thực sự hữu ích, nhưng lại ít người biết đến quá:((
:v phọt cơm cái đoạn kiến thức cơ bản , nhưng cơ bản chưa chắc dễ , cơ bản quá dễ khi code chạy đc loạn lun anh =))
Mới đó mà gần 2 năm kỉ niệm đi thực tập rồi, kinh nghiệm thực tế cũng được 1,5 exp. Xem lại kỉ niệm ngày xưa code music player vui biết bao ^^, nếu không có anh Sơn thì chắc mình sẽ bỏ nghề mất.
A Sơn và ae cho em hỏi chút, em không biến this thành _this, có phải vì lí do đó khi làm đến bước nextSong phút thứ 53:00 thì nextSong của e biến thành constructor đúng k a ???
anh ơi có cách nào đưa cái animate về ban đầu khi next sang bài mới ko ạ?
Bạn có thể làm thêm chức năng hiển thị lời karaoke bài hát .lrc như zingmp3, NCT không?
Năm mới vui vẻ anh ơiiii
cho e hỏi là khi e thử chạy code trên safari của iphone thì khi cho trình duyệt ở background hay khóa màn hình thì code javascript ko chạy tiếp được thì làm sao để khắc phục đc điều này ạ? e cảm ơn ạ :3
cho mình hỏi là mình muốn ad vào góc bên phải blog spot rồi , sau khi ad thành công viết bài kiểu gì ạ
cho mình hỏi dùng extension gì để nó gợi ý thuộc tính vậy ạ. Như 14:25 mình cd. như video mà nó không gợi ý offsetWidth
Hay quá a ❤❤ ! Khi nào làm game đoán hình đi a
Respect
a ơi cho e hỏi là bài hát phải down về à a, với cả mấy cái ảnh của bài hát nữa ạ, e có lên zingmp3 tải ảnh mà k thấy chỗ tải ạ
mỗi lần a Sơn bật nhạc chạy thấy anh lắc đầu theo nhìn tếu thiệt :))
Happy lunar year a Sơn
cảm ơn anh Sơn nhé. bài này rất hay ạ
1:05:04 cho các b ko hiểu chỗ while đó, vd lần đầu gọi hàm random thì newIndex nó ra 8, sau đó nó chạy xún "while" để kiểm tra thì 8 khác currentIndex là 0 nên nó thoát vòng lặp, nhưng vd lần gọi hàm tiếp theo nó ra 0 thì chạy xún vòng "while" thỏa điều kiện "0 === 0" thì nó chạy lên hàm "do" lần nữa, chạy khi nào nó ra khác điều kiện là 0 thì thoy :D
@udemytiengviet956
2 жыл бұрын
chỗ này có bug đó bạn , lúc hủy random thì nó vẫn dính 1 index của Do nữa rồi mới hoàn toán đúng logic . Bạn test lại xem :v
Anh giảng rất hay ạ
Happy New Year F8
Chúc mừng năm mới Anh Sơn
A Sơn ơi, cho em hỏi là em làm thử web này rồi đẩy code lên mạng, nhưng chạy bằng trình duyệt trên iphone thì khi tắt màn hình đi nó ko hoạt động đc tiếp ạ, còn vs android thì vẫn oke ạ. Em tìm cách khắc phục nhưng hình như IOS ko cho web chạy ngầm trên điện thoại nên là việc e muốn nhạc vẫn tiếp tục phát khi tắt màn hình là ko khả thi luôn ạ? E cám ơn a
Theo e là khi anh code HTML CSS thì a cũng quay lại quá trình code rồi up vào list HTML a ạ, học như vậy e thấy thú vị vì mình làm hết được project
@F8VNOfficial
3 жыл бұрын
Thank em nha
cho e hỏi là phần nhạc đã chạy qua thì css như nào vậy ạ. E cám ơn nhiều
a cho em hỏi khi em tua thì audio.currentTime nó vẫn luôn có giá trị 0, mặc dù em đã update cho nó cái seekTime rồi
Anh ơi, quay tiếp series Nodejs đi anh, mong mỏi từng ngày
Sơn đúng là tuyệt vời!
a ơi ra tiêp những video thực hành ntn đi ạ, hay quá a ơi
Nay xem đúng có không khí tết luôn. Ae nào xem vào 29 điểm danh nào
Làm video học react js trong 1 video đi anh :(
Hóng anh ra khoá python quá 🥳
Like rồi xem sau :))
anh ơi cónếu thay javascript bằng angularthì có thể viết đc ạ
thanks anh video rất hữu ích ạ
Hay quá anh owiiiiiiiii
Đang định vào học nốt bài của a thì f8 lỗi nên vào lại youtube lun :))
trong 2021 e sẽ quyết tâm đạt được mục tiêu mà mình đưa ra. (để tạm ở đây khi nào nản thì lấy ra xem) :))
@F8VNOfficial
3 жыл бұрын
Cố lên em
A giải thích giúp mình phần css player và playing với
Great video, the program works great
Xem về cuối nhìn anh vội mà em vội theo 😅
Chất lượng cao đấy anh.
Cho mình hỏi, với lượng lớn bài hát (> 500 bài) thì có nên lưu vào 1thư mục rồi lấy ra từng cái và gán vào songs[ ] như video k?
@F8VNOfficial
3 жыл бұрын
Cái này tuỳ tình huống bạn muốn gì thôi. Số lượng lớn thì gây ảnh hưởng tới hiệu năng, nó bị lag hơn vì số lượng DOM elements. Bạn tìm hiểu thêm 2 từ khoá giúp mình là "load more" và "virtual scroll" nhé. Load more là kéo tới đâu tải thêm tới đấy, virtual scroll là kỹ thuật cao hơn, khó hơn, tự động remove những element nằm ngoài vùng nhìn thấy được của trình duyệt để giảm số lượng elements trong DOM, kỹ thuật này đáp ứng đc cả danh sách hàng triệu luôn nhé.
anh cho em hỏi lấy link âm nhạc thế nào ạ
Video rất hay, cảm ơn anh rất nhiều.
rất hay anh ...
Hay qua a ơi
mọi người cho e hỏi muốn thay bài hát làm như nào ạ ?
làm sao vscode đọc được file mp3 nhỉ của e ko đọc được cơ
Cả video chỉ không hiểu đúng đoạn config ạ, ngoằng thật sự :)) Cảm ơn anh Sơn đã làm vid
Dạy reactjs đi a ơi
Mình không thể get được các element mà được thêm vào dom bằng hàm render như của a sơn. Mọi người ai biết giải thích giúp mình với ạ. Thank all
A có thể giải thích chỗ _this = this k ạ? Chúc a năm mới vui vẻ
@F8VNOfficial
3 жыл бұрын
A giải thích rồi đó mà nhỉ. E chưa hiểu chỗ nào?
Cảm ơn anh
Happy new year ❤️
Happy new year
Quan tâm a ơiiiiiiiii.
Không tải file mp3 về là bị lỗi reset currentTime = 0 lun anh
Thầy ơi làm sao để hiển thị tổng thời gian bài hát và thời gian đang chạy vậy thầy
00:04:53 Có cách nào set chiều cao cho position: fixed mà không cần dùng margin cho element tiếp theo không Sơn?
@rainydaytuness
2 жыл бұрын
bắt buộc phải set cứng khoảng cách cho element dưới thôi bác ạ, tại fixed nó không chiếm không gian web
@thienhuynh7962
2 жыл бұрын
Một option khác là không sử dụng position: fixed mà thay vào đó là cho cái playlist scroll được và giới hạn lại chiều cao của nó, nhưng đòi hỏi bạn phải biết xử lý scrollbar nếu không muốn trông ui bị xấu.
clip hay qua
mùng 1 năm nay có cái gì nữa không anh ơi
happy new year
Thank a !
Đoạn 16:16 theo mình mình nghĩ không phải là do kéo nhanh quá đâu mà do scrollTop nó lớn hơn 200 nên newcdWidth = 200 - 300(minh ví dụ) nên nó nhỏ hơn 0
@LamVu-dv2bi
2 жыл бұрын
scroll nhanh nên không bắt đc cái khúc = 0 mà qua âm luôn vẫn còn hình
@duyanh6909
2 жыл бұрын
thì vẫn do kéo nhanh đó :vv nếu bạn kéo chậm đến đoạn 200 thì dù bạn có kéo xuống nữa thì nó cũng đã ẩn rồi nên giá trị âm cũng k sao