- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用 wavesurfer.js 为使用 JavaScript 动态创建的元素创建波形。这是我的代码:
$(document).ready(function() {
var id = 9;
$("#audio").append('<div class="row" id="wave' + id + '"></div>');
$('#audio').on('DOMNodeInserted', 'div', function() {
var selectedId = $(this).prop('id');
console.log(selectedId);
window['waveForm' + selectedId] = Object.create(WaveSurfer);
window['waveForm' + selectedId].init({
container: $(this),
waveColor: 'violet',
progressColor: 'purple'
});
window['waveForm' + selectedId].on('ready', function() {
window['waveForm' + selectedId].play();
});
window['waveForm' + selectedId].load(selectedId + '.mp3');
});
});
console.log 显示元素的正确 ID,因此选择器似乎可以工作,但是 wavesurfer.js 给出以下错误:
Uncaught TypeError: this.container.appendChild is not a function
最佳答案
抱歉,我之前在休息,无法深入研究。但是尽量不要打开duplicate questions最好在我们解决问题时更新问题(当然除非出现完全不同的问题)
以下是您尝试使用更简单的方法执行的功能的完整注释实现。
// create a global array to hold our WaveSurfers
var WaveSurfers=[];
$(document).ready(function(){
// add your element
// dont give any of them ids
$("#audio").append('<div class="row needsWave"></div>');
// call the function we will define in a second
// pass in the path to your file
addWaveSurfer('http://dodsoftware.com/sotests/wavesurfer/minecraftrap.mp3');
});
function addWaveSurfer(path){
// create instance of WaveSurfer
var tempWavesurferObject = Object.create(WaveSurfer);
// initialize the object
// ".needsWave:last" gets the last element with the class "needsWave"
// which will be the element we just added
tempWavesurferObject.init({
container: $( ".needsWave:last" )[0],// "[0]" gets the DOM element from the jQuery object
waveColor: 'violet',
progressColor: 'purple'
});
tempWavesurferObject.on('ready', function () {
tempWavesurferObject.play();
});
tempWavesurferObject.load(path); // load the file we passed in
// add the WaveSurfer to the global array so we can keep up with it
WaveSurfers.push(tempWavesurferObject);
// below shows how to access the WaveSurfers later by stoping the playback after a few seconds
setTimeout(function(){
var last = WaveSurfers.length-1; // get index of last WaveSurfer element
WaveSurfers[last].stop();
}, 10000);
}
<script src="https://cdn.rawgit.com/katspaugh/wavesurfer.js/master/dist/wavesurfer.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="audio"></div>
关于javascript - 针对容器 div 初始化 WaveSurfer,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32292830/
我在使用 Wavesurfer 的网络项目中遇到了障碍。我已经在我的项目中安装了 wavesurfer.js 和 react-wavesurfer 作为节点模块。 Wavesurfer.js 似乎工作
1.查看效果图 向前选中: 向后选中: 代码如下(示例): ?
我尝试了github示例中的一些不同脚本以及我的脚本: https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.mi
我正在使用WaveSurferJs播放流音频并在 wavesurfer init 后端设置为 MediaElement。还绘制了峰值 var wavesurfer = WaveSurfer.creat
我正在使用 katspaugh's waveSurfer library用于播放声音文件。 我编写代码以这种方式显示“耗时/总时间”。 waveSurfer.on('play', function()
我想使用 wavesurfer.js 添加数字音频文件的时间线,不幸的是我的代码不起作用。我可以知道从哪里可以加载我的文件的timeline.js 吗? Wavesurfer 时间线插件是否已弃用?
有人能发现这里的问题吗? var wavesurfer = WaveSurfer.create({ container: '#waveform', waveColor: 'vio
我已经建立了一个waveurfer音频模型,该模型在chrome和firefox上运行良好。它马上开始。当我想在safari上点击播放时,它等待整个文件下载完毕,然后才播放...我在safari上打开
我正在使用 wavesurfer.js当页面上只有一个实例时效果很好,但我有多个实例并且不知道(因为我是一个 javascript 新手)如何将播放按钮链接到不同的实例。 我只需要一些帮助...这就是
不确定我的措辞是否正确,但这是我正在尝试做的事情。 我正在使用一个函数来呈现 wavesurfer 的多个实例在页面上。 开箱即用,这很简单,因为您只需声明 wavesurfer 的每个单独实例: v
我一直在开发一个允许用户点击并操作 mp3 文件的在线应用程序,我正在尝试将本地文件从我的计算机加载到 wavesurfer 对象中,但我在 chrome 中不断收到此错误: "Access to X
我需要获取音频的当前播放时间。我一直在使用 react-wavesurfer播放音频的包,我可以看到 wavesurfer.js有一种获取当前播放时间的方法,但我似乎无法弄清楚如何用 React 来做
我正在尝试使用 wavesurfer.js 为使用 JavaScript 动态创建的元素创建波形。这是我的代码: $(document).ready(function() { var id = 9
大家好,下面是我的代码示例,我试图让 $scope.icon 在 wavesurfer 的函数处理程序中更新为新值,但它似乎对我不起作用,无论我做什么做。有人对此有想法吗? msp.controlle
我想实时显示正在播放的轨道的剩余时间,但由于我的 javascript 技能不是很先进,所以无法弄明白。 Wavesurfer.js 提供了一个叫getCurrentTime()的函数,但是我不知道怎
我想在我的 Angular 项目上运行 WaveSurfer.js,但它不能像我想要的那样工作。WaveSurfer 在 Index 中完美运行。但是,我想要在我的组件中使用 WaveSurfer,但
Wavesurfer.js 很棒,但有点令人困惑。 我已经实现了wavesurfer,但是我想构建一种方法来剪切用户选择的音频区域并将其粘贴到新的音频缓冲区中。目前,我正在控制台登录区域 js 文件以
到目前为止,在我的研究中,我已经能够使用 Node.js 和 Express 向动态网页提供文件,如下所示。 app.use(express.static('./public')); 然后链接到公共(
我正在尝试在我的 react 应用程序中使用 wavesurfer.js 渲染音频文件。我是个菜鸟,我想知道为什么我总是收到“找不到容器元素”消息。 简而言之,这是我需要知道的。 提前致谢! impo
我不熟悉es6,想在我的项目中使用react-wavesurfer。文档在这里:https://github.com/mspae/react-wavesurfer但示例使用是在 es6 中,我不确定如
我是一名优秀的程序员,十分优秀!