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

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(); 
  
  /* 完毕！ */