質問
おそらく簡単な解決策がある興味深いもの。@jessegavinの助けを借りて、ページ上のHTML5オーディオ要素の再生を制御するjQuery関数をページに追加しました。コードは美しく、jsFiddleで正しく機能しますが、私のページのコンテキストに配置すると機能しません。
私は時間を風に投げ、これを系統的に進めて自分の間違いを切り分けようとしましたが、役に立たなかったのです。本当に、私はこれにアリストテレスに行き、科学的方法を適用しました。この質問の重さをお許しください。それは本当に私の最後の手段です。
ニッティグリッティ
私の調査結果は次のとおりです。ページのすべてのJavaScript関数は、jsFiddleのコンテキストで正しく機能します。関数を1つずつ具体的に追加した後、それぞれが適切に機能し、HTML5オーディオ再生を除くすべてがjsFiddleとライブページの両方で機能すると言えます。つまり、ライブページではHTML5オーディオの再生のみが機能していません。
すべてのHTMLは100%検証され、すべてのCSSは100%検証されています。どちらのグループも、コード全体がjsFiddleに追加されています。
ページ見出しは、Googleのonloadコマンドである外部JavaScriptドキュメント(サイトのすべての機能が存在します)、最後にGoogleAnalytics機能です。
JavaScriptは、ドキュメント対応のフレームワークにラップされています。
私の推測では、矛盾は頭のどこかにあると思いますが、それが正確に何であるかは想像できません。すべての外部リンクは正しく機能します。これは、JavaScript関数が正しく機能していることからもわかります(新しいオーディオコントローラーを除く)。
ポストスクリプト
PS-現時点ではChromeとSafariでのみ動作します。2つのオーディオファイルをホストしているサーバーには、OGGを正しいMIMEタイプとして宣言する正しいht-accessファイルがありません。そのための質問も始めます。
資力
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();
});
});