Tiện ích trình phát nhạc sử dụng JavaScript

Bài viết mình chia sẻ cho bạn các thêm tiện ích trình phát nhạc sử dụng JavaScript cho website hoặc blog của bạn. Tiện ích này sẽ sử dụng HTML CSS JS.
Vui lòng chờ 0 giây...
Cuộn xuống hoặc nhấp vào Đi tới liên kết đến đích
Chúc mừng! Liên kết được tạo

Tiện ích trình phát nhạc sử dụng JavaScript này có các chức năng phát lặp bài nhạc, phát lặp danh sách nhạc, phát ngẫu nhiên các bài nhạc trong danh sách và các nút play/pause, bài trước bài sau. Bạn cũng có thể xem được danh sách các bài nhạc và bài nhạc đang phát hiện tại trong danh sách.

Tiện ích trình phát nhạc sử dụng JavaScript
Tiện ích trình phát nhạc sử dụng JavaScript

Cách thêm tiện ích trình phát nhạc

Bước 1: Trước hết Đăng nhập vào Trang tổng quan Blogger.

Bước 2: Trên bảng điều khiển Blogger, nhấp vào '+ BÀI ĐĂNG MỚI'.

Bước 3: Thêm các mã sau vào Bài đăng trên Blog của bạn thông qua Chế độ xem HTML để hiển thị trình phát nhạc.

<script>
//<![CDATA[
// Để thêm nhạc bạn sao chép và chỉnh sửa bên trong đoạn array như sau
//   {
//     name: 'Tên bài nhạc',
//     artist: 'Nghệ sĩ',
//     img: 'Tên đường dẫn hình ảnh',
//     src: 'Tên đường dẫn theo bài nhạc'
//   }
let allMusic = [
    {
        name: 'Harley Bird - Home',
        artist: 'Jordan Schor',
        img: 'https://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-1.jpg',
        src: 'https://ia801400.us.archive.org/27/items/music_20210917/music-1.mp3',
        id: 'm1'
    },
    {
        name: 'Ikson Anywhere – Ikson',
        artist: 'Audio Library',
        img: 'https://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-2.jpg',
        src: 'https://ia801400.us.archive.org/27/items/music_20210917/music-2.mp3',
        id: 'm2'
    },
    {
        name: 'Beauz & Jvna - Crazy',
        artist: 'Beauz & Jvna',
        img: 'https://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-3.jpg',
        src: 'https://ia801400.us.archive.org/27/items/music_20210917/music-3.mp3',
        id: 'm3'
    },
    {
        name: 'Hardwind - Want Me',
        artist: 'Mike Archangelo',
        img: 'https://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-4.jpg',
        src: 'https://ia801400.us.archive.org/27/items/music_20210917/music-4.mp3',
        id: 'm4'
    },
    {
        name: 'Jim - Sun Goes Down',
        artist: 'Jim Yosef x Roy',
        img: 'https://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-5.jpg',
        src: 'https://ia801400.us.archive.org/27/items/music_20210917/music-5.mp3',
        id: 'm5'
    },
    {
        name: 'Lost Sky - Vision NCS',
        artist: 'NCS Release',
        img: 'https://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-6.jpg',
        src: 'https://ia801400.us.archive.org/27/items/music_20210917/music-6.mp3',
        id: 'm6'
    }
]; //]]> 
</script>
<div class='music-box'>
	<div class='top-bar'>
		<i class='has-svg-icon music-more'></i>
		<span>Now Playing</span>
		<i class='has-svg-icon music-horiz'></i>
	</div>
	<div class='img-area'>
		<img alt='' loading='lazy' src='' title='' />
	</div>
	<div class='song-details'>
		<p class='name'></p>
		<p class='artist'></p>
	</div>
	<div class='progress-area'>
		<div class='progress-bar'>
			<audio id='main-audio' src=''></audio>
		</div>
		<div class='song-timer'>
			<span class='current-time'>0:00</span>
			<span class='max-duration'>0:00</span>
		</div>
	</div>
	<div class='controls'>
		<i class='has-svg-icon music-repeat' id='repeat-plist' title='Playlist looped'><span>repeat</span></i>
		<i class='has-svg-icon music-skippre' id='prev'></i>
		<div class='play-pause'>
			<i class='has-svg-icon music-play play'></i>
		</div>
		<i class='has-svg-icon music-skipnext' id='next'></i>
		<i class='has-svg-icon music-queue' id='more-music'></i>
	</div>
	<div class='slider_volumn'>
		<i class='has-svg-icon icon-volume-down' id='min-volume'></i>
		<input class='volume_slider' max='100' min='1' onchange='setVolume()' type='range' value='100' />
		<i class='has-svg-icon icon-volume-up' id='max-volume'></i>
	</div>
	<div class='music-list'>
		<div class='header-music'>
			<div class='row-music'>
				<i class='has-svg-icon list music-queuemenu'></i>
				<span>Music list</span>
			</div>
			<i class='has-svg-icon music-close' id='close'></i>
		</div>
		<ul>
		</ul>
	</div>
</div>
<script src='https://cdn.giahuy.net/widget/js/MusicBox.min.js'></script>
<link rel='stylesheet' href='https://cdn.giahuy.net/widget/css/MusicBox.min.css'/>

Ghi chú:
* Thay name: '#' thành Tên bài nhạc.
* Thay artist: '#' thành Nghệ sĩ.
* Thay img: '#' thành Tên đường dẫn hình ảnh.
* Thay src: '#' thành Tên đường dẫn theo bài nhạc.

Trên đây là hướng dẫn tiện ích trình phát nhạc sử dụng JavaScript.
Nếu có bất cứ thắc mắc nào hãy comment ngay phía dưới cho mình biết nhé.
Chúc các bạn thành công và có một ngày làm việc thật hiệu quả!

Copyright © www.nldblog.com

Về tác giả

Tôi là Nhật Nguyễn, một kỹ sư xây dựng. Nhưng thích tìm hiểu về mã nguồn lập trình web .

Đăng nhận xét

Vui lòng không chia sẻ bất kỳ chi tiết nhạy cảm hoặc cá nhân nào ở đây.
Cookie Consent
Trang web của chúng tôi sử dụng cookie để nâng cao trải nghiệm của bạn.
Thêm chi tiết
Oops!
Có vẻ như đã xảy ra sự cố với kết nối Internet của bạn. Vui lòng kết nối với internet và bắt đầu duyệt lại.
AdBlock Detected!
Chúng tôi đã phát hiện ra rằng bạn đang sử dụng plugin chặn quảng cáo trong trình duyệt của mình.
Doanh thu mà chúng tôi kiếm được từ quảng cáo được sử dụng để quản lý trang web này, chúng tôi yêu cầu bạn đưa trang web của chúng tôi vào danh sách trắng trong plugin chặn quảng cáo của bạn.
Site is Blocked
Sorry! This site is not available in your country.