1

这个问题可能看起来很傻，但我真的无法找出问题所在。最初，我只有一个 .js 文件，其中包含向页面添加音频的功能：

function addAudio(id_name, audio_filepath) {
  var audio = $('<audio />')
                .prop('id', 'audio' + id_name)
                .prop('src', audio_filepath)
                .text("Your reader doesn't support audio.");

  $('body').append(audio);

  $('#' + id_name).click(function () {
    audio.get(0).play();
  });
}

它在 html 中被这样调用：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
  <!-- some content here -->
  <button id="test">Play</button>

  <!-- reference to lib containing jquery -->
  <script type="text/javascript" src="js/lib.min.js"></script>

  <!-- script where the function addAudio resides -->
  <script type="text/javascript" src="js/add-audio.js"></script>

  <script type="text/javascript">
    $().ready(function() {
      addAudio('test', 'audio/01-test.wav');
    });
  </script>
</body>
</html>

这很好用。问题是当我尝试将函数移出文件并将其内联到脚本标记中时。在这种情况下，当我单击按钮时，控制台会打印Uncaught TypeError: Cannot read property 'play' of undefined.

这是修改后的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
  <!-- some content here -->
  <button id="test">Play</button>

  <!-- reference to lib containing jquery -->
  <script type="text/javascript" src="js/lib.min.js"></script>

  <script type="text/javascript">
    function addAudio(id_name, audio_filepath) {
      var audio = $('<audio />')
                    .prop('id', 'audio' + id_name)
                    .prop('src', audio_filepath)
                    .text("Your reader doesn't support audio.");

      $('body').append(audio);

      $('#' + id_name).click(function () {
        audio.get(0).play();
      });
    }

    $().ready(function() {
      addAudio('test', 'audio/01-test.wav');
    });
  </script>
</body>
</html>

试图隔离错误，我发现当函数在 .js 文件中时，变量audio是 jquery object [audio#audiotest]，但是当函数是 inline 时，那个变量是 object n.fn.init {}。

为什么会这样？

编辑

我注意到发生这种情况是因为它位于xhtml文件中（我正在制作 epub3 格式的电子书）。如果我将文件更改为html，它会再次工作。但这很奇怪，因为 xhtml 支持音频标签（您可以在此处查看规范：http ://www.idpf.org/accessibility/guidelines/content/xhtml/audio.php ），就像我说的那样，它可以工作如果函数在单独的文件中。那么为什么内联不呢？

4

2 回答 2

0

我找到了答案，人们。感谢大家的关注和帮助，给您带来的不便敬请谅解。我正在考虑删除这个问题，但我会回答它以帮助那些可能经历同样事情的人。

根据 Mozilla 基金会的说法，在 XHTML 中使用内联 javascript 很麻烦：（https://developer.mozilla.org/en-US/docs/Archive/Web/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents_/Examples#Example_1）

JavaScript 通常包含在 CDATA 节之外的 XHTML 中不存在的字符。

所以我解决了将线路更改为的$('<audio />')问题$('&t;audio /gt;')

于 2016-05-04T15:05:28.333 回答
0

我认为问题在于您的文件参考。当我将您的代码放入 jsfiddle 时，它​​似乎可以在互联网上引用 wav 文件。

https://jsfiddle.net/ur64L8uh/

    function addAudio(id_name, audio_filepath) {
      var audio = $('<audio />')
                    .prop('id', 'audio' + id_name)
                    .prop('src', audio_filepath)
                    .text("Your reader doesn't support audio.");

      $('body').append(audio);

      $('#' + id_name).click(function () {
        audio.get(0).play();
      });
    }

    $().ready(function() {
      addAudio('test', 'http://download.wavetlan.com/SVV/Media/HTTP/WAV/Media-Convert/Media-Convert_test1_Alaw_Mono_VBR_8SS_16000Hz.wav');
    });
}
于 2016-05-03T20:41:18.903 回答