Trong năm 2023, trên Chitose2D đã đã có một bài viết hướng dẫn tạo code phát nhạc chỉ bằng HTML5 cho Blogger/Blogspot cực nhẹ. Và hôm nay, mình sẽ tiếp tục cập nhật thêm trình phát nhạc có danh sách phát với sự kết hợp của HTML, CSS & JavaScript.
Ưu điểm của code phát nhạc có danh sách phát cho Blogger/Blogspot 👇
✧ Mặc dù có JavaScript nhưng trình duyệt này cực nhẹ, không gây nặng trang và load nhanh.
✧ Giao diện đẹp mắt, thích hợp cho bạn nào làm web nhạc, hoặc cũng có thể tích hợp vào blog thành Blog truyện Audio.
✧ Không cần mã nhúng của bên thứ 3, tất cả tính năng bạn cần đều trong một đoạn code
✧ Cho phép bạn thỏa mái thay đổi font chữ, màu chữ bằng cách bôi đen văn bản, tận dụng các chức năng kết hợp trong bài viết của Blogger
✧ Độ tùy biến cao, thỏa mái sáng tạo nếu bạn biết code
Nhược điểm: Là méo có chỗ tải đâu nhé, vì trình phát nhạc này tập chung vào phần giữ chân khách ghép thăm, tránh tình trạng tải về, thoát trang mất khách ấy mà. 🤕
Bạn có thể xem demo ở ảnh dưới. 👇
Hoặc cũng có thể xem mẫu trực tiếp bên dưới luôn. 👀
- 01: Kiếm Hiệp TìnhCover: Linh Dizi Sáo Trúc "Mười năm thoáng qua một chữ tình..."
- 02: 1967 - Gontiti - ゴンチチChitose2D - Triết lý Anime/Manga/Light Novel
- 03: OST - Tetsu wo Tataki Nagaratemee no Tamashii wo Tatakiagero - Gintama - Chitose2D“Nước mắt rất có ích vì nó làm dịu nỗi đau. Nhưng cho đến khi lớn lên, chúng ta sẽ hiểu rằng, có những nỗi đau không thể vơi đi khi ta khóc, và có những kỷ niệm đau buồn mà chúng ta không được khóc để quên.” ~ Hajime Obi ~
- 04: OST - Sangeki no Kioku - Kore wa Zombie Desu ka? - Chitose2D“Cô đơn thật yên bình, nhưng sẽ chẳng có ai để chia sẻ hạnh phúc.” - Ayumu Aikawa
- 05: OST - Shunshuu - Oda Nobuna no Yabou - Chitose2D “Người ta nói rằng nụ cười của một người là đẹp nhất khi họ chấp nhận cái chết.” - Hisahide Matsunaga
- 06: [OST] - Futari no Kimochi - InuYasha - Chitose2D “Tương lai không phải là một đường thẳng. Có rất nhiều con đường khác nhau, chúng ta phải cố gắng quyết định tương lai cho chính mình.” - Kikyou
- 07: Piano - Dango Daikazoku - Clannad - Chitose2D “Trên đời này không ai là hoàn hảo, những gì ta làm chẳng khác gì chơi một trò may rủi.” - Tomoya Okazaki
- 08: One Punch Man - Saitama Theme - Chitose2D Không phải tôi cần người hâm mộ, nhưng sẽ thật tuyệt nếu ai đó nhận ra những gì tôi đang làm.” ~ Saitama
- 09: [AMV] Kowarekake no Orgel (Đồi Hoa Mặt Trời - Hoàng Yến Chibi) Singer: Hoàng Yến Chibi 🎤
- 10: [Ending Theme] - Chitose2D - Shigatsu wa Kimi no Uso - Orange (オレンジ) - by 7 Chitose2D - Triết lý Anime/Manga/Light Novel
___
Code HTML, CSS & JavaScript
Vào bài viết rồi chọn chỗ muốn đặt, sau đó chuyển sang chế độ HTML copy và dán toàn bộ code bên dưới.
<div class="Multi-audio-player" data-config="{"shide_top":false,"shide_btm":false,"auto_load":false}" id="simp">
<div class="Audio-playlist">
<ul>
<li><span class="Audio_source" data-cover="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtuF5KZpMudirb6HtyrG6q0sSiMTb5pWjmNI70xle2CJIbyF4YLtGJgCjuK2mpJQCBaGhOefjVFnVG7R6ar4YRnd-N5PiGvAfbI4CP0bM_AB7dFYNTCJ5QtkSE0TaeqkuqiCoym3GJ8Ft278o0VLfb2uBqiomqY4a-bFZ72rSkGGkoU-xBAVXDI8BCu5M/s16000/Kiem-hiep-tinh.jpeg" data-src="https://archive.org/download/kiem-hiep-tinh-cover-linh-dizi-sao-truc-chitose-2-d/Ki%E1%BA%BFm%20Hi%E1%BB%87p%20T%C3%ACnh%20-%20Cover%20Linh%20Dizi%20S%C3%A1o%20Tr%C3%BAc%20-%20Chitose2D.mp3"><b>01: </b>Kiếm Hiệp Tình</span><span class="Audio_description"><b>Cover:</b> Linh Dizi Sáo Trúc "Mười năm thoáng qua một chữ tình..."</span></li>
<li><span class="Audio_source" data-cover="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0ld30Zf2RcHkUu8U8pnjI1PxI5iTfVCdtIxBBb5p0AhQMg_W1CoXpbMQaoFS_GnK0_t1QG7kRbJJs4mEbMh54G9Ztbiqg9poLNDoZQ3duKNWgpiQX47MCtkV7tXNrg3-v15BBaeWnio1aHHsdxcYiw-DqnWqEiPg4xffTMYGECrQkb82GZyGlLPOpDk/s100/04.jpg" data-src="https://archive.org/download/1967-gontiti-chitose-2-d/1967%20-%20Gontiti%20-%20%E3%82%B4%E3%83%B3%E3%83%81%E3%83%81%20-%20Chitose2D.mp3"><b>02: </b>1967 - Gontiti - ゴンチチ</span><span class="Audio_description">Chitose2D - Triết lý Anime/Manga/Light Novel</span></li>
<li><span class="Audio_source" data-cover="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_l2KsAY2WZV3h1QKhaki9KVx3XOcGqg1xKtjG-lEZUhJYpm9SR0Ru6Y-n7e6j8cRnTz-WJCA9noaU2AYPAQd8W2YoIc2TpzwEqVGFE6VDhvr3WAB9FFAFzmemhtREhyww5nGTQrdlpT1eNqUYgIkrfCjNh6J9SWH0p5p6Oi-roTb0Y7E3MGaFFHN5TQQ/s100/03.jpg" data-src="https://archive.org/download/OSTTetsuWoTatakiNagaratemeeNoTamashiiWoTatakiageroGintamaKenhAnime24h/OST%20-%20Tetsu%20wo%20Tataki%20Nagaratemee%20no%20Tamashii%20wo%20Tatakiagero%20-%20Gintama%20-%20KenhAnime24h.mp3"><b>03: </b>OST - Tetsu wo Tataki Nagaratemee no Tamashii wo Tatakiagero - Gintama - Chitose2D</span><span class="Audio_description">“Nước mắt rất có ích vì nó làm dịu nỗi đau. Nhưng cho đến khi lớn lên, chúng ta sẽ hiểu rằng, có những nỗi đau không thể vơi đi khi ta khóc, và có những kỷ niệm đau buồn mà chúng ta không được khóc để quên.” ~ Hajime Obi ~</span></li>
<li><span class="Audio_source" data-cover="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-kwCFBglNboByRy3lbpliF_umDo1l0ZVGI96TUJCoUr4T3uDOmYLD-ElurFNcPA4iSJ_MFk9vNKQ7DgjakCVy1jsmoZtNvVMPtRcqWRbs27GeePVuVcY9oLjDL3Ntk20SRAiaVeDBM4et7siNFGZXCMcU9v6QaMA86I7UaH8Tre_QK-0n8mT_sbFUvjg/s100/Ayumu%20Aikawa.jpg" data-src="https://archive.org/download/ostsangekinokiokukorewazombiedesukakenhanime24h/OST%20-%20Sangeki%20no%20Kioku%20-%20Kore%20wa%20Zombie%20Desu%20ka%20-%20KenhAnime24h.mp3"><b>04: </b>OST - Sangeki no Kioku - Kore wa Zombie Desu ka? - Chitose2D</span><span class="Audio_description">“Cô đơn thật yên bình, nhưng sẽ chẳng có ai để chia sẻ hạnh phúc.” - Ayumu Aikawa</span></li>
<li><span class="Audio_source" data-cover="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5PRYqm4M0Lj5BH30VeabNccZIAqDoBFnVCOx7J6RHNS2QurqHPmz0dtpPlnKWITNWBbNK1xsOCxehzpk9FIyljoZw05bTEPWAJlq3aAmqJbHZBupLOyuRQXXg_Altbjq7id6bFv7_67RGNTAeCHq2RnEyIS_Af2XUKaOr0aCUuhZ0XR34GvtE7TOn4yA/s100/Hisahide%20Matsunaga.jpg" data-src="https://archive.org/download/ostshunshuuodanobunanoyaboukenhanime24h/OST%20-%20Shunshuu%20-%20Oda%20Nobuna%20no%20Yabou%20-%20KenhAnime24h.mp3"><b>05: </b>OST - Shunshuu - Oda Nobuna no Yabou - Chitose2D</span> <span class="Audio_description">“Người ta nói rằng nụ cười của một người là đẹp nhất khi họ chấp nhận cái chết.” - Hisahide Matsunaga</span></li>
<li><span class="Audio_source" data-cover="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFa8aEwPOwcOo-qcvTV1hbXZ_QGzWk91Iq2N4f36HurRgT9-ewkolNgvzlKs_sS-DQi6UpNQALmgZqdWi9wyh7m-Z7mV3gB81cvDJjWbz5muy3Ac8IY7BBmpAin6ylwOjeKZTbgxcEOAVbvA8e0EQabYTfQpc3KgxdAJiFXY5ns9OLuAW8NsXbO6hpINg/s100/usuitakumi77-inuyasha.jpg" data-src="https://archive.org/download/ost-futari-no-kimochi-inu-yasha-chitose-2-d/%5BOST%5D%20-%20Futari%20no%20Kimochi%20-%20InuYasha%20-%20Chitose2D.mp3"><b>06: </b>[OST] - Futari no Kimochi - InuYasha - Chitose2D</span> <span class="Audio_description">“Tương lai không phải là một đường thẳng. Có rất nhiều con đường khác nhau, chúng ta phải cố gắng quyết định tương lai cho chính mình.” - Kikyou</span></li>
<li><span class="Audio_source" data-cover="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEa3-t_j7610tYZMvkHiF_wNzw3EuO061D8rETN5jvnOvB95lXyt3aXMJo6Ssh1CvzjbDCDxgAtBW9x6gY4YCp4_SXluiN1Dc70tbIhu1-4E_F2cZMm79e4iCeTOhi7LsBCZOptwyURghfjf5Tew9JHgIhpoNJA5SCY3FHB7kaKVWPgmdS0iJGjP2DSy8/s100/04.gif" data-src="https://archive.org/download/piano-kenh-anime-24h-dango-daikazoku/%5BPiano%5D%20-%20KenhAnime24h%20-%20Dango%20Daikazoku.mp3"><b>07: </b>Piano - Dango Daikazoku - Clannad - Chitose2D</span> <span class="Audio_description">“Trên đời này không ai là hoàn hảo, những gì ta làm chẳng khác gì chơi một trò may rủi.” - Tomoya Okazaki</span></li>
<li><span class="Audio_source" data-cover="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Z18QIfxYZYA9HgmkSx5NS4cy3AMj6bWGyPKuRsbYFT7AwIXAMR6F4Y3deQkpDzgA0dSvKo9dTOeq2JoD-QvI67GdVrCnW6XYWZ-Hlf5-NDKfTTnhb_PnDcy_94rO7a9BpqWbCufhcv4JA0L5te_8WovnXb96Z7dU64Na0GdwAKoAoHB0i91i8RE7930/s100/Saitama.jpg" data-src="https://archive.org/download/theme-kenh-anime-24h-one-punch-man/%5BTheme%5D%20-%20KenhAnime24h%20-%20One%20Punch%20Man.mp3"><b>08: </b>One Punch Man - Saitama Theme - Chitose2D</span> <span class="Audio_description">Không phải tôi cần người hâm mộ, nhưng sẽ thật tuyệt nếu ai đó nhận ra những gì tôi đang làm.” ~ Saitama</span></li>
<li><span class="Audio_source" data-cover="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjexCQoZ4oTu7bgq7l1W28fBKlGu5hbSbPNxs4RpVr_teV3Ppyn9erytfMW13bM9p2_DU1SAniM4HE58108PNd0tjzrpdIMfM0Qz_AS2Tq-YKGLy8vhp--9GJyb2MCwwo4EMNBW3IMPfellc5BidTQkPjd9340E8j7fqa6dlYE_sFp6dOuaWjhrv-T7qA/s100-rw/112.png" data-src="https://archive.org/download/amv-kenh-anime-24h-kowarekake-no-orgel-doi-hoa-mat-troi-hoang-yen-chibi/%5BAMV%5D%20-%20KenhAnime24h%20-%20Kowarekake%20no%20Orgel%20%28%C4%90%E1%BB%93i%20Hoa%20M%E1%BA%B7t%20Tr%E1%BB%9Di%20-%20Ho%C3%A0ng%20Y%E1%BA%BFn%20Chibi%29.mp3"><b>09: </b>[AMV] Kowarekake no Orgel (Đồi Hoa Mặt Trời - Hoàng Yến Chibi)</span> <span class="Audio_description"><b>Singer:</b> Hoàng Yến Chibi 🎤</span></li>
<li><span class="Audio_source" data-cover="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpgbAOjHwM-a4ISaCRz6Pvzl_9Qu2ODEVD6IGNHVTRIPU-tRGJWbuPg_kPv_JjYBw2Mz4J5b3zqahRhARDZh5pnCOp7w5GKQEp9AOn-AHrV_zlPCr-KGeKqhqNgg2-Vs6rfQdWgwUV3v4/s100-rw/SIYUE-39.jpg" data-src="https://archive.org/download/EndingThemeKenhAnime24hShigatsuWaKimiNoUsoOrangeBy7/%5BEnding%20Theme%5D%20-%20KenhAnime24h%20-%20Shigatsu%20wa%20Kimi%20no%20Uso%20-%20Orange%20%28%E3%82%AA%E3%83%AC%E3%83%B3%E3%82%B8%29%20-%20by%207.mp3"><b>10: </b>[Ending Theme] - Chitose2D - Shigatsu wa Kimi no Uso - Orange (オレンジ) - by 7</span> <span class="Audio_description">Chitose2D - Triết lý Anime/Manga/Light Novel</span></li>
</ul>
</div>
</div>
<style>
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
*,*:before,*:after{outline:0;-webkit-box-sizing:border-box;box-sizing:border-box;}
input,button{outline:none;}
a,a:hover,a:visited{color:#ddd;text-decoration:none;}
.flex{display:-webkit-flex;display:flex;}
.flex-wrap{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.flex-align{-webkit-align-items:center;align-items:center;}
.w-full{width:100%;}
#simp button,#simp input,#simp img{border:0;}
#simp{max-width:800px; font-size:14px;font-family:"System-ui", sans-serif;text-align:initial;line-height:initial;background:#17212b;color:#ddd;margin:0 auto;border-radius:6px;overflow:hidden;}
#simp .Audio_album{padding:20px 25px 5px;}
#simp .Audio_album .simp-cover{margin-right:20px;}
#simp .Audio_album .simp-cover img{max-width:100px;width:100%;margin:0;padding:0;display:block;}
#simp .Audio_album .simp-title{font-size:120%;font-weight:bold;;margin:10px 0px 0px 0px;}
#simp .Audio_album .simp-artist{font-size:90%;color:#6c7883;}
#simp .Audio_controls{padding:15px;}
#simp .Audio_controls button{font-size:130%;width:32px;height:32px;background:none;color:#ddd;padding:7px;cursor:pointer;border:0;border-radius:3px;}
#simp .Audio_controls button[disabled]{color:#636469;cursor:initial;}
#simp .Audio_controls button:not([disabled]):hover{background:#4082bc;color:#fff;}
#simp .Audio_controls .simp-prev,#simp .Audio_controls .simp-next{font-size:100%;}
#simp .Audio_controls .simp-tracker,#simp .Audio_controls .simp-volume{flex:1;margin-left:10px;position:relative;}
#simp .Audio_controls .simp-buffer {position:absolute;top:50%;right:0;left:0;height:5px;margin-top:-2.5px;border-radius:100px;}
#simp .Audio_controls .simp-loading .simp-buffer {-webkit-animation:audio-progress 1s linear infinite;animation:audio-progress 1s linear infinite;background-image: linear-gradient(-45deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent;}
#simp .Audio_controls .simp-time,#simp .Audio_controls .simp-others{margin-left:10px;}
#simp .Audio_controls .simp-volume{max-width:110px;}
#simp .Audio_controls .simp-volume .simp-mute{margin-right:5px;}
#simp .Audio_controls .simp-others .simp-active{background:#242f3d;}
#simp .Audio_controls .simp-others .simp-shide button{font-size:100%;padding:0;width:30px;height:20px;display:block;}
#simp .Audio_controls input[type=range]{-webkit-appearance:none;background:transparent;height:19px;margin:0;width:100%;display:block;position:relative;z-index:2;}
#simp .Audio_controls input[type=range]::-webkit-slider-runnable-track{background:rgba(183,197,205,.66);height:5px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;}
#simp .Audio_controls input[type=range]::-moz-range-track{background:rgba(183,197,205,.66);height:5px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;}
#simp .Audio_controls .simp-load .simp-progress::-webkit-slider-runnable-track{background:#2f3841;}
#simp .Audio_controls .simp-load .simp-progress::-moz-range-track{background:#2f3841;}
#simp .Audio_controls .simp-loading .simp-progress::-webkit-slider-runnable-track{background:rgba(255,255,255,.25);}
#simp .Audio_controls .simp-loading .simp-progress::-moz-range-track{background:rgba(255,255,255,.25);}
#simp .Audio_controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;height:13px;width:13px;margin-top:-4px;cursor:pointer;border-radius:50%;box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(47,52,61,.2);}
#simp .Audio_controls input[type=range]::-moz-range-thumb{-webkit-appearance:none;background:#fff;height:13px;width:13px;cursor:pointer;border-radius:50%;box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(47,52,61,.2);}
#simp .simp-footer{padding:10px 10px 12px;font-size:90%;text-align:center;opacity:.7;}
#simp .simp-display{overflow:hidden;max-height:650px;transition:max-height .5s ease-in-out;}
#simp .simp-hide{max-height:0;}
/* playlist */
#simp ul{margin:5px 0 0;padding:0;list-style:none;max-height:245px;}
#simp ul li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin:0;padding:8px 20px;cursor:pointer;}
#simp ul li:last-child{padding-bottom:13px;}
#simp ul li:nth-child(odd){background:#0e1621;}
#simp ul li:hover{background:#242f3d;}
#simp ul li.simp-active{background:#FC2C45;color:#fff;}
#simp ul li .Audio_description{font-size:90%;opacity:.5;margin-left:5px;}
#simp ul{overflow-y:auto;overflow-x:hidden; scrollbar-color:#73797f #2f3841;}
#simp ul::-webkit-scrollbar-track{background-color:#2f3841;}
#simp ul::-webkit-scrollbar{width:6px;background-color:#2f3841;}
#simp ul::-webkit-scrollbar-thumb{background-color:#73797f;}
@-webkit-keyframes audio-progress{to{background-position:25px 0;}}
@keyframes audio-progress{to{background-position:25px 0;}}
@media screen and (max-width:480px) {
#simp .Audio_controls .simp-volume,#simp .Audio_controls .simp-others{display:none;}
#simp .Audio_controls .simp-time{margin-right:10px;}
}
@media screen and (max-width:370px) {
#simp .simp-time .simp-slash,#simp .simp-time .end-time{display:none;}
}
</style>
<script>
function addEventListener_multi(element, eventNames, handler) {
var events = eventNames.split(' ');
events.forEach(e => element.addEventListener(e, handler, false));
}
function getRandom(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function getRelativePos(elm) {
var pPos = elm.parentNode.getBoundingClientRect();
var cPos = elm.getBoundingClientRect();
var pos = {};
pos.top = cPos.top - pPos.top + elm.parentNode.scrollTop,
pos.right = cPos.right - pPos.right,
pos.bottom = cPos.bottom - pPos.bottom,
pos.left = cPos.left - pPos.left;
return pos;
}
function formatTime(val) {
var h = 0, m = 0, s;
val = parseInt(val, 10);
if (val > 60 * 60) {
h = parseInt(val / (60 * 60), 10);
val -= h * 60 * 60;
}
if (val > 60) {
m = parseInt(val / 60, 10);
val -= m * 60;
}
s = val;
val = (h > 0)? h + ':' : '';
val += (m > 0)? ((m < 10 && h > 0)? '0' : '') + m + ':' : '0:';
val += ((s < 10)? '0' : '') + s;
return val;
}
function simp_initTime() {
simp_controls.querySelector('.start-time').innerHTML = formatTime(simp_audio.currentTime);
if (!simp_isStream) {
simp_controls.querySelector('.end-time').innerHTML = formatTime(simp_audio.duration);
simp_progress.value = simp_audio.currentTime / simp_audio.duration * 100;
}
if (simp_audio.currentTime == simp_audio.duration) {
simp_controls.querySelector('.simp-plause').classList.remove('fa-pause');
simp_controls.querySelector('.simp-plause').classList.add('fa-play');
simp_audio.removeEventListener('timeupdate', simp_initTime);
if (simp_isNext) {
var elem;
simp_a_index++;
if (simp_a_index == simp_a_url.length) {
simp_a_index = 0;
elem = simp_a_url[0];
} else {
elem = simp_a_url[simp_a_index];
}
simp_changeAudio(elem);
simp_setAlbum(simp_a_index);
} else {
simp_isPlaying = false;
}
}
}
function simp_initAudio() {
simp_isLoaded = simp_audio.readyState == 4 ? true : false;
simp_isStream = simp_audio.duration == 'Infinity' ? true : false;
simp_controls.querySelector('.simp-plause').disabled = false;
simp_progress.disabled = simp_isStream ? true : false;
if (!simp_isStream) {
simp_progress.parentNode.classList.remove('simp-load','simp-loading');
simp_controls.querySelector('.end-time').innerHTML = formatTime(simp_audio.duration);
}
simp_audio.addEventListener('timeupdate', simp_initTime); //tracking load progress
if (simp_isLoaded && simp_isPlaying) simp_audio.play();
addEventListener_multi(simp_progress, 'touchstart mousedown', function(e) {
if (simp_isStream) {
e.stopPropagation();
return false;
}
if (simp_audio.readyState == 4) {
simp_audio.removeEventListener('timeupdate', simp_initTime);
simp_audio.pause();
}
});
addEventListener_multi(simp_progress, 'touchend mouseup', function(e) {
if (simp_isStream) {
e.stopPropagation();
return false;
}
if (simp_audio.readyState == 4) {
simp_audio.currentTime = simp_progress.value * simp_audio.duration / 100;
simp_audio.addEventListener('timeupdate', simp_initTime);
if (simp_isPlaying) simp_audio.play();
}
});
}
function simp_loadAudio(elem) {
simp_progress.parentNode.classList.add('simp-loading');
simp_controls.querySelector('.simp-plause').disabled = true;
simp_audio.querySelector('source').src = elem.dataset.src;
simp_audio.load();
simp_audio.volume = parseFloat(simp_v_num / 100);
simp_audio.addEventListener('canplaythrough', simp_initAudio);
simp_audio.addEventListener('error', function() {
alert('Please reload the page.');
});
}
function simp_setAlbum(index) {
simp_cover.innerHTML = simp_a_url[index].dataset.cover ? '<div style="background:url(' + simp_a_url[index].dataset.cover + ') no-repeat; background-size: 100% auto; width:100px; height:auto; aspect-ratio: 1 / 1;"></div>' : '<i class="fa fa-music fa-5x"></i>';
simp_title.innerHTML = simp_source[index].querySelector('.Audio_source').innerHTML;
simp_artist.innerHTML = simp_source[index].querySelector('.Audio_description') ? simp_source[index].querySelector('.Audio_description').innerHTML : '';
}
function simp_changeAudio(elem) {
simp_isLoaded = false;
simp_controls.querySelector('.simp-prev').disabled = simp_a_index == 0 ? true : false;
simp_controls.querySelector('.simp-plause').disabled = simp_auto_load ? true : false;
simp_controls.querySelector('.simp-next').disabled = simp_a_index == simp_a_url.length-1 ? true : false;
simp_progress.parentNode.classList.add('simp-load');
simp_progress.disabled = true;
simp_progress.value = 0;
simp_controls.querySelector('.start-time').innerHTML = '00:00';
simp_controls.querySelector('.end-time').innerHTML = '00:00';
elem = simp_isRandom && simp_isNext ? simp_a_url[getRandom(0, simp_a_url.length-1)] : elem;
for (var i = 0; i < simp_a_url.length; i++) {
simp_a_url[i].parentNode.classList.remove('simp-active');
if (simp_a_url[i] == elem) {
simp_a_index = i;
simp_a_url[i].parentNode.classList.add('simp-active');
}
}
var simp_active = getRelativePos(simp_source[simp_a_index]);
simp_source[simp_a_index].parentNode.scrollTop = simp_active.top;
if (simp_auto_load || simp_isPlaying) simp_loadAudio(elem);
if (simp_isPlaying) {
simp_controls.querySelector('.simp-plause').classList.remove('fa-play');
simp_controls.querySelector('.simp-plause').classList.add('fa-pause');
}
}
function simp_startScript() {
ap_simp = document.querySelector('#simp');
simp_audio = ap_simp.querySelector('#audio');
simp_album = ap_simp.querySelector('.Audio_album');
simp_cover = simp_album.querySelector('.simp-cover');
simp_title = simp_album.querySelector('.simp-title');
simp_artist = simp_album.querySelector('.simp-artist');
simp_controls = ap_simp.querySelector('.Audio_controls');
simp_progress = simp_controls.querySelector('.simp-progress');
simp_volume = simp_controls.querySelector('.simp-volume');
simp_v_slider = simp_volume.querySelector('.simp-v-slider');
simp_v_num = simp_v_slider.value;
simp_others = simp_controls.querySelector('.simp-others');
simp_auto_load = simp_config.auto_load;
if (simp_config.shide_top) simp_album.parentNode.classList.toggle('simp-hide');
if (simp_config.shide_btm) {
simp_playlist.classList.add('simp-display');
simp_playlist.classList.toggle('simp-hide');
}
if (simp_a_url.length <= 1) {
simp_controls.querySelector('.simp-prev').style.display = 'none';
simp_controls.querySelector('.simp-next').style.display = 'none';
simp_others.querySelector('.simp-plext').style.display = 'none';
simp_others.querySelector('.simp-random').style.display = 'none';
}
simp_source.forEach(function(item, index) {
if (item.classList.contains('simp-active')) simp_a_index = index;
item.addEventListener('click', function() {
simp_audio.removeEventListener('timeupdate', simp_initTime);
simp_a_index = index;
simp_changeAudio(this.querySelector('.Audio_source'));
simp_setAlbum(simp_a_index);
});
});
simp_changeAudio(simp_a_url[simp_a_index]);
simp_setAlbum(simp_a_index);
simp_controls.querySelector('.simp-plauseward').addEventListener('click', function(e) {
var eles = e.target.classList;
if (eles.contains('simp-plause')) {
if (simp_audio.paused) {
if (!simp_isLoaded) simp_loadAudio(simp_a_url[simp_a_index]);
simp_audio.play();
simp_isPlaying = true;
eles.remove('fa-play');
eles.add('fa-pause');
} else {
simp_audio.pause();
simp_isPlaying = false;
eles.remove('fa-pause');
eles.add('fa-play');
}
} else {
if (eles.contains('simp-prev') && simp_a_index != 0) {
simp_a_index = simp_a_index-1;
e.target.disabled = simp_a_index == 0 ? true : false;
} else if (eles.contains('simp-next') && simp_a_index != simp_a_url.length-1) {
simp_a_index = simp_a_index+1;
e.target.disabled = simp_a_index == simp_a_url.length-1 ? true : false;
}
simp_audio.removeEventListener('timeupdate', simp_initTime);
simp_changeAudio(simp_a_url[simp_a_index]);
simp_setAlbum(simp_a_index);
}
});
simp_volume.addEventListener('click', function(e) {
var eles = e.target.classList;
if (eles.contains('simp-mute')) {
if (eles.contains('fa-volume-up')) {
eles.remove('fa-volume-up');
eles.add('fa-volume-off');
simp_v_slider.value = 0;
} else {
eles.remove('fa-volume-off');
eles.add('fa-volume-up');
simp_v_slider.value = simp_v_num;
}
} else {
simp_v_num = simp_v_slider.value;
if (simp_v_num != 0) {
simp_controls.querySelector('.simp-mute').classList.remove('fa-volume-off');
simp_controls.querySelector('.simp-mute').classList.add('fa-volume-up');
}
}
simp_audio.volume = parseFloat(simp_v_slider.value / 100);
});
simp_others.addEventListener('click', function(e) {
var eles = e.target.classList;
if (eles.contains('simp-plext')) {
simp_isNext = simp_isNext && !simp_isRandom ? false : true;
if (!simp_isRandom) simp_isRanext = simp_isRanext ? false : true;
eles.contains('simp-active') && !simp_isRandom ? eles.remove('simp-active') : eles.add('simp-active');
} else if (eles.contains('simp-random')) {
simp_isRandom = simp_isRandom ? false : true;
if (simp_isNext && !simp_isRanext) {
simp_isNext = false;
simp_others.querySelector('.simp-plext').classList.remove('simp-active');
} else {
simp_isNext = true;
simp_others.querySelector('.simp-plext').classList.add('simp-active');
}
eles.contains('simp-active') ? eles.remove('simp-active') : eles.add('simp-active');
} else if (eles.contains('simp-shide-top')) {
simp_album.parentNode.classList.toggle('simp-hide');
} else if (eles.contains('simp-shide-bottom')) {
simp_playlist.classList.add('simp-display');
simp_playlist.classList.toggle('simp-hide');
}
});
}
if (document.querySelector('#simp')) {
var simp_auto_load, simp_audio, simp_album, simp_cover, simp_title, simp_artist, simp_controls, simp_progress, simp_volume, simp_v_slider, simp_v_num, simp_others;
var ap_simp = document.querySelector('#simp');
var simp_playlist = ap_simp.querySelector('.Audio-playlist');
var simp_source = simp_playlist.querySelectorAll('li');
var simp_a_url = simp_playlist.querySelectorAll('[data-src]');
var simp_a_index = 0;
var simp_isPlaying = false;
var simp_isNext = false; //auto play
var simp_isRandom = false; //play random
var simp_isRanext = false; //check if before random starts, simp_isNext value is true
var simp_isStream = false; //radio streaming
var simp_isLoaded = false; //audio file has loaded
var simp_config = ap_simp.dataset.config ? JSON.parse(ap_simp.dataset.config) : {
shide_top: false, //show/hide album
shide_btm: false, //show/hide playlist
auto_load: false //auto load audio file
};
var simp_elem = '';
simp_elem += '<audio id="audio" preload><source src="" type="audio/mpeg"></audio>';
simp_elem += '<div class="simp-display"><div class="Audio_album w-full flex-wrap"><div class="simp-cover"><i class="fa fa-music fa-5x"></i></div><div class="simp-info"><div class="simp-title">Title</div><div class="simp-artist">Artist</div></div></div></div>';
simp_elem += '<div class="Audio_controls flex-wrap flex-align">';
simp_elem += '<div class="simp-plauseward flex flex-align"><button type="button" class="simp-prev fa fa-backward" disabled></button><button type="button" class="simp-plause fa fa-play" disabled></button><button type="button" class="simp-next fa fa-forward" disabled></button></div>';
simp_elem += '<div class="simp-tracker simp-load"><input class="simp-progress" type="range" min="0" max="100" value="0" disabled/><div class="simp-buffer"></div></div>';
simp_elem += '<div class="simp-time flex flex-align"><span class="start-time">00:00</span><span class="simp-slash"> / </span><span class="end-time">00:00</span></div>';
simp_elem += '<div class="simp-volume flex flex-align"><button type="button" class="simp-mute fa fa-volume-up"></button><input class="simp-v-slider" type="range" min="0" max="100" value="100"/></div>';
simp_elem += '<div class="simp-others flex flex-align"><div class="simp-shide"><button type="button" class="simp-shide-top fa fa-caret-up" title="Show/Hide Album"></button><button type="button" class="simp-shide-bottom fa fa-caret-down" title="Show/Hide Playlist"></button></div></div>';
simp_elem += '</div>'; //Audio_controls
var simp_player = document.createElement('div');
simp_player.classList.add('simp-player');
simp_player.innerHTML = simp_elem;
ap_simp.insertBefore(simp_player, simp_playlist);
simp_startScript();
}
</script>
Xong rồi, giờ thì bạn chỉ việc thay link ảnh, tên bài hát, dòng mô tả và link nhạc trong đoạn HTML đầu thui.
Như mọi khi, nếu không hiểu chỗ nào thì hãy để lại bình luận bên dưới nhé!
Hashtag: Cách thêm trình phát nhạc có danh sách phát vào Blogger/Blogspot bằng HTML, CSS & JavaScript
Không có nhận xét nào
Đăng nhận xét