html5 audio实现歌词同步

最新推荐文章于 2024-06-25 15:14:54 发布

mjiang1000

最新推荐文章于 2024-06-25 15:14:54 发布

阅读量5.8k

点赞数 1

分类专栏： html5 文章标签： html5 audio 歌词同步

本文链接：https://blog.csdn.net/mjiang1000/article/details/48375177

版权

本文介绍了HTML5的audio标签在播放音频时如何实现歌词同步。由于audio标签本身不提供歌词接口，作者提到了两种实现方案：1) 使用setInterval()定时检查；2) 监听timeupdate事件。这两种方法在Firefox和Chrome以及Android上进行了测试，但都存在不足。文章还提醒注意canplay事件可能因不同的场景多次触发，为实现歌词同步带来挑战。

摘要由CSDN通过智能技术生成

audio标签用于播放音频文件，很不幸，歌词文件并没有相应接口
addTextTrack() 向音频添加新的文本轨道。//各大浏览器都没有支持
有两种方法可以实现歌词同步：
1. 使用setInterval();
2. 监听timeupdate
两种方法，个人觉得都不是很完美，暂时找不到更好的方法

function media(dom,src){
   
    this.dom = dom;
    this.src = src;
    this.audio = this.dom.getElementsByTagName('audio')[0];
    this.control = $(this.dom).find(".control")[0];
    this.lyrbox = $(this.dom).find(".lyrics")[0];
    this.timer = this.dom.getElementsByTagName('span')[0];
    this.timepoint = $(this.dom).find(".time-point")[0];
    this.timebardiv = $(this.dom).find('.time-bar div')[0];
    this.formatlyr = [];
    this.intval = null;
    this.init();

    formattime = function(t){
   
        var min = parseInt(t/60);
        var ss = parseInt(t)%60 ;
        ss = ss>9?ss:"0"+ss;
        return min+":"+ss;
    }
}
media.prototype.init = function() {
   
    var self = this;
    self.dom.style["background"] = "url("+self.src.img+") no-repeat";
    self.dom.style["background-size"] = "100% 100%"