رتبة : ويب ماستر 
العضو
المسؤولين 
|
gulfmissile #
برمجه خفيفه عندك ملفين
1- JavaScript File (.js)اقتباس const audio = document.getElementById("mp3-audio");
const playBtn = document.getElementById("mp3Play");
const seek = document.getElementById("mp3Seek");
const volume = document.getElementById("mp3Volume");
const progress = document.getElementById("mp3Progress");
const current = document.getElementById("mp3Current");
const duration = document.getElementById("mp3Duration");
function formatTime(t) {
const m = Math.floor(t / 60);
const s = Math.floor(t % 60).toString().padStart(2,"0");
return `${m}:${s}`;
}
playBtn.addEventListener("click", () => {
if (audio.paused) {
audio.play();
playBtn.classList.add("pause");
} else {
audio.pause();
playBtn.classList.remove("pause");
}
});
audio.addEventListener("loadedmetadata", () => {
seek.max = audio.duration;
duration.textContent = formatTime(audio.duration);
});
audio.addEventListener("timeupdate", () => {
seek.value = audio.currentTime;
progress.style.width = (audio.currentTime / audio.duration) * 100 + "%";
current.textContent = formatTime(audio.currentTime);
});
seek.addEventListener("input", () => {
audio.currentTime = seek.value;
});
volume.addEventListener("input", () => {
audio.volume = volume.value;
});
اقتباس
.mp3-wrapper {
margin: 30px 0;
display: flex;
justify-content: center;
}
.mp3-player {
width: 100%;
max-width: 420px;
background: linear-gradient(135deg,#111,#222);
color: #fff;
padding: 20px;
border-radius: 18px;
box-shadow: 0 15px 40px rgba(0,0,0,.4);
font-family: system-ui, sans-serif;
}
.mp3-play {
width: 70px;
height: 70px;
margin: auto;
display: block;
border-radius: 50%;
border: none;
cursor: pointer;
background: linear-gradient(145deg,#00ffd5,#00bcd4);
position: relative;
transition: transform .3s;
}
.mp3-play:hover {
transform: scale(1.08);
}
.mp3-play::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-40%,-50%);
border-style: solid;
border-width: 12px 0 12px 20px;
border-color: transparent transparent transparent #000;
}
.mp3-play.pause::before {
border: none;
width: 18px;
height: 24px;
background: #000;
box-shadow: 12px 0 0 #000;
transform: translate(-50%,-50%);
}
.mp3-info {
display: flex;
align-items: center;
gap: 10px;
margin-top: 18px;
font-size: 14px;
}
.mp3-progress-box {
flex: 1;
height: 6px;
background: rgba(255,255,255,.2);
border-radius: 10px;
overflow: hidden;
}
.mp3-progress {
height: 100%;
width: 0%;
background: linear-gradient(90deg,#00ffd5,#00bcd4);
transition: width .15s linear;
}
.mp3-player input [type="range"]{
width: 100%;
margin-top: 10px;
accent-color: #00ffd5;
تنبيه لزم رفعها باي استضافه لتشغيل الاضافه تلقائي عند اي موضوع
اكواد الويب اقتباس
<iframe
width="100%"
height="166"
scrolling="no"
frameborder="no"
allow="autoplay"
src="http://xb0423.xb0.serverdomain.org/azaz16/azaz1.mp3">
*****اقتباس <button onclick="a.paused ? a.play() : a.pause()">▶ تشغيل / ⏸ إيقاف</button>
<audio id="a" src="http://xb0423.xb0.serverdomain.org/اسم المجلد/Msara2.mp3"></audio>
اقتباس <p align="center">برمجه خفيفه</p>
<p align="center">
<a target="_blank" href="http://xb0423.xb0.serverdomain.org/chelated101tarab/">تفضل</a></p>
|
|
عدد المشاركات : 255
المتواجدون الآن :
الجوائز : 0
السمعة : 0
الجنس : ذكر
دولتك : الكويت
المتصفح :
IP :
تاريخ التسجيل : 2011-03-06 (الأحد)
تاريخ الميلاد :