javascript - 将 javascript 音频移动到 jquery

标签 javascript jquery html audio

这是我在论坛上的第一篇帖子。 我正在建立一个英语/泰语类(class)网站,其中将包含许多英语和泰语语音的音频文件。我使用鼠标悬停/按钮 javascript 函数做了一个网页概念证明 http://www.javascriptkit.com/script/script2/soundlink.shtml 使用一些 mod 和一些内联 js,这工作正常。

$(document).ready(function() { 
  var html5_audiotypes = { 
  "mp3": "audio/mpeg",
  "ogg": "audio/ogg",
     };      
function createsoundbite(sound) {
  "use strict";
  var html5audio = document.createElement('audio');
  if (html5audio.canPlayType){
   for(var i=0; i<arguments.length; i++) {
     var sourceEl = document.createElement('source');
     sourceEl.setAttribute('src', arguments[i]);
     if (arguments[i].match(/\.(\w+)$/i))
     sourceEl.setAttribute('type', html5_audiotypes[RegExp.$1]);
     html5audio.appendChild(sourceEl);
   }
   html5audio.load();
   html5audio.playclip = function() {
    html5audio.pause();
    html5audio.currentTime=0;
    html5audio.play();
    }
    return html5audio;
    }
    else{
    return {playclip:function(){throw new Error("Your browser doesn't support      HTML5 audio unfortunately")}};
    }
  }   
  var cn402=createsoundbite("audio/cn402.ogg", "audio/cn402.mp3");   
  var ry402=createsoundbite("audio/ry402.ogg", "audio/ry402.mp3");     
  var cn403=createsoundbite("audio/cn403.ogg", "audio/cn403.mp3");      
  var ry403=createsoundbite("audio/ry403.ogg", "audio/ry403.mp3");      
  var cn404=createsoundbite("audio/cn404.ogg", "audio/cn404.mp3");      
  var ry404=createsoundbite("audio/ry404.ogg", "audio/ry404.mp3");     
});

javascript代码由一行html代码调用,如下所示:

    <a href="#current" class= "rollover" onclick="ry402.playclip()"></a>Please don't swim by yourself</span>

我想将此函数及其相关变量合并到 jquery 中。以便从 html 中删除所有 js 代码。第一步,只是让 jquery 代码工作对我来说有点问题。我已经尝试将 js 音频代码包含在文档就绪函数中。如上所示,但这不起作用。任何帮助将非常感激。

最佳答案

我不确定我是否理解正确,但您可以非常轻松地从给定链接中删除 javascript 代码:

$('.rollover').click(function(){

ry402.playclip();

});

让我们看看:http://api.jquery.com/click/

关于javascript - 将 javascript 音频移动到 jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15450320/

相关文章:

javascript - php echo 单引号并结束 javascript 的脚本

javascript - 下一个js中的HTTPS重定向

javascript - 在 jQuery 延迟后加载 jquery 插件文件

php - mysqli 存储 php 变量而不是值

jquery - 索引页面的事件导航菜单项

javascript - 单击一个不属于 'close' 按钮的单独按钮无论如何都会触发关闭事件

javascript - Fancybox 2 beforeLoad 和 afterClose 在事件时不触发隐藏/显示 div

html - PWA - IOS 13 深色模式下的状态栏背景和文本颜色

javascript - 为什么源代码中看不到 DOM 结构?

javascript - 多按钮帮助。某些功能上出现的按钮