Javascript 和 Howler.js - 如何选择随机声音?

2024-03-02

我对 javascript 相当陌生,并尝试在 mousemove 上播放随机选择的声音。我无法上班,希望得到帮助。我使用 howler.min.js 来控制声音,因此不会等到声音播放结束才播放下一个声音。这是代码:

  var soundObjects = [];
    var lastSoundTime = Date.now();

    c.addEventListener("mousemove",function(evt){



var mx = evt.clientX - this.offsetLeft;
    var my = evt.clientY - this.offsetTop;
    //console.log("clicked at x:" + mx + ", y:" + my);
    //
    circles.push(makeMovingCircle(mx, my));

    var now = Date.now();
    var elapsed = now - lastSoundTime;
    console.log(elapsed);
    if (elapsed < 250) {
        return
    }

    lastSoundTime = now;

    new Howl({

        var sounds = ['splash.mp3', 
            'splash.ogg', 
            'splash1.mp3', 
            'splash1.ogg', 
            'splash2.mp3', 
            'splash2.ogg', 
            'splash3.mp3', 
            'splash3.ogg', 
            'splash4.mp3', 
            'splash4.ogg', 
            'splash5.mp3', 
            'splash5.ogg'];

      var soundFile = sounds[Math.floor(Math.random()*sounds.length)];
}
    }).play();

这里最大的问题是你试图在 Howl 对象内定义变量,但你不能这样做。第二个问题是您只选择了所需的声音文件之一。我还建议您预加载所有可能的声音文件,然后随机播放一个声音文件,而不是每次都创建一个新的 Howl 对象。尝试这个:

var soundObjects = [];
var lastSoundTime = Date.now();

// Preload Howl objects
var sounds = ['splash', 'splash1', 'splash2', 'splash3', 'splash4', 'splash5'];
var howls = {};
for (var i=0; i<sounds.length; i++) {
    howls[sounds[i]] = new Howl({
        urls: [sounds[i] + '.mp3', sounds[i] + '.ogg']
    });
}

c.addEventListener('mousemove', function(evt){

    var mx = evt.clientX - this.offsetLeft;
    var my = evt.clientY - this.offsetTop;
    circles.push(makeMovingCircle(mx, my));

    var now = Date.now();
    var elapsed = now - lastSoundTime;
    console.log(elapsed);
    if (elapsed < 250) {
        return;
    }

    lastSoundTime = now;

    // Select a random sound and play it
    var sounds = ['splash', 'splash1', 'splash2', 'splash3', 'splash4', 'splash5'];
    var soundFile = sounds[Math.floor(Math.random() * sounds.length)];

    howls[soundFile].play();

}, false);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Javascript 和 Howler.js - 如何选择随机声音? 的相关文章

  • JavaScript 画布内存问题

    我在用着getImageData putImageData在 HTML5 画布上能够操作图片 我的问题是浏览器似乎从来没有释放任何内存 http jonelf posterous com lite gc men for sent 直到我关闭
  • 绑定 popstate 事件不起作用

    我尝试在浏览器的控制台中输入以下代码 window onpopstate function alert 1 然后单击后退按钮 没有显示任何警报 难道我做错了什么 或者是否不允许将 popstate 事件绑定到控制台的页面 使用 Chrome
  • React Native 无法访问 Cloud Firestore 后端

    我之前使用的是 firebase 实时数据库 但现在想切换到 Cloud Firestore 但即使经过身份验证 也会收到以下错误 我目前正在使用 Android Simulator 尝试禁用我的实时数据库 但找不到解决方案 Firebas
  • 解释一下这个令人困惑的 dojo 教程声明语法

    我正在阅读使用的语法道场的声明 http dojotoolkit org documentation tutorials 1 8 declare 用于班级创建 描述很混乱 The declare function is defined in
  • 无需重定向的 HTML 页面提交

    有没有什么方法可以在不使用ajax的情况下提交html表单而无需从当前页面重定向 你可以设置一个target 为您form 这样您就可以将表单提交到新选项卡 target blank 或一个小的 隐藏的iframe target nameo
  • 修复 Raphaël 路径节点上 Tipsy 工具提示的位置

    这是一个非常具体且有些复杂的问题 所以我设置了一个最小测试用例 http reveal dk 8080 revealit dk tipsytest 在阅读本文的其余部分之前 您可能应该先了解一下 我的页面显示悬停时突出显示区域的图像Raph
  • document.write 在同一页面上显示内容。

    我对 javascript document write 方法有疑问 大多数情况下 当我使用 document write 时 它会向我显示在不同页面中使用该方法编写的内容 例如 如果我写这样的命令 document write Hello
  • 公开闭包内的方法

    当我们在闭包内创建一个方法时 该方法将成为该闭包的私有方法 并且在我们以某种方式公开它之前无法访问它 怎么可能暴露呢 您可以返回对它的引用 var a function var b function I m private alert go
  • NodeJS - 将相对路径转换为绝对路径

    In my 文件系统我的工作目录在这里 C temp a b c d 在 b bb 下有文件 tmp txt C temp a b bb tmp txt 如果我想从工作目录转到该文件 我将使用以下路径 bb tmp txt 如果该文件不存在
  • 等待异步 grunt 任务完成

    我收到了 grunt 设置 其中一个新任务应该执行 grunt task run 已经存在的任务 要执行的任务是异步的 新任务应该等待异步任务完成 执行此操作的首选方法是什么 grunt 已经涵盖了这一点 你应该将你的任务声明为异步任务 并
  • 如何跨多个 React Redux 组件使用 requestAnimationFrame 实现游戏循环?

    努力思考最好的解决办法 我可以使用递归调用requestAnimationFrame有一个游戏循环 export interface Props name string points number onIncrement gt void o
  • 基于范围内变量的角度设置形式动作

    我一直在尝试设置一个搜索表单 可以在其中注入表单操作属性 在我的表格中我有
  • 当 Chrome 中嵌套滚动中的数据更改时防止页面滚动

    我在页面中有一个固定大小的元素 带有 溢出 滚动 其内容经常更改 我预计该元素内部发生的更改会影响该元素的滚动 但不会影响页面滚动 但是当这个元素位于页面顶部时 页面本身开始滚动 我怎样才能防止这种情况发生 要重现此行为 我在 chrome
  • 即使我的情况按预期发生变化,Angular ngClass 也不会更新我的课程

    我正在创建的模板中有类似的内容 div class nng 3 div 价值app layout isNavbarFixed等用零或一初始化 并且页面第一次加载时 适当的类被插入到我的div 不过 此后通
  • 将默认搜索文本添加到搜索框 html

    我正在努力将 搜索 文本添加到搜索框 我正在努力实现 onfocus 消失文本 And onblur 重新出现文本 到目前为止 我已经实现了这一点 但我必须将其硬编码为 html eg
  • 为什么 console.log() polyfill 不使用 Function.apply()?

    我一直在看一些流行的console log 包装 填充 保罗 爱尔兰的 http paulirish com 2009 log a lightweight wrapper for consolelog 本阿尔曼的 http benalman
  • D3 强制布局,较大的节点聚集在中心

    我一直在修改将用于标签云的强制布局 每个标签都由一个
  • 获取类中的所有静态 getter

    假设我有这个类 我像枚举一样使用它 class Color static get Red return 0 static get Black return 1 有没有类似的东西Object keys to get Red Black 我使用
  • 从json中获取所有子节点

    我有以下 json var source k 01 k 02 children k 05 k 06 children k ABC k PQR k 07 k 03 我希望能够指定 k 的值并取回所有孩子 以及孙
  • 突出显示单词并提取其附近文本的函数

    我有一个文本例如 Etiam porta semmalesuada magna mollis euismod 整数取数 ante venenatis dapibus posuere velit aliquet 埃蒂亚姆 门塔 塞姆 male

随机推荐

  • 如何将 Azure 逻辑应用中 For_Each 循环的输出合并到单个平面数组?

    我有一个For Each在调用另一个嵌套逻辑应用程序的 Azure 逻辑应用程序中循环 嵌套逻辑应用的每次迭代的结果是一个包含字符串数组的 JSON 对象 如下所示 Results string a string b 因此 父逻辑应用程序中
  • Java 如何反转 BigInteger?

    我需要反转BigInteger 假设我有BigInteger x 我需要计算x modPow new BigInteger 1 p 我收到以下错误 java lang ArithmeticException BigInteger not i
  • 解锁模拟器或设备以进行 Android 测试

    我正在编写 Android 功能测试 我需要设备处于唤醒状态并且应用程序处于可视化状态才能正常工作 我已经咨询过安卓开发者 http developer android com tools testing activity testing
  • IE9 在哪里寻找大图标?

    IE9 具有将特定网站固定到 Windows7 任务栏的概念 对于某些网站 例如 Facebook 它会在任务栏中以及后退按钮旁边显示一个超大的图标 我如何告诉 IE 为我的网站执行此操作 虽然有点晚了 但我发现上面的答案有些不完整 ico
  • 将“dist”类的对象转换为r中的数据框

    如果可以将数据框转换为 dist 类的对象 是否可以做相反的事情 将类 dist 转换为数据框 例如 1 2 3 4 2 0 088814413 3 0 084929382 0 030413813 4 0 063245553 0 02912
  • 如何阻止输入函数插入新行?

    我知道我可以通过添加逗号来阻止 print 写入换行符 print Hello world print Hello world end for Python 3 x 但我该如何停止raw input or input对于Python 3 x
  • 如何在我自己的 HTML 中使用 WordPress 联系表单 7?

    我想在我的网站上使用 WordPress 联系表单 7 但我已经有一个 HTML CSS 布局 因此 我想修改该插件以将其与自定义 HTML 代码一起使用
  • 在 iOS 上的多个应用程序之间共享数据

    我知道这方面有很多线程 但似乎没有一个能满足我想要寻找的内容 这是我的限制 不是使用私有 API 框架或未记录的黑客行为 目录访问可能会带来应用程序被拒绝的风险 因为那个 能够在不同的地方共享数据 供应商 应用程序开发商 数据可以在生命周期
  • 如何让等待栏在 Matlab 中工作?

    我希望为需要相当长一段时间的操作提供等待时间 这是我的代码 h waitbar 0 Please wait for i 1 counterend waitbar i waitbarcounter Atemp At i step handle
  • 如何仅使用键在 vs code 中的当前资源管理器目录中创建文件?

    就像在 vim nerd 树插件中一样 当您在 vim nerd 树中按 m 然后按 a 按钮时 您可以在光标位于 Nerd 树上的当前目录中添加文件 可以在vs code中实现吗 也许一些插件 不幸的是 还没有这样的插件 但你可以定义一些
  • 如何组合验证属性错误消息的资源字符串?

    如果我在验证属性上收到错误消息 例如 名字为必填项 姓氏为必填项 然后是这样的验证属性 Required ErrorMessageResourceName Error FirstNameRequired ErrorMessageResour
  • 在 swt 中归档的多行文本上使用 Tab 键吗?

    如何防止多行文本字段 窃取 Tab 键按下 我的意思是 我想使用 TAB 在窗口的元素之间循环 但是当我输入多行文本时 TAB 变成 普通 键 并且只需将制表符插入到我正在键入的文本中 我该如何处理这个问题 我应该编写一些自定义侦听器 还是
  • 过滤最接近给定日期时间的日期时间

    我有一个具有日期时间字段的模型 现在给定一个特定的日期时间 DT 我需要获取日期时间最接近 DT 的对象 这可能吗 Thanks 您可以通过两个查询和一些逻辑来获取它 这个想法是找到紧随目标日期时间之后的一个对象和紧邻目标日期时间之前的一个
  • 训练神经网络技巧

    对于对象识别 我建议使用 MATLAB 中的神经网络 我有 30 个对象 每个对象有 20 个图像 因此我有 600 个输入数据和 20 个不同的类 输入矩阵为 100x600 目标矩阵为 1x600 输入矩阵列是 100 个 bin 中关
  • WSO2 IS 使用 Radius / Kerberos 登录

    下图显示了我需要部署的架构 它解释了我的问题 我已经设计了一个子系统 其中包含部署在apache tomcat中的一组应用程序 Web服务 Web应用程序 为了向我的子系统提供 SSO 功能 我使用带有 SAML2 0 的 WSO2 身份服
  • 使用 CodeIgniter 进行用户身份验证

    我正在使用 PHP 编写一个 Web 应用程序 我想为此使用 MVC 模式 并决定使用代码点火器 http codeigniter com 我的应用程序将有一些页面需要身份验证 而有些页面则不需要 我想以一种非常通用的方式设计它 这样就不会
  • Asp.Net 中动态添加的控件

    我正在尝试了解 asp net 我有一个长期的 php 开发人员背景 但我现在面临着学习 asp net 的任务 并且我在这方面遇到了一些麻烦 这很可能是因为我试图迫使框架去做一些它不适合的事情 所以我想学习如何 以正确的方式 做到这一点
  • 如何在 h:selectOneMenu 中的值更改时执行转换?

    通常我会做如下的事情 单击按钮执行转换
  • 全局名称“re”未定义

    我是 python 新手 正在研究 mincemeat 的地图减少问题 运行 mincemeat 脚本时出现以下错误 python mincemeat py p changeme localhost error uncaptured pyt
  • Javascript 和 Howler.js - 如何选择随机声音?

    我对 javascript 相当陌生 并尝试在 mousemove 上播放随机选择的声音 我无法上班 希望得到帮助 我使用 howler min js 来控制声音 因此不会等到声音播放结束才播放下一个声音 这是代码 var soundObj