播放器
本帖最后由 亚伦影音工作室 于 2025-6-16 18:53 编辑 <br /><br /> <style>#player {
text-align: center;
width: 500px;
margin: 0 auto;
}
#controls {
margin-top: 0px;
}
#bnt { background: #0000;border-radius: 0px;
margin: 0 5px;color: #000;font-size: 18px;cursor: pointer;
}
.progress {display: flex;align-items: center;
justify-content: space-between;width: 500px;
position: relative;bottom: 0px;
left: 0px;height:30px;border-radius: 0px;
}
.progress-bar {bottom: 0px;
position:relative;
width: 100%;
height: 3px;
background-color: #000;
left: 0px;border-radius: 50px;
cursor: pointer;
}
.now {
position: absolute;
left: 0%;
display: inline-block;
height: 3px;border-radius: 20px;
width: 94%;
background: #ff0000;
}
.now::after {
content: '';
position: absolute;
left: 100%;
width: 8px;margin: -2px -2px;
height: 8px;border-radius: 50px;
background-color: #ff0000;
}
.start{color: #000; font: 400 12px sans-serif; margin: 0 10px;}
.end{color: #000; font: 400 12px sans-serif;margin: 0 10px;}
.lrc{
width: 500px;
height: 120px;
overflow: hidden;
display: block; position:relative;z-index: 5;
margin: 30px auto;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
height: 70px;
line-height: 60px;
font-family:华文隶书;
font-size: 0px;
color: #000078;
font-weight: normal;
transition: .3s all ease;
list-style-type: none;
text-align: center;display: block;
width: 100%;
margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 40px;
color: #ff0000;
text-align: center;text-align: center;color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);
</style>
<div id="player">
<audio id="aud"autoplay>
<source src="https://aod.cos.tx.xmcdn.com/storages/ff0c-audiofreehighqps/BF/7C/GKwRIaILX3FWABK6GgNWbTp_.m4a" type="audio/mpeg">
</audio>
<div id="controls">
<spanid="bnt"onclick="playMusic()" type="button" >播放</span>
<span id="bnt" onclick="pauseMusic()" type="button">暂停</span>
<span id="bnt" onclick="stopMusic()" type="button">停止</span>
</div>
<div class="progress">
<span class="end">00:00</span>
<div class="progress-bar">
<div class="now"></div>
</div>
<span class="start">00:00</span>
</div>
<div class="lrc">
<ul id="ullrc">
</ul>
</div>
</div>
<script>
var audioPlayer = document.getElementById('aud');
function playMusic() {
aud.play();
}
function pauseMusic() {
aud.pause();
}
function stopMusic() {
aud.pause(); //
aud.currentTime = 0; // ò
}
const audio = document.getElementById('aud')
const start = document.querySelector('.start')
const end = document.querySelector('.end')
const progressBar = document.querySelector('.progress-bar')
const now = document.querySelector('.now')
function conversion (value) {
let minute = Math.floor(value / 60)
minute = minute.toString().length === 1 ? ('0' + minute) : minute
let second = Math.round(value % 60)
second = second.toString().length === 1 ? ('0' + second) : second
return `${minute}:${second}`
}
aud.onloadedmetadata = function () {
end.innerHTML = conversion(aud.duration)
start.innerHTML = conversion(aud.currentTime)
}
progressBar.addEventListener('click', function (event) {
let coordStart = this.getBoundingClientRect().left
let coordEnd = event.pageX
let p = (coordEnd - coordStart) / this.offsetWidth
now.style.width = p.toFixed(3) * 100 + '%'
aud.currentTime = p * aud.duration
aud.play()
})
setInterval(() => {
start.innerHTML = conversion(aud.currentTime)
now.style.width = aud.currentTime / aud.duration.toFixed(3) * 100 + '%'
}, 1000)
</script>
<script >
var lrc = `你一直在我一直爱
词曲：晓朋
编曲：晓朋
HTML：歌词同步
编辑：山里人
走在这个迷情的时代
谁不渴望能得到真爱
倾心相遇在爱的花海
相依相守永远不分开
总要经历漫长的等待
爱的玫瑰才为你盛开
一颗真心换一份热爱
不离不弃才能到发白
你一直在我便一直爱
为你守住这爱的情怀
风雨沧桑都不会更改
海枯石烂是我的表白
你一直在我便一直爱
有你天空不再有阴霾
海角天涯爱不会分解
地老天荒爱与你同在
总要经历漫长的等待
爱的玫瑰才为你盛开
一颗真心换一份热爱
不离不弃才能到发白
你一直在我便一直爱
为你守住这爱的情怀
风雨沧桑都不会更改
海枯石烂是我的表白
你一直在我便一直爱
有你天空不再有阴霾
海角天涯爱不会分解
地老天荒爱与你同在
你一直在我便一直爱
有你天空不再有阴霾
海角天涯爱不会分解
地老天荒爱与你同在
海角天涯爱不会分解
地老天荒爱与你同在
`;
function $(id) {
return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
parts = getLrcObj(parts);
}
return parts;
function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
var min = +timeParts;
seconds = min * 60 + seconds;
var words = twoParts;
return{
seconds: seconds,
words: words,
};
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
var li = document.createElement("li");
li.innerText = lrcArray.words;
$("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
return;
}
var lrc_li_height = 70, lrc_ul_height = 60;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {
top = 0;
}
$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
activeLi.classList.remove("active");
}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;
for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray.seconds > time) {
return index - 1;
}
}
}
$("aud").ontimeupdate = setPosition;
</script >
简约、便捷，谢谢亚伦老师精彩分享{:4_176:} 这个还区分了暂停和停止，通常一般都只是播放和暂停呢{:4_173:} 很实用的代码。感谢亚伦老师带来的好帖{:4_199:} 学习。 播放、暂停和停止全有啊。 这个加的停止是回到原位，好像没有什么必要吧，玩播放器这么久，第一次看见这个停止是回到原位，本来就打开和暂停，亚伦新的发明{:4_199:}
页:
[1]