<div class="dh-player"> 
<?php if( get_field('link_320') ): ?>
 <audio controls class="audio-player">
   <source src="<?php the_field('link_320'); ?>" type="audio/mpeg">
 </audio> 
 <?php endif; ?>
</div>

<div class="dh-downloadbox">  

       <div class="dh-downloadbox-head">
        <h5>Download Music</h5>
       </div>

       <div class="dh-downloadbox-links">
                <?php if( get_field('link_128') ): ?>
       <a class="dh-download-link" href="<?php the_field('link_128'); ?>" download><i class="fa fa-download"></i>دانلود آهنگ با کیفیت ۱۲۸</a>
           <?php endif; ?>
           <?php if( get_field('link_320') ): ?>
       <a class="dh-download-link" href="<?php the_field('link_320'); ?>" download><i class="fa fa-download"></i>دانلود آهنگ با کیفیت ۳۲۰</a>
           <?php endif; ?>
                </div>

</div>

/*my ACF downloadbox CSS*/
.dh-downloadbox {
        border: 1px solid;
        border-color: #252525;
        margin: 16px 0;
}
.dh-downloadbox-head {
        background-color: #007BFF;
        padding: 5px;
        text-align: center;
}
.dh-downloadbox-head h5{
        color: #ffffff !important;
}

.dh-downloadbox-links {
        background-color: #252525 !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 16px;        
}

.dh-downloadbox-links i {
        color:  #007BFF !important;
        font-size: 13px;        
        margin-left: 5px;
}
a.dh-download-link {
        display: flex;
        align-items: center;
        margin: 5px;
        text-decoration: none;
        color: #ffffff !important;        
}

/** ACF Audio Player **/

.audio-player {
  height: 50px;
  width: 100%;
}        

<?php


// check if the repeater field has rows of data

if( have_rows('download_box') ):
    ?>
    <div class="sk-downloadbox">
    <h4 class="sk-download-title"><?php the_field('download_title'); ?></h4>
        <?php
    // loop through the rows of data
   while ( have_rows('download_box') ) : the_row();

       // display a sub field value
       ?>
       
       <div class="sk-downloadbox-item">
       <div class="sk-downloadbox-col1">
        <h5><?php the_sub_field('book_name'); ?></h5>
       <div class="sk-download-info"><span class="sk-download-text">نوع فایل: <?php the_sub_field('download_type'); ?></span>
       <span class="sk-download-text">پسورد: <?php the_sub_field('download_pass'); ?></span></div>
       </div>
       <div class="sk-downloadbox-col2">
     
       <a href="<?php the_sub_field('download_link'); ?>" > <button class="sk-download-btn"><i class="fa fa-download"></i> دانلود</button></a>
       <span class="sk-download-size"><?php the_sub_field('download_size'); ?> مگابایت</span>
       </div>
        </div>
       <?php
    
   endwhile;
   ?>
   </div>
   <?php
else :

   // no rows found

endif;

?>

/*my ACF Reapeater CSS*/
.sk-downloadbox {
        background-color: #fff;
}

.sk-downloadbox-item {
        display: flex;
                background-color: #ECF3F5;
        padding: 16px;
        margin-bottom: 16px;
        border: solid 1px #dbe5e8;
        border-radius: 7px;
        flex-wrap: wrap;
}
.sk-downloadbox-col1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex-grow: 1;
   min-width: 70%;

        
}
.sk-downloadbox-col2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-grow: 1;
   min-width: 30%;
        
}
.sk-download-title {
        padding-bottom: 16px;
}
.sk-download-size {
        font-size: 13px;
}
.sk-download-text {
        font-size: 15px;
        padding-left: 36px;
}
.sk-download-info {
                display: flex;
        padding-top: 10px;
}
.sk-download-btn {
        background-color: #6001D2 !important;
        border-radius: 5px !important;
        padding: 5px 23px 9px 23px !important;
        font-size: 17px;
        cursor: pointer;
        color: #fff !important;
        
}
.sk-download-btn:hover {
        background-color: #5404B4 !important;
                border-radius: 5px !important;
        font-size: 17px;
        cursor: pointer;
        color: #fff !important;
        border: none !important;
        
}

@media screen and (max-width: 880px) {
.sk-downloadbox-col1 {
        align-items: center;
        text-align: center;
        margin-bottom: 16px;
}