Wavesurfer.js的使用教程

前言:

Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件,本文主要记录它及其视觉效果插件Regions插件的使用方法。



options

实例演示:
      this.wavesurfer = WaveSurfer.create({

         container: "#wave",

         waveColor: "#368666",

         progressColor: "#6d9e8b",

         cursorColor: "#fff",

         height: 80,

         plugins: [RegionsPlugin.create()]

});

方法的调用:

方法调用

实例演示:

  // 音频加载

   this.wavesurfer.load(audioUrl);


// 获取总时长

    let duration = parseInt(this.wavesurfer.getDuration());


// 停止播放并回到起始点

    this.wavesurfer.stop();


事件绑定:

事件绑定

实例演示:

// 加载时候

   this.wavesurfer.on("loading", percents => {

         // 当前加载的进度

           this.percent = percents;

    });


// 加载成功

      this.wavesurfer.on("ready", () => {

            this.progress = false;

      });


 // 播放中

      this.wavesurfer.on("audioprocess", () => {

            this.currentTime = this.getCurrentTime();

       });


// 结束播放

      this.wavesurfer.on("finish", () => {

          this.wavesurfer.pause();

       });

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,037评论 3 119
  • 从标题你或许可以看出我个人并不是一个美剧迷,相对于电视剧我更倾向于看电影。虽然由于专业的原因,在学校的时候,会试着...
    礼貌狼阅读 4,816评论 2 14
  • 人生就是一场修行。慢慢地把一切都看淡了。曾经的大喜大悲,思念亦或仇恨慢慢的都变淡了。谁也不欠你的,你也不欠谁的。不...
    清扬hq阅读 1,306评论 0 1