how can i pretend to late reload when page has an audio-CodePudding

i have an audio in page and it causes page to load slower here is my code

<div style="margin-left: 160px;">
    <audio controls id="audio">
      
      <source src="" type="audio/mpeg">
    
    </audio>
    </div>

    <script type="text/javascript">
    
   $(document).ready(function(){
      
        $("#audio").attr('src','test3.mp3');
      
    });
    
    </script>

audio is almost 5min long and its size is almost 5mb. Due to this page loads very slow. Can any one have solution, thanks.

CodePudding user response：

You need to be more specific with your problem but If I understood you need:

First off all trim your audio to -10 seconds long. It won't play for all 5 minutes anyway so there is no logic to keep that audio duration.

Then, you can include src="test3.mp3" directly in audio HTML tag. Here is the code:

<div style="margin-left: 160px;">
   <audio id="audio" controls src="test3.mp3" loop="loop"></audio>
</div>

<script type="text/javascript">

$(document).ready(function(){
  
    $("#audio").get(0).play();
  
});

</script>

CodePudding user response：

<audio controls id="audio">
      <source src="test3.mp3" type="audio/mpeg">
    </audio>

try this

CodePudding user response：

You could set preload to none, then load the audio with javascript after page load. Although you will still have a time delay after the page load while the audio is streamed.

<audio controls id="audio" preload="none">
  <source src="test3.mp3" type="audio/mpeg">
</audio>

Vanilla JS

document.addEventListener("DOMContentLoaded", function(){
  var audio = document.getElementById("audio");
  audio.play(); 
});

jQuery

$(document).ready(function(){
  $("#audio").get(0).play();
});