1
ipad（HTML5アプリ）でテストすると、このコードが動作しないようです。しかしこれはウェブブラウザでは機能します...あなたの誰かがこれに対する回避策を持っていますか？私は、特にiPADのためのiOSデバイスのためにそれを動作させる必要があります。html5 app audio not working
<!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>
ありがとう
ああ、iFad、iFod、iFoneの代わりにNetscape、Mozzy、IEを使っていたのはいいよね。誰がそれらを必要とする！ – Christian
offtopic：あなたのプログラミングスタイルに関するコメントがいくつかあります。 document.getElementById（ 'disc'）などは、（要素を直接呼び出す）プログラミングの良い方法ではなく、要素が存在しない場合や別の理由で簡単にスクリプトを中断する可能性があります。私はエラーのためにあなたのコードを最初にデバッグする必要があると思う、あなたはサファリの設定パネルでデバッグを有効にするか、firefoxデバッグコンソールを使用することができます。また、HTML、CSS、JavaScriptにページを分割し、エラーを減らすためにjQueryを使用します。 – Codebeat