javascript busting running sound

아침, 캔버스에 모든 효과를 표시하면서 사운드 효과를 캔버스에서 실행하려고합니다. Javascript로 모든 것을 해고하려고합니다. (미안, 이것은 내가 설명하는 데 사용할 수있는 가장 좋은 설명이다) 어느쪽으로 든, 나는 책에서 스크립트를 그대로 복사하고 wav와 ogg 파일에 대한 조작 된 경로를 복사했다. 내가 실행할 때 빈 화면이 나타나는데 이는 책에서 보는 것과 다릅니다. 나는 사운드를 재생할 수 있지만, 속성이있는 노란색 상자는 표시하지 않습니다. 또한, 다른 말로 나를 괴롭히는 뭔가 ... 외부에서 스크립트를 실행할 때 drawfunction()에서 직사각형을 칠하려고 시도 할 때 코드를 넣을 때 문제가 발생합니다 context.strokeRect (5, 5) , theCanvas.width-10, theCanvas.height-10);javascript busting running sound

<!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

가끔은 코드 힌트를 위해 드림위버에 코드를 가져오고 그 라인에 오류가있는 것으로 표시됩니다. 대시로 빼기를 바꿀 수 있으며 오류가 사라집니다 (여하튼). 죄송합니다. 코드를 터치하여 편집했습니다. 사용 가능한 코드는 현재 사용중인 코드입니다. – user1075004

명백한 것을 없애기 위해 위의 HTML 파일과 같은 디렉토리에 "modernizr-1.6.min.js"가 있습니까? 그리고 오디오 파일은 같은 폴더에있는 하위 디렉토리 ("오디오")에 있습니까?

출처

2012-03-07 14:37:50

예, 거기에서 중재자. 컨트롤을 가져 와서 실제로 사운드를 재생할 수 있습니다. 화면에 캔버스에 나타나는 노란색 상자를 모든 속성을 볼 수 없습니다. – user1075004

죄송합니다, 잘못 입력했습니다. (현대화) 거기에 – user1075004

은 어떻게 든 알아 냈습니다 ... 내 오류 라인 (contextRect 라인)을 주석 처리했는데 왜 그 라인이 오류가 나는지 알 수 없습니까? ... – user1075004

javascript busting running sound

답변

관련 문제