HTML Audio player صوره ورابط وصوت

عدد المشاهدات الان

ضعها بالمكان المناسب
الاضافه لـ إعداد اللغة HTML/JavaScript

1- الشكل الاول فردي عرض

<div class="HTML_Audio_player">
<div class="Audio_Player_image"><img style="border-radius: 60px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5kLPGz2zuEwk4MWO03wvfLB_KXpIKTYiaZZlYx2fDeE9N689k7822sZ_Z9SWAxIZUvxSX7Acqd-IrAW7PaCGb6hTqktzIPvrCI6axVk3VxrnyHWHaGwrIs7E_pNtANjbGfpc_2Ekc2Xs2/s1440/PhotosfromaboveaerialKuwait5.jpg" /></div>
<div class="player-content">
<div class="player-info">
<a class="song-name" target="_blank" href="https://youtu.be/GmeDwAy_wFs">قصه حيات [يوتيوب]</a>
<a class="artist" href="#">1</a>
</div>
<div class="k2_audio_player">
<audio controls style="width: 80%;">
<source src="https://mvukdragovic.rs/mp3/acd01.mp3" type="audio/mpeg"/>
</audio>
</div>
</div>
</div>

<style>
.HTML_Audio_player { z-index:10;
background: linear-gradient(135deg,#f4f8ff 0,#f4f8ff 49%,#e5efff 49%,#e9e8f2 100%);
color: inherit;
min-height:120px; max-height:150px;
display:flex;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
flex-direction:row;padding: 20px 10px 20px;}

.Audio_Player_image { width:150px; display: flex; justify-content: center; }
.player-content {
flex-grow:1;
display:flex;
flex-direction:column;}

.player-info {
flex-grow:1; display:flex;
flex-direction:column;
justify-content:center;
padding-left:10px;}

.song-name { font-size:18px; font-weight:600; } .k2_audio_player { display:flex;}

audio { flex-grow:1; height:40px; }

audio::-webkit-media-controls-play-button {
background-color: #B1D4E0;
border-radius: 50%;}

audio::-webkit-media-controls-play-button:hover {
background-color: rgba(177,212,224, .7);}

audio::-webkit-media-controls-panel {
background: #e9e8f2;}

.Audio_Player_image img:hover{animation:rotating 3s linear infinite} @keyframes rotating{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
</style>

2- الشكل الثاني طول

<div class="HTML_Audio_player">
<div class="Audio_Player_image">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaPgr43k61iitizoUZ59g-ILdetPmntliGXh7yoc8Lwwy2wktPbqLln8MTLOb9TtUGSZ5TJvuW1B52YuVWuRthHQwXlIDof6Z1AFbRg97Nu-sgX9DfDF43Eq1kbZomMBmWnikLtCeepr9U/s945/PhotosfromaboveaerialKuwait4.jpg" /></div>
<div class="k2_audio_info">
<a class="song-name" target="_blank" href="https://youtu.be/kXolE4ySgyM">مصيرك يوم [يوتيوب]</a>
<p style="text-align: center; padding:0px 10px 0px;"> اهلا وسهلا في مدونه صفحات هايف وهكركوز الكويت لبلوجر</p>
</div>
<div class="k2_audio_player">
<audio controls>
<source src="https://mvukdragovic.rs/mp3/gtr06.mp3" type="audio/mpeg"/>
</audio>
</div>
</div>

<style>

.HTML_Audio_player{
Position: relative;
width:350px;
background: #faf3f4;
box-shadow: 0 50px 80px rgba(0,0,0,0.25);
}

.HTML_Audio_player .Audio_Player_image{
position: relative;
width:100%;
height: 350px;

}

.HTML_Audio_player .Audio_Player_image img{
position: absolute;
top:0;
bottom: 0;
width: 100%;
height:100%;
object-fit: cover;

}

.HTML_Audio_player audio {
width: 100%;
outline: none;
}

.song-name { font-size:18px;
font-weight:600;
display: flex;
justify-content: center;
margin-top: 10px;
}
audio::-webkit-media-controls-play-button {
background-color: #B1D4E0;
border-radius: 50%;}
</style>

3- الشكل الاخير من المصدر غير معدل

<div class="audio_Player_grid">
<div class="HTML_Audio_player">
<div class="Audio_Player_image">

<img src="https://i1.sndcdn.com/avatars-000279088807-w6845m-t200x200.jpg" /></div>
<div class="k2_audio_info">
<a class="song-name" target="_blank" href="https://youtu.be/BWdZjZV6bEk">Kontinuum - Aware [NCS Release]</a>
</div>
<div class="k2_audio_player">
<audio controls>
<source src="https://drive.google.com/uc?export=download&id=1r_TZWVoEhAKUGI4MzrLvpoQGgfo8s_On" type="audio/mpeg"/>
</audio>
</div>
</div>

<div class="HTML_Audio_player">
<div class="Audio_Player_image">

<img src="https://i1.sndcdn.com/avatars-000279088807-w6845m-t200x200.jpg" /></div>
<div class="k2_audio_info">
<a class="song-name" target="_blank" href="https://youtu.be/BWdZjZV6bEk">Kontinuum - Aware [NCS Release]</a>
</div>
<div class="k2_audio_player">
<audio controls>
<source src="https://drive.google.com/uc?export=download&id=1r_TZWVoEhAKUGI4MzrLvpoQGgfo8s_On" type="audio/mpeg"/>
</audio>
</div>
</div>
<div class="HTML_Audio_player">
<div class="Audio_Player_image">

<img src="https://i1.sndcdn.com/avatars-000279088807-w6845m-t200x200.jpg" /></div>
<div class="k2_audio_info">
<a class="song-name" target="_blank" href="https://youtu.be/BWdZjZV6bEk">Kontinuum - Aware [NCS Release]</a>
</div>
<div class="k2_audio_player">
<audio controls>
<source src="https://drive.google.com/uc?export=download&id=1r_TZWVoEhAKUGI4MzrLvpoQGgfo8s_On" type="audio/mpeg"/>
</audio>
</div>
</div>


<div class="HTML_Audio_player">
<div class="Audio_Player_image">

<img src="https://i1.sndcdn.com/avatars-000279088807-w6845m-t200x200.jpg" /></div>
<div class="k2_audio_info">
<a class="song-name" target="_blank" href="https://youtu.be/BWdZjZV6bEk">Kontinuum - Aware [NCS Release]</a>
</div>
<div class="k2_audio_player">
<audio controls>
<source src="https://drive.google.com/uc?export=download&id=1r_TZWVoEhAKUGI4MzrLvpoQGgfo8s_On" type="audio/mpeg"/>
</audio>
</div>
</div>

</div>

<style>
.audio_Player_grid{
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}

.HTML_Audio_player{
Position: relative;
width:350px;
background: #faf3f4;
box-shadow: 0 50px 80px rgba(0,0,0,0.25);
margin-top: 10px;
margin-bottom: 10px;
}

.HTML_Audio_player .Audio_Player_image{
position: relative;
width:100%;
height: 350px;

}

.HTML_Audio_player .Audio_Player_image img{
position: absolute;
top:0;
bottom: 0;
width: 100%;
height:100%;
object-fit: cover;

}

.HTML_Audio_player audio {
width: 100%;
outline: none;
}

.song-name { font-size:18px;
font-weight:600;
display: flex;
justify-content: center;
margin-top: 10px;
}
audio::-webkit-media-controls-play-button {
background-color: #B1D4E0;
border-radius: 50%;}
</style>

ويمكنك التعديل بمايناسبك وسلامتكم

اذا حبيت نسخ المقالهـ