當(dāng)前位置：
首頁 >
html简单的音乐播放器
發(fā)布時(shí)間：2024/3/24
39
豆豆
生活随笔
收集整理的這篇文章主要介紹了
html简单的音乐播放器
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
html
<!DOCTYPE html> <html><head><meta charset="UTF-8" /><title>簡單的音樂播放器</title><link rel="stylesheet" href="indexCss.css"></head><body><div class="music"><h2 class="title">Music Name</h2><div class="player"></div></div></body><script src="indexJS.js"></script> </html> @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');*{margin: 0;padding: 0;box-sizing: border-box;font-family: 'Ubuntu',sans-serif; }body{display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #f9f9f9; }.music{}.title{font-weight: 400;font-size: 2em;color: #38a7ff;display: inline-flex;text-align: center; }.player{position: relative;width: 500px;min-height: 100px;background: #f00; } .music{display: flex;justify-content: center;align-items: center;flex-direction: column; } .title{font-weight: 400;font-size: 2em;color: #38a7ff;display: inline-flex;text-align: center;margin-bottom: 20px; }
修改.player css
ionicons官網(wǎng)
搜索 play
添加html <div class="player"></div>：
修改它們的css布局
這樣排版就弄好了
接下來是寫js代碼了:
const title = document.querySelector('.title'); const prev = document.querySelector('.prev'); const playPause = document.querySelector('.playPause'); const next = document.querySelector('.next'); const audio = document.querySelector('audio');//歌的路徑和名稱 const songList = [{path: 'music/ClariS - treasure.mp3',songName:'treasure'},{path: 'music/Liella! - 私のSymphony.mp3',songName:'私のSymphony'},{path: 'music/內(nèi)田真禮 - ストロボメモリー.mp3',songName:'ストロボメモリー'},{path: 'music/初音ミク,ゆうゆ - 深海少女.mp3',songName:'深海少女'}, ];let song_Playing = false;//播放 function playSong(){song_Playing = true;audio.play();//添加這屬性，表示為選中狀態(tài)playPause.classList.add('active');//這里是暫停按鍵playPause.innerHTML = '<ion-icon name="pause-outline"></ion-icon>'; }//暫停 function pauseSong(){song_Playing = false;audio.pause();//刪除這屬性playPause.classList.remove('active');playPause.innerHTML = '<ion-icon name="play-outline"></ion-icon>'; }//play or pause song on click playPause.addEventListener('click',function(){song_Playing ? pauseSong() : playSong()});//獲取歌的名稱和路徑 function loadSong(songList){title.textContent = songList.songName;audio.src = songList.path; }//current song let i = 0;//on load - select first song list loadSong(songList[i])//上一首歌的函數(shù)和按鍵事件 function prevSong(){i--;if(i < 0){i = songList.length - 1;}loadSong(songList[i]);playSong(); }prev.addEventListener('click',function(){prevSong(); });//下一首歌的函數(shù)和按鍵事件 function nextSong(){i++;if(i > songList.length - 1){i = 0;}loadSong(songList[i]);playSong(); }next.addEventListener('click',function(){nextSong(); });總結(jié)
以上是生活随笔為你收集整理的html简单的音乐播放器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 销售信息查询工具
- 下一篇： Switchable Normaliza