问题
有趣的可能有一个简单的解决方案。在@jessegavin 的帮助下,我在页面中添加了一个jQuery 函数,用于控制页面上HTML5 音频元素的播放。代码很漂亮,并且在 jsFiddle 上可以正常工作,但在我的页面上下文中却不行。
我已经把时间抛到了风中,并有条不紊地逐步完成,试图找出我的错误,但无济于事。真的,我在这个问题上去了亚里士多德并应用了科学方法。请原谅我这个问题的重要性。这真的是我最后的手段。
坚韧不拔
这是我的发现:页面的所有 JavaScript 函数在 jsFiddle 的上下文中都能正常工作。在一次专门添加一个功能之后,我可以说它们每个都可以正常工作,并且除了 HTML5 音频播放之外的所有功能都可以在 jsFiddle 和实时页面上工作。也就是说,只有 HTML5 音频播放在实时页面上不起作用。
所有的 HTML 都是 100% 验证的,所有的 CSS 都是 100% 验证的。两组代码都被完整地添加到 jsFiddle 中。
页面标题通过 Google 的 onload 命令加载(按此顺序)外部 CSS 文档、jQuery 1.5.1 和 jQuery UI 1.8.8(在 jsFiddle 上相同,但 UI 为 1.8.9),外部 JavaScript 文档(其中该站点的所有功能都驻留),最后是谷歌分析功能。
JavaScript 被包装在一个文档就绪框架中。
我的猜测是差异存在于头部的某个地方,但我无法想象它到底是什么。所有外部链接都正常工作,JavaScript 函数正常工作证明了这一点(新的音频控制器除外)。
后脚本
PS-目前仅适用于 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();
});
});