javascript破解运行声音

早上所有，试图在画布上运行声音效果，同时在画布上显示所有属性。试图用Javascript解雇所有人。（对不起，这是我可以用来描述的最好的解释），我从字面上复制了一本书的脚本，并操纵路径到wav和ogg文件。我跑步时会看到一个空白屏幕，这与我在书中看到的不同。我可以播放声音，但不显示带有属性的黄色框。另外，别的东西让我疯狂......当我在外部运行我的脚本时，在drawfunction（）中，当我尝试敲击矩形时，在尝试使用 context.strokeRect（5，5 ，theCanvas.width-10，theCanvas.height-10）;javascript破解运行声音

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>CH7EX4: Playing A Sound With No Tag</title> 
<script src="modernizr-1.6.min.js"></script> 
<script type="text/javascript"> 

window.addEventListener('load', eventWindowLoaded, false); 

var audioElement; 
function eventWindowLoaded() 
{ 
    audioElement = document.createElement("audio"); 
    document.body.appendChild(audioElement); 
    var audioType = supportedAudioFormat(audioElement); 
    if (audioType == "") 
    { 
     alert("no audio support"); 
     return; 
    } 

    audioElement.setAttribute("src", "audio/shot." + audioType); 
    audioElement.addEventListener("canplaythrough",audioLoaded,false); 
} 

function supportedAudioFormat(audio) 
{ 
    var returnExtension = ""; 
    if (audio.canPlayType("audio/ogg") =="probably" || 
    audio.canPlayType("audio/ogg") == "maybe") 
    { 
     returnExtension = "ogg"; 
    } 

    else if(audio.canPlayType("audio/wav") =="probably" || 
    audio.canPlayType("audio/wav") == "maybe") 
    { 
     returnExtension = "wav"; 
    } 

    /*else if(audio.canPlayType("audio/mp3") == "probably" || 
    audio.canPlayType("audio/mp3") == "maybe") 
    { 
     returnExtension = "mp3"; 
    }*/ 

    return returnExtension; 
} 

function canvasSupport() 
{ 
    return Modernizr.canvas; 
} 

function audioLoaded(event) 
{ 
    canvasApp(); 
} 

function canvasApp() 
{ 
    if (!canvasSupport()) 
    { 
     return; 
    } 

    function drawScreen() 
    { 
     //Background 
     context.fillStyle = '#ffffaa'; 
     context.fillRect(0, 0, theCanvas.width, theCanvas.height); 

     //Box 
     //context.strokeStyle = '#000000'; 
     //context.strokeRect(5, 5, theCanvas.width−10, theCanvas.height−10); 

     // Text 
     context.fillStyle = "#000000"; 
     context.fillText ("Duration:" + audioElement.duration, 20 ,20); 
     context.fillText ("Current time:" + audioElement.currentTime, 20 ,40); 
     context.fillText ("Loop: " + audioElement.loop, 20 ,60); 
     context.fillText ("Autoplay: " +audioElement.autoplay, 20 ,80); 
     context.fillText ("Muted: " + audioElement.muted, 20 ,100); 
     context.fillText ("Controls: " + audioElement.controls, 20 ,120); 
     context.fillText ("Volume: " + audioElement.volume, 20 ,140); 
     context.fillText ("Paused: " + audioElement.paused, 20 ,160); 
     context.fillText ("Ended: " + audioElement.ended, 20 ,180); 
     context.fillText ("Source: " + audioElement.currentSrc, 20 ,200); 
     context.fillText ("Can Play OGG: " + audioElement.canPlayType("audio/ogg"), 
     20 ,220); 
     context.fillText ("Can Play WAV: " + audioElement.canPlayType("audio/wav"), 
     20 ,240); 

    } 

var theCanvas = document.getElementById("canvasOne"); 
var context = theCanvas.getContext("2d"); 
var audioElement = document.getElementById("theAudio"); 
audioElement.play(); 
setInterval(drawScreen, 33); 
} 
</script> 
</head> 
<body> 
<div style="position: absolute; top: 50px; left: 50px;"> 
<canvas id="canvasOne" width="500" height="300"> 
Your browser does not support HTML5 Canvas. 
</canvas> 

<div id="loadingStatus"> 
0% 
</div> 
<div style="position: absolute; top: 50px; left: 600px; "> 
<audio id="theAudio" controls > 
<source src="audio/shot.ogg" type="audio/ogg"> 
<source src="audio/shot.wav" type="audio/wav"> 
Your browser does not support the audio element. 
</audio> 
</div> 
</body> 
</html>

任何帮助将不胜感激！

来源

2012-03-07 user1075004

什么是代码打嗝？我们在这里说声音还是错误？如果这是一个错误，那么让我们知道它是什么。 – alnorth29 2012-03-07 14:37:06

有时我会将代码放入Dreamweaver中进行代码提示，并向我显示该行有错误。我可以用短划线交换这些缺陷并且错误消失（以某种方式）。对不起，我编辑了触摸代码，现在可用的代码是我正在使用的代码。 – user1075004 2012-03-07 14:40:10

只是为了消除显而易见的...你确定你有“modernizr-1.6.min.js”在上面的HTML文件相同的目录吗？并且音频文件存在于相同文件夹中的子目录（“音频”）中？

来源

2012-03-07 14:37:50

是的，moderizer那里。我可以得到控件并实际播放声音，只是无法让我的黄色框在屏幕上弹出以查看所有属性。 – user1075004 2012-03-07 14:46:09

对不起，打错了，（现代化）有 – user1075004 2012-03-07 14:46:54

算了一下，不知何故...我的错误行（contextRect行）仍然不知道为什么该行错误了？... – user1075004 2012-03-07 15:13:40

javascript破解运行声音

回答

相关问题