HTML5音量控制Audio淡入淡出效果

<!-- 添加 html5 audio元素 -->

<audio id="myaudio" preload="auto">
  <source src="路徑自行修改/audio/oldboy.mp3">
  <source src="路徑自行修改/audio/oldboy.ogg">
</audio>

<!-- 添加bootstrap panel組件 -->

<div class="panel panel-primary">
  
  <!-- 添加panel的頭部 -->
  <div class="panel-heading">HTML5音量控制淡入淡出效果</div>
  
  <!-- 添加panel主體 -->
  <div class="panel-body">
    
    <!-- 添加按鈕組 -->
    <div class="btn-group btn-group-lg" id="vol">
      
      <!-- 這里添加控制按鈕 -->
      
      <!-- 控制淡出效果 -->
      <button id="audiofadeout" class="btn btn-default" title="音效淡出效果"><i class="glyphicon glyphicon-volume-down"></i></button>
      <!-- 控制淡入效果 -->
      <button id="audiofadein" class="btn btn-default" title="音效淡入效果"><i class="glyphicon glyphicon-volume-up"></i></button>
    
      
    </div>
    
  </div>
  
   <!-- 添加panel的頁底 -->
   <div class="panel-footer">說明： 請在音樂播放過程中點擊以上音量控制按鈕</div>
  
</div>


<!-- 推薦開源CDN來選取需引用的外部JS //-->
<script type="text/javascript" src="路徑自行修改/jquery/1.11.1/jquery.min.js"></script>

<!-- 添加bs類庫 -->
<script src="路徑自行修改/js/bootstrap.min.js"></script>

下面我們看下Jquery如何控制的

/*Javascript代碼片段*/


var $myaudio = $('#myaudio'),
  eleaudio = $myaudio.get(0); //獲取audio對象
  
  //播放
  eleaudio.play();
  
  //添加音量控制
  $('#audiofadeout').click(function(){
    $myaudio.animate({volume: 0.1}, 3000); 
  });
  
  //如下是音量淡入效果按鈕
  $('#audiofadein').click(function(){
    $myaudio.animate({volume: 1},3000);
  });
  
  
  //添加bs3的tooltip效果
  $('#vol').find('button').tooltip(); 
  
  /* 完畢！ */
  

原文鏈接：HTML5音量控制Audio淡入淡出效果