katspaugh / wavesurfer.js

Audio waveform player
https://wavesurfer.xyz
BSD 3-Clause "New" or "Revised" License
8.74k stars 1.62k forks source link

Big size audio will let other audio display fail; #2665

Closed yg2342423523 closed 1 year ago

yg2342423523 commented 1 year ago

I use the newest vision,but i found when i add the new audio into the folder which has big files size,it will only display that one,and others all fail;Check the pciture: 0211bcc92598e694d01dfea87f08fec 727af08d8ec7088e9faba82caadd097

prakharpbuf commented 1 year ago

are there any errors in the developer console?

entonbiba commented 1 year ago

@yg2342423523 please provide link or code so we can debug.

yg2342423523 commented 1 year ago

I USE It to develop a adobe premiere pro cep:here is wave.js

function createWaveLine(url,name){
  console.log("url: ",url,"name: ",name)
  return new Promise((resovle,reject)=>{
    // let  waveLineWrapper = document.createDocumentFragment()
    let audioTime =  document.createElement('span')
    let auditoEl = getAudioTime(url) // 获取视频
    audioTime.classList.add('audioTime')
    auditoEl.addEventListener('canplay',()=>{
      audioTime.innerHTML =  getTimes(auditoEl.duration)
      let  waveLineWrapper = document.createElement('div')
      waveLineWrapper.classList.add('wavewrapper')
      let audioControl =  addAudioControl()
      let wave =  createWave(url)
      // waveLineWrapper.append(audioControl,wave,`${audioTime}:${name}`)
      waveLineWrapper.append(audioControl,wave,audioTime)

      addWaveEvent(waveLineWrapper)
      addAudioControlEvent(waveLineWrapper)
      resovle(waveLineWrapper)
    })
  })

}

function getTimes(t) {
  let h = parseInt(t / 60 / 60 % 24)
  let m = parseInt(t / 60 % 60)
  let s = parseInt(t % 60)
  //三元表达式 补零 如果小于10 则在前边进行补零 如果大于10 则不需要补零
  h = h < 10 ? '0' + h : h
  m = m < 10 ? '0' + m : m
  s = s < 10 ? '0' + s : s
return `${m}:${s}`
}

function addAudioControlEvent(wrapperEl){
  let audioControl = wrapperEl.querySelector('.audio-icon')
  let wavesurfer = wrapperEl.querySelector('.waveform').__wavesurfer
  audioControl.addEventListener('click',()=>{
    wavesurfer.playPause()
    let isplay = wavesurfer.isPlaying()
    if(isplay){
      audioControl.classList.add('pause')
    }else{
      audioControl.classList.remove('pause')
    }

  })
}
// wave 添加播放和暂停事件
function addWaveEvent(wrapperEl){
  let audioControl = wrapperEl.querySelector('.audio-icon')
  let wavesurfer = wrapperEl.querySelector('.waveform').__wavesurfer
  wavesurfer.on('pause', function () {
    audioControl.classList.remove('pause')
  });
  wavesurfer.on('play', function () {
    audioControl.classList.add('pause')
  });
}

// 创建wave
function createWave (url){
  if(!url){
    console.log('url 不存在')
    return 
  }
  let waveEl = document.createElement('div')
  waveEl.classList.add('waveform')
  var wavesurfer = WaveSurfer.create({
      container: waveEl,
      waveColor: '#fff',
      progressColor: '#ccc',

      barMinHeight:1,
      height:70

      // cursorColor //指示播放头位置的光标的填充颜色。
  });

  wavesurfer.loadBlob(url)

  console.log(url)
  // wavesurfer.load('https://www.runoob.com/try/demo_source/horse.ogg')
  // wavesurfer.load(url)
  // getAudioTime(url)
  waveEl.__wavesurfer = wavesurfer
  return waveEl
}

 function  getAudioTime(blob) {
  let url =  window.URL.createObjectURL(blob)
  let audio =  document.createElement('audio')
  audio.src = url
  console.dir(audio);
  return audio
}

function addAudioControl (){
  let audioEl =  document.createElement('div')
  audioEl.classList.add('audio-icon')
  return audioEl
}`

main.js
`(function reloading() {
 'use strict';
 var path, slash;
 path = location.href;
    if(getOS() == "MAC") {
        slash = "/";
        path = path.substring(0, path.length - 11);
    }
    if(getOS() == "WIN") {
        slash = "/";
        path = path.substring(8, path.length - 11);
    }

// path += "/packs";
// console.log(window.__adobe_cep__);

generatePrviews(configJson.path);

// console.log(Config.path)
    // console.log(configJson)

 }());

function generatePrviews(thisPath){

    console.log("path",thisPath);

    var pacsNames = undefined;
    var csInterface = new CSInterface();

    csInterface.evalScript('getPreviewPaths("'+ thisPath +'")',

    function(res){
    pacsNames = JSON.parse(res); // 获取jsx里得到的json文件路径;
    }

    );

    setTimeout(

    function(){genPreviews(pacsNames);}

    ,2000);

//异步输出,先执行jsx,再执行接下来的动作;

}

function searchFilter(){

    var searchString = document.querySelector("input").value;   //获取input的值

    removeNamesno(searchString);

    }

    function removeNamesno(str){
        console.log(str);
    const elements = document.querySelectorAll(".lineClass")

    for(let i = 0; i < elements.length; i++) {
        elements[i].style.display = 'none';
        if (elements[i].querySelector("button").innerHTML.indexOf(str) !== -1) {
            elements[i].style.display = 'block';
        }
    }
}

// 从json中获取了关于文件的数组,开始创建div;

/**
 * 
 * @param {array} names 路径数组
 * @returns element[] 
 */
 function genPreviews(names){
   var thisNode = document.querySelector("p");
   thisNode.parentNode.removeChild(thisNode);

//删除正在加载

    var audioDiv = document.querySelector(".content");
    var thisAudio;
    let createWave = []
    for(var i = 0; i < names.length; i++){
        // var test =  window.cep.fs.readFile(names[i],'UTF8');
        // let xhr = new XMLHttpRequest()
        // xhr.open('get',names[i])
        // xhr.responseType ='blob'
        // xhr.i = i

        createWave.push(xhrGetFile(names[i],createWaveLine))

    //  xhr.onload = ({currentTarget})=>{

    // }
    }
    Promise.all(createWave).then(els=>{
        els.forEach((el,i)=>{
            console.log('12312321321',names[i],el,i);
            let thisText = document.createElement("button");
            thisText.classList.add("thisTextClass")
            const newName =  names[i].slice(names[i].lastIndexOf("\\")+1,names[i].lastIndexOf("."));

            thisText.innerText = newName;
            thisText.value = names[i];
            // 按钮创建点击时间,点击了就去找到src导入
            var clickPlace = document.querySelectorAll(".thisTextClass");

            for( var j = 0; j < clickPlace.length; j++){

                clickPlace[j].onclick =  function(){
                    var path = this.value.replace(/\\/g, '/');
                    console.log(path);
                    var csInterface = new CSInterface();
                    csInterface.evalScript('importAudio("'+path+'")');
                }
            }
            const line = document.createElement("div");
            line.classList.add("line");
            thisText.classList.add("thisTextClass")
            let allThings = document.createElement("div");
            allThings.className += "lineClass";
            allThings.appendChild(thisText);
            allThings.appendChild(el);
            allThings.appendChild(line)
            audioDiv.appendChild(allThings);
        })
    })

    // setTimeout(function(){singleClick();},1000);

}

//创建新的div

// function singleClick(){

//  }

//      clickPlace.onclick = function() {

//      alert("e12e12");
//  // var csInterface = new CSInterface();
//  // csInterface.evalScript('importFiles');

//    }

function xhrGetFile (path){
    return  new Promise((reslove,reject)=>{
        let xhr = new XMLHttpRequest()
        xhr.open('get',path)
        xhr.responseType ='blob'
        xhr.onload  = function({currentTarget}){
            createWaveLine(currentTarget.response,path).then((el)=>{
                reslove(el)
            })
        }
        xhr.send()
    })
}

function goIntoJSX() {

    }

function getOS() {
        var userAgent = window.navigator.userAgent,
        platform = window.navigator.platform,
        macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
        windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
        os = null;

        if(macosPlatforms.indexOf(platform) != -1) {
            os = "MAC";
        } else if(windowsPlatforms.indexOf(platform) != -1) {
            os = "WIN";
        }
        return os;
    }

     (function () {
        'use strict';

        var csInterface = new CSInterface();

        function init() {

            // Ugly workaround to keep track of "checked" and "enabled" statuses
            var checkableMenuItem_isChecked = true;
            var targetMenuItem_isEnabled = true;

            // Flyout menu XML string 
            var flyoutXML = '<Menu> \
                            <MenuItem Id="set" Label="设置文件夹" Enabled="true" Checked="false"/> \
                            \
                            <MenuItem Id="enabledMenuItem" Label="更多内容" Enabled="true" Checked="false"/> \
                            \
                            <MenuItem Id="guanyu" Label="关于" Enabled="true" Checked="false"/> \
                            \
                            </Menu>';

            // Uses the XML string to build the menu
            csInterface.setPanelFlyoutMenu(flyoutXML);

            // Flyout Menu Click Callback
            function flyoutMenuClickedHandler (event) {

                // the event's "data" attribute is an object, which contains "menuId" and "menuName"
                console.dir(event); 
                switch (event.data.menuId) {

                    case "guanyu":
                        var cs = new CSInterface();
                        cs.evalScript("bbb()");

                        break;

                    case "set": 

                    var csInterface             =   new CSInterface();
                    var OSVersion               =   csInterface.getOSInformation();
                    var userDataPath            =   csInterface.getSystemPath(SystemPath.USER_DATA); 
                    var justTheFirstBit         =   userDataPath.split('A');
                    var actualDestinationPath   =   justTheFirstBit[0];

                    if (OSVersion) {
                        // The path always comes back with '/' path separators. Windows needs '\\'.
                        if (OSVersion.indexOf("Windows") >= 0) {
                            actualDestinationPath = "C:\\Program Files (x86)\\Common Files\\Adobe\\CEP\\extensions\\com.gan.audiosearch\\config";
                            var sep = '\\';
                            actualDestinationPath = actualDestinationPath.replace(/\//g, sep);
                            window.cep.process.createProcess('C:\\Windows\\explorer.exe', actualDestinationPath);
                        } else {
                            actualDestinationPath = "/Library/Application Support/Adobe/CEP/extensions/com.adobe.ganyixia/commonFiles";
                            window.cep.process.createProcess('/usr/bin/open', actualDestinationPath);
                        }
                    }

                        break;

                        // case "moyu": 
                        // window.location.href='index.html';
                        // break;

                    case "enabledMenuItem": 
                    var gan=new CSInterface();
                    gan.openURLInDefaultBrowser('https://gan.cool')
                        break;

                    default: 

                }
            }

            // Listen for the Flyout menu clicks
            csInterface.addEventListener("com.adobe.csxs.events.flyoutMenuClicked", flyoutMenuClickedHandler);

            // themeManager.init();

        }

        init();

    }());