html5应用程序音频不工作答案

【问题标题】：html5 app audio not workinghtml5应用程序音频不工作
【发布时间】：2012-02-27 09:26:18
【问题描述】：

当我在 ipad（HTML5 应用程序）中测试此代码时，它似乎不起作用。不过，这适用于网络浏览器......你们中的任何人都有解决方法吗？我只需要让它适用于 iOS 设备，尤其是 iPAD。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />

  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame 
       Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

  <title>Disc</title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width; initial-scale=1.0" />
  <style>
    img {
        position:relative;
    }
    #cover {
        height:200px;
        width:150px;
        top:150px;
    }
    #disc {
        height:100px;
        width:98px;
        top:100px;
        left:-105px;
        z-index:-1;
        -webkit-transition:all linear 0.5s;
        -webkit-animation:disc 1s linear;
        -webkit-animation-iteration-count:infinite;
    }
    @-webkit-keyframes disc {
        from {-webkit-transform:rotate(0deg);}
        to {-webkit-transform:rotate(360deg);}
    }
  </style>
  <script type="text/javascript">
    function init() {
        var isOpen = false;
        document.getElementById('cover').addEventListener('click',function() {
            if (!isOpen) {
                document.getElementById('disc').style.top = "0px";
                isOpen = true;
                playSound();
            } else {
                document.getElementById('disc').style.top = "100px";
                isOpen = false;
                stopSound();
            }
        });
        function playSound() {
            document.getElementById('music').play();
        }
        function stopSound() {
            document.getElementById('music').pause();
            document.getElementById('music').currentTime = 0;
        }
    }
  </script>
</head>

<body onload="init()">
  <img id="cover" src="the bloomfields/bloomcover.jpg" alt=""/>
  <img id="disc" src="the bloomfields/record.png" alt=""/>
  <audio id="music">
    <source src="07 Its Complicated.mp3" type="audio/mpeg"/>
  </audio>
</body>
</html>

有什么想法吗？谢谢

【问题讨论】：

啊，感觉就像我们拥有 Netscape、Mozzy 和 IE...而不是 iFad、iFod 和 iFone...标准的美好时光？谁需要他们！
题外话：关于你的编程风格的一些问题。 document.getElementById('disc') 等不是一种好的编程方式（通过直接调用元素），并且当元素不存在或出于其他原因时可以轻松破坏您的脚本。我认为您必须首先调试代码是否有错误，您可以在 safari 配置面板中启用调试或使用 firefox 调试控制台。还将您的页面拆分为 html、css 和 javascript，并使用 jQuery 来减少错误。

标签： javascript ios ipad html audio

【解决方案1】：

您如何使用音频元素中的canPlayType() 函数检查您的 ipad 是否可以播放 mp3 格式，并且您也可以将编解码器添加到您的音频源中，这可能是定义它的更好方法。 <source src="07 Its Complicated.mp3" type="audio/mpeg"; codecs='mp3'>.
最后，也许我认为您的音频源路径定义不正确，“07 Its Complicated.mp3” -> 它包含浏览器无法正确呈现的空格字符。

【讨论】：