草庐IT

php - 每次 while 循环运行时调用 javascript 以提供独特的波形

coder 2023-10-25 原文

我正在使用 wavesurfer.js为音频剪辑生成波形，我遇到的问题是我有多个音频文件被拉入 php while 循环，javascript 似乎只运行第一条记录返回..

我将在下面发布我尝试过的内容，如您所见，我已尝试使其独一无二并运行每个循环，但我已经用尽了所有想法并在互联网上到处搜索，但没有任何帮助。

PHP:

 global $db;
 $select = $db->query("SELECT * FROM audio ORDER BY id DESC");
  while ($row = $select->fetch_assoc()) {
   echo $row["track_title"] . " by " . $row["artist"] . "<br />";
   $path = $row['path'];
   $path = str_replace("..", "", $path);
   $id = $row['id'];

    echo"
     <div class='waveid' id='".$id."'>
     <div class='path' id='".$path."'>
     <div class='cursor' id='wave-cursor'></div><canvas id='wave' class='wave-".$id."' width='1024' height='128'></canvas>
     </div>
     </div> 
    ";
    }

JavaScript:

var id = $(".waveid").attr('id');
var path = $(".path").attr('id');

console.log(id);
console.log(path);

var wavesurfer = Object.create(WaveSurfer);

wavesurfer.init({
canvas: document.querySelector('.wave-'+id),
waveColor: 'violet',
progressColor: 'purple'
});

wavesurfer.load(path);

总而言之，我有一个 while 循环返回所有歌曲数据，其中 mp3 存储在一个文件夹中，文件路径存储在数据库中并正在返回。我试图为每个文件制作一个独特的波形，但出于某种原因，我只能设法为第一条记录获取一个波形。任何帮助将不胜感激。

编辑:如果有人想编辑标题或任何内容/标签，请随时进行。

最佳答案

PHP(你不需要使用 div):

while ($row = $select->fetch_assoc()) {
 echo $row["track_title"] . " by " . $row["artist"] . "<br />";
 $path = $row['path'];
 $path = str_replace("..", "", $path);
 $id = $row['id'];

 # make sure $path doesn't contain ' character
 echo "<canvas class='wave' data-path='$path' data-id='$id' width='1024' height='128'></canvas>";
}

JS(这会掀起波澜):

$('.wave').each(function(){
 var wavesurfer = Object.create(WaveSurfer);

 wavesurfer.init({
  canvas: this,
  waveColor: 'violet',
  progressColor: 'purple'
 });

 wavesurfer.load($(this).data('path'));
});

关于php - 每次 while 循环运行时调用 javascript 以提供独特的波形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15487906/

javascriptwhile3934pathphpjquerymysqlwhile-loop

有关php - 每次 while 循环运行时调用 javascript 以提供独特的波形的更多相关文章

  1. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  2. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  3. ruby - 树顶语法无限循环 - 2

    我脑子里浮现出一些关于一种新编程语言的想法，所以我想我会尝试实现它。一位friend建议我尝试使用Treetop(Rubygem)来创建一个解析器。Treetop的文档很少，我以前从未做过这种事情。我的解析器表现得好像有一个无限循环，但没有堆栈跟踪；事实证明很难追踪到。有人可以指出入门级解析/AST指南的方向吗？我真的需要一些列出规则、常见用法等的东西来使用像Treetop这样的工具。我的语法分析器在GitHub上，以防有人希望帮助我改进它。class{initialize=lambda(name){receiver.name=name}greet=lambda{IO.puts("He

  4. ruby-on-rails - 在 Ruby 中循环遍历多个数组 - 2

    我有多个ActiveRecord子类Item的实例数组，我需要根据最早的事件循环打印。在这种情况下，我需要打印付款和维护日期，如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询，用于查找maintenance和payment项目(非排他性查询)，并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代

  5. ruby - 如何每月在 Heroku 运行一次 Scheduler 插件？ - 2

    在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/

  6. ruby-on-rails - 如何在 ruby​​ 中使用两个参数异步运行 exe？ - 2

    exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby​​中使用两个参数异步运行exe吗？我已经尝试过ruby​​命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe，无需等待进程完成是否有任何ruby​​gems会支持我的问题？ 最佳答案 您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除

  7. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  8. ruby - Sinatra:运行 rspec 测试时记录噪音 - 2

    Sinatra新手；我正在运行一些rspec测试，但在日志中收到了一堆不需要的噪音。如何消除日志中过多的噪音？我仔细检查了环境是否设置为:test，这意味着记录器级别应设置为WARN而不是DEBUG。spec_helper:require"./app"require"sinatra"require"rspec"require"rack/test"require"database_cleaner"require"factory_girl"set:environment,:testFactoryGirl.definition_file_paths=%w{./factories./test/

  9. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  10. ruby-on-rails - 每次我尝试部署时，我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手，我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目，而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

随机推荐