Peaks.js（1）——demo

王小七七

于 2022-01-23 18:58:55 发布

阅读量553

点赞数

分类专栏：前端文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/nanana666/article/details/103886812

版权

前端专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了如何使用Peaks.js，一个JavaScript库。提供了示例展示如何通过Yarn或npm安装，以及如何在本地文件中引入并应用Peaks.js。内容包括下载、安装步骤及在项目中的基本使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示例:

本地下载：peaks.js

yarn add peaks.js/或者使用npm

本地文件

引入peaks.js
- import Peaks from 'peaks.js';

容器

<div id="peak-container">
    <div id="zoomview-contailer"></div>
    <div id="overview-contailer"></div>
    <audio id="audio">
        <source src="http://....." type="audio/mp3"/>
    </audio>
</div>

js部分

initOption(){

    const AudioContext = window.AudioContext || window.webkitAudioContext || window.moaAudioContext || window.msAudioContext;
    const myAudio = new AudioContext();
    const option = {
        containers: {
            overview: document.getElementById('overview-container'),
             zoomview: document.getElementById('zoomview-container)
        },
        mediaElement: document.getElementById('audio'),
        audioContext: myAudio,
        height: 100
    };
    return option
}