HTML-audio

1. 💯一种实现无缝循环播放音乐方案
为了节省页面资源，往往需要将一段小音频循环播放，通常做法是在audio标签上添加loop属性，但不幸的是，该属性并不能保证无缝循环（gapless looping）播放，明显的感觉到中间的停顿。

timeupdate 当前播放的时长发生改变时触发
currentTime 用来获取或控制当前播放的时间，单位为s
duration 获取媒体文件的总时长，以s为单位，如果无法获取，返回NaN

主要监听timeupdate事件，然后比较播放时间属性currentTime和音频的时长属性duration，在快要结束的时候，将currentTime属性重新设置为0，代码如下：
// 使用web audio API

var audio_file = new Audio('./videos/bg.mp3');
audio_file.play();
audio_file.addEventListener('timeupdate', function(){
    var buffer = 1.2;
    if(this.currentTime > this.duration - buffer){
        this.currentTime = 0;
        this.play();
    }}, false);

使用要求：
（1）音乐尽量是「淡入淡出」型，重音尽量不要在开头或结束位置，否则，即使能将音乐循环播放，也会感觉不衔接；
（2）API接口只能用于webkit内核，比较新的浏览器

2. 💯使用jquery控制修改audio的src属性,点击按钮播放不同音频
思路是，每次点击不同按钮，创建一个audio标签，并且给出src值，并且播放
1、首先准备一个放audio标签的容器
<div class="audiopalyer"></div>
2、然后准备两个按钮，或者什么，我这里是div
<div class="clickitem" audio="1.mp3">111</div> <div class="clickitem" audio="2.mp3">222</div>
3、然后用jquery控制，当然别忘了引入jquery,按照这个思路也可以用原生写哦
$(".clickitem").click(function(){ //首先置空容器，因为除了第一次点击总是有audio标签的 $(".audiopalyer").html("") //来一个audio内容，看好这里已经给src赋值了 var aud = $('<audio id="player" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="' + $(this).attr("audio") + '" hidden></audio>') //放到容器里区 $(".audiopalyer").html(aud) //获取当前audio var audio = $("#player")[0]; //局部load()一下 aud.load(); audio.play(); });

当然也可以直接默认播放

$(".clickitem").click(function(){
        //首先置空容器，因为除了第一次点击总是有audio标签的        
        $(".audiopalyer").html("")
        //来一个audio内容，看好这里已经给src赋值了
        var aud = $('<audio id="player"  class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="' + $(this).attr("audio") + '" autoplay hidden></audio>')
        //放到容器里区
        $(".audiopalyer").html(aud)
    });