Question

问题

有趣的人可能有一个简单的解决方案。在@jessegavin的帮助下，我在页面中添加了一个jQuery函数，用于控制页面上HTML5音频元素的播放。代码很漂亮，可以在jsFiddle上正常工作，但在放入我的页面上下文时却没有。

我已经把时间浪费在风中，并有条不紊地试图解决我的错误，但无济于事。真的，我去了亚里士多德并应用了科学方法。请原谅我对这个问题的重视。这真的是我的最后一招。

NITTY GRITTY

以下是我的发现：页面的所有JavaScript函数在jsFiddle的上下文中都能正常工作。在一次一个地专门添加功能之后，我可以说它们各自正常工作，并且除了HTML5音频回放之外的所有功能都在jsFiddle和实时页面上工作。也就是说，只有HTML5音频播放才能在实时页面上运行。

所有HTML都经过100％验证，所有CSS都经过100％验证。两个组都是代码全部添加到jsFiddle中。

页面标题通过Google的onload命令（外部JavaScript）加载（按此顺序）外部CSS文档，jQuery 1.5.1和jQuery UI 1.8.8（在jsFiddle上相同，除了UI，即1.8.9）文档（网站的所有功能都驻留在其中），最后是Google Analytics功能。

JavaScript包含在文档就绪框架中。

我的猜测是，这种差异存在于头脑中，但我无法想象究竟是什么。所有外部链接都能正常工作，JavaScript函数正常工作（新音频控制器除外）。

邮寄脚本

P.S.-仅适用于Chrome和Safari ..我托管两个音频文件的服务器没有正确的ht-access文件，声明OGG是正确的MIME类型。我也会提出一个问题。

资源

jsFiddle：http://jsfiddle.net/66FwR/3/

HTML （仅限标题，正文在jsFiddle中）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="description" content="Fernando Garibay- Producer, Songwriter, Artist, Multi-Instrumentalist, and Programmer" />
<meta name="keywords" content="Fernando Garibay, Music, Producer, Songwriter, Artist, Mutli-Instrumentalist, Programmer." />
<title>Fernando Garibay - Music</title>
<link rel="icon" type="image/png" href="http://www.fernandogaribay.com/favicon.ico" />
<link href="../styles/fernando.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAAqfg-jHFfaMB9PWES0K_8ChTCwkclEZER8BG2IP57SKkFV1O9hxSZkzKYPDs-3mbhEluKXjbKUAB7sQ"></script>
<script type="text/javascript">
  google.load("jquery", "1.5.1");
  google.load("jqueryui", "1.8.8");
</script>
<script type="text/javascript" src="../scripts/fernando.js"></script>
<script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-XXXXXXX-1']);
    _gaq.push(['_trackPageview']);
    (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
</script>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--Copyright 2011, Fernando Garibay, Inc-->
<!--Developed by Minimal +-->
</head>
<body onload="message()">

JavaScript （适用于jsFiddle的功能，但不适用于实时网页）

 $(function() {
     $(".playback").click(function(e) {
       e.preventDefault();
       var song = $(this).next('audio').get(0);
         if (song.paused)
         song.play();
       else
         song.pause();
     });
 });

Answer 1

我在您的实际网页上看到了两个JavaScript错误（在Chrome和Firefox中）：

Uncaught TypeError: Object [object Object] has no method 'fancybox'

Uncaught ReferenceError: message is not defined

您在fernando.js中引用fancybox（），在<body onload="message()">中引用消息。这些错误很可能会阻止您的音频控制代码运行。

Answer 2

网址为http://fiddle.jshell.net/66FwR/3/show/。它也包括jQuery UI。您可以复制源并使用它。

jQuery适用于jsFiddle，但不适用于实时页面

2 个答案: