html5应用程序音频不工作

html5 app audio not working

本文关键字：工作 音频 应用程序 html5      更新时间：2023-09-26

当我在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>

有什么想法吗？感谢

你可以从音频元素中检查你的ipad是否可以播放mp3格式的canPlayType()功能，还可以将编解码器添加到你的音频源中，这可能是定义它的更好方法。<source src="07 Its Complicated.mp3" type="audio/mpeg"; codecs='mp3'>
最后，也许我认为你的音频源路径定义不正确，"07它很复杂.mp3"->它包含浏览器无法正确渲染的空格字符。

相关文章：