मैं वेब ऐप बनाने के लिए wavesurfer.js का उपयोग करने का प्रयास कर रहा हूं, और मैं यह नहीं समझ सकता कि उनके एलान प्लगइन का उपयोग करके प्रतिलेख/कैप्शन कैसे प्रदर्शित किया जाए।

    <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.1.2/wavesurfer.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.1.2/plugin/wavesurfer.elan.min.js"></script>  

निम्नलिखित प्लगइन के लिए स्क्रिप्ट है।

<body>
    <div id="waveform"></div>

    <div style="text-align: center">
        <button class="btn btn-primary" onclick="wavesurfer.playPause()">
            <i class="glyphicon glyphicon-play"></i>
                            Play/Pause
        </button>
    </div>

    <div id="annotations"></div>
    
    <script>

        var wavesurfer = WaveSurfer.create({
            container: document.querySelector('#waveform'),
            progressColor: "black",
            waveColor: 'gray',
            loop: true,
            scrollParent: true,
            maxCanvasWidth: 500,
            mediaControls: true,        
            minPxPerSec: 75,
            hideScrollbar: false
        });   
        
        wavesurfer.on('ready', function () {
            var elan = Object.create(WaveSurfer.ELAN);
            elan.init({
                wavesurfer: wavesurfer,
                url: 'https://raw.githubusercontent.com/katspaugh/wavesurfer.js/master/example/elan/transcripts/001z.xml',
                container: "#annotations",
                tiers: {
                    Text: true,
                    Comments: false
                }           
            });
        });
        
        wavesurfer.load('https://raw.githubusercontent.com/katspaugh/wavesurfer.js/master/example/elan/transcripts/001z.mp3');       
    
        </script> 
  
    </body>

मुझे wavesurfer.js वेबसाइट के अलावा इसका कोई काम करने वाला उदाहरण नहीं मिला। क्या कोई मुझे बता सकता है कि मैं क्या खो रहा हूँ? शायद इसका मेरी स्क्रिप्ट के अधूरे होने से कुछ लेना-देना है।

1
DmmR 30 जिंदा 2021, 00:29

1 उत्तर

सबसे बढ़िया उत्तर

यह रहा कोडपेन पर काम करने का उदाहरण


मैं इसे नीचे समझाने जा रहा हूं:

चरण 1: HTML सेटअप

अपनी html फ़ाइल में संबंधित सीडीएन लिंक जोड़ें।
यदि आप region नहीं चाहते हैं तो आप दूसरी स्क्रिप्ट को छोड़ सकते हैं।

<script src="https://unpkg.com/wavesurfer.js"></script>
<script src="https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.regions.js"></script>
<script src="https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.elan.js"></script>

फिर हमें दो कंटेनर चाहिए। उनमें से एक waveform के लिए और दूसरा annotations के लिए। एक प्ले / पॉज़ बटन भी है।

<div class="wave-container">
  <div id="waveform"></div>
</div>

<button class="toggle" onCLick="togglePlay()">play/pause</button>

<div id="annotations" class="table-responsive"></div>

चरण २ : जे एस configs

सबसे पहले हम WaveSurfer प्लेयर को परिभाषित करने जा रहे हैं और इसके कॉन्फिगर में Elan प्लगइन जोड़ेंगे। उसके बाद आप एक एमपी3 को उदाहरण के तौर पर लोड कर सकते हैं।

var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'violet',
    progressColor: 'purple',
    backend: 'MediaElement',
    plugins: [
      WaveSurfer.elan.create({
        url: 'https://wavesurfer-js.org/example/elan/transcripts/001z.xml',
        container: '#annotations',
        tiers: {
          Text: true,
          Comments: true
        }
      }),
      WaveSurfer.regions.create()
    ]
}); 

अब आपकी स्क्रीन पर Elan ट्रांसक्रिप्शन है। आइए प्रत्येक प्रतिलेख पर क्लिक को संभालने के लिए एक select ईवेंट जोड़ें।

wavesurfer.elan.on('select', function(start, end) {
  wavesurfer.backend.play(start, end);
});

अंत में, हम audioprocess ईवेंट पर क्षेत्रों को संभालने जा रहे हैं।

let prevAnnotation, prevRow, region;
let onProgress = function(time) {
  let annotation = wavesurfer.elan.getRenderedAnnotation(time);

  if (prevAnnotation != annotation) {
    prevAnnotation = annotation;

    region && region.remove();
    region = null;

    if (annotation) {
      // Highlight annotation table row
      let row = wavesurfer.elan.getAnnotationNode(annotation);
      prevRow && prevRow.classList.remove('success');
      prevRow = row;
      row.classList.add('success');
      let before = row.previousSibling;
      if (before) {
        wavesurfer.elan.container.scrollTop = before.offsetTop;
      }

      // Region
      region = wavesurfer.addRegion({
        start: annotation.start,
        end: annotation.end,
        resize: false,
        color: 'rgba(223, 240, 216, 0.7)'
      });
    }
  }
};

wavesurfer.on('audioprocess', onProgress);
1
Mosrainis 23 फरवरी 2021, 17:50