You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何实现点击书签栏书签即可播放音频?现有代码无效如何修复?

可行的Bookmarklet播放指定音频实现方案

原有代码问题说明

  • 第二段代码中object变量未定义,没有对应的绑定目标,事件绑定逻辑无效
  • 第一段代码存在语法错误,有重复嵌套的无效代码段
  • 额外绑定点击事件属于冗余逻辑:点击书签本身就是用户主动交互行为,符合浏览器媒体自动播放策略的触发条件,无需额外绑定事件即可直接播放音频

场景1:点击书签立即播放音频

直接用这段代码作为书签的URL即可:

javascript:(function(){new Audio('https://media1.vocaroo.com/mp3/12OdDSvf3CkE').play();})();

注意:部分站点如果之前没有任何用户交互行为,可能会触发浏览器自动播放限制,只要你在当前页面点击过任意位置后再点击该书签即可正常播放


场景2:需要保留自定义光标样式,点击书签后修改光标+立即播放音频

把修复后的光标样式代码和播放逻辑合并:

javascript:(function(){
  /* 自定义光标样式 */
  var style = document.createElement('style');
  var styleContent = document.createTextNode('* { cursor: url(data:image/x-icon;base64,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) 22 22, auto !important}');
  style.appendChild(styleContent);
  document.head.appendChild(style);
  /* 播放音频 */
  new Audio('https://media1.vocaroo.com/mp3/12OdDSvf3CkE').play();
})();

场景3:点击书签后,点击页面任意位置才播放音频

如果确实需要二次点击触发播放,用下面这段代码,绑定事件到document上而非未定义的object:

javascript:(function(){
  document.onclick = function(){
    new Audio('https://media1.vocaroo.com/mp3/12OdDSvf3CkE').play();
    /* 单次播放后可以移除事件,避免重复触发 */
    document.onclick = null;
  };
})();

内容的提问来源于stack exchange,提问作者Bobzilla07

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.02 10:00:03