OpenSkiAI/app.js at main · jam2ja/OpenSkiAI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
// import WaveSurfer from 'wavesurfer.js';

const wavesurfer = WaveSurfer.create({
    container: document.body,  // 將波形圖顯示在頁面的 body 中
    waveColor: 'rgb(255, 215, 0, 0.5)',  // 波形顏色
    progressColor: 'rgb(255, 165, 0)',  // 進度條顏色
    barWidth: 10,  // 波形條的寬度
    barRadius: 10,  // 波形條的圓角
    barGap: 2,  // 波形條之間的間距
    //url: '/examples/audio/demo.wav',  // 音頻文件路徑
    peaks: [
        [
          0, 0.0023595101665705442, 0.012107174843549728, 0.005919494666159153, -0.31324470043182373, 0.1511787623167038,
          0.2473851442337036, 0.11443428695201874, -0.036057762801647186, -0.0968964695930481, -0.03033737652003765,
          0.10682467371225357, 0.23974689841270447, 0.013210971839725971, -0.12377244979143143, 0.046145666390657425,
          -0.015757400542497635, 0.10884027928113937, 0.06681904196739197, 0.09432944655418396, -0.17105795443058014,
          -0.023439358919858932, -0.10380347073078156, 0.0034454423002898693, 0.08061369508504868, 0.026129156351089478,
          0.18730352818965912, 0.020447958260774612, -0.15030759572982788, 0.05689578503370285, -0.0009095853311009705,
          0.2749626338481903, 0.2565386891365051, 0.07571295648813248, 0.10791446268558502, -0.06575305759906769,
          0.15336275100708008, 0.07056761533021927, 0.03287476301193237, -0.09044631570577621, 0.01777501218020916,
          -0.04906218498945236, -0.04756792634725571, -0.006875281687825918, 0.04520256072282791, -0.02362387254834175,
          -0.0668797641992569, 0.12266506254673004, -0.10895221680402756, 0.03791835159063339, -0.0195105392485857,
          -0.031097881495952606, 0.04252675920724869, -0.09187793731689453, 0.0829525887966156, -0.003812957089394331,
          0.0431736595928669, 0.07634212076663971, -0.05335947126150131, 0.0345163568854332, -0.049201950430870056,
          0.02300390601158142, 0.007677287794649601, 0.015354577451944351, 0.007677287794649601, 0.007677288725972176,
        ],
      ],  // 自定義波形數據
    duration: 22,  // 音頻總時長
  });

// 加載音頻文件
wavesurfer.load('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3');

//wavesurfer.load('file.mp3');

// 播放/暫停按鈕
const playButton = document.getElementById('play-button');
playButton.addEventListener('click', () => {
  wavesurfer.playPause();
  if (wavesurfer.isPlaying()) {
    playButton.innerHTML = '<i class="fas fa-pause"></i>';
  } else {
    playButton.innerHTML = '<i class="fas fa-play"></i>';
  }
});
/*const playButton = document.getElementById('play-button');
playButton.addEventListener('click', () => {
    wavesurfer.playPause();
});*/

wavesurfer.on('finish', () => {
    wavesurfer.setTime(0);
  });


/* ---- Basic Design of Audio Vision ---- */
/*// 初始化 WaveSurfer
const wavesurfer = WaveSurfer.create({
    container: '#waveform',  // 將波形圖顯示在 id 為 "waveform" 的元素中
    waveColor: 'rgb(255, 215, 0, 0.5)',  // 波形顏色
    progressColor: 'rgb(255, 165, 0)',  // 播放進度顏色
    height: 50,  // 波形圖高度
    responsive: true,  // 使波形圖響應式
});*/