【求助】怎么让图片显示时，也出现声音文件

这是小弟写的代码，现在想实现点击右边的按钮出现笑脸时就发出这个exact.mp3声音，如果出现哭脸时就发出
mistake.mp3这个声音
<!DOCTYPE HTML>mistake.mp3mistake.mp3
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>shiyan1</title>
 <!--For layout-->
<style type="text/css">
*{margin:0 auto;padding:0;}
.wrapper{width:970px;margin:0 auto;}
.topBar{height:50px;background-color:#ccc;}
.content,.imgBlock,.selectBlock{height:300px;}
.imgBlock,.selectBlock{float:left;width:485px;}
.imgBlock{background-color:#f90;}
.selectBlock{background-color:#fc9;}
.foot,.state,.func{height:80px;}
.state,.func{float:left;}
.state{width:670px;background-color:#fc0;}
.func{width:300px;background-color:#6c9;}#textShow{position:absolute;top:10px;left:80px;background-
color:#ccc;color:#f00;}
#prev{background-image:url(images/Left arrow.png);}
#next{background:url(images/Right arrows.png);}
img.smile
   {
    position:absolute;
    top:355px;
    left:255px
   }
img.cry
   {
    position:absolute;
    top:355px;
    left:355px;
   }//Localization image</style><script type="text/javascript">
//Judge the displayed images and text,Determine the next or to the one should show the imagesfunction help_button()
{alert('click Left arrow to read previous picture' + '\n' 
       + 'click Right arrow to read next picture')
}//The warning box, tell you use methods
window.onload = function(){
var imgList = ['images/dog.png','images/dolphins.png','images/monkey.png'];
var imgNameList = ['Dog','Dolphins','Monkey'];//addV2
var a = Array()
        a[0] = 'images/dog.png';
        a[1] = 'images/dolphins.png';
        a[2] = 'images/monkey.png';var currNum = 0;
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var img = document.getElementById('showImg');
var txt = document.getElementById('textShow');//add
prev.onclick = function(){
if(currNum == 0){
currNum = 2;
 }
 else
  {
   currNum -= 1;
  }
 showImg(currNum);
 //txtShow(currNum);//add
 hideState();//addV2
 }
next.onclick = function()
 {
  if(currNum == 2){
  currNum = 0;
     }
  else
     {
     currNum += 1;
  }
 showImg(currNum);
 hideState();//addV2
 }function showImg(index)
 {
 img.src = imgList[index];
 img.alt = imgNameList[index];
 }
function txtShow(index){//add
   }//add
 }function hideState(){//addV2
document.getElementById('smile').style.display = 'none';
document.getElementById('cry').style.display = 'none';
}
function show(obj){//addV2
hideState();//隐藏笑脸苦脸图标
var selectName = obj.value;//获取按钮名
var showName = document.getElementById('showImg').alt;//获取图片名
if(selectName == showName){
document.getElementById('smile').style.display = 'block';
}
       else{
document.getElementById('cry').style.display = 'block';
   }
  }
</script>
<script type="text/javascript"> 
 
var audioElement = document.createElement('audio');  audioElement.setAttribute('src="images/exact.mp3"', 'exact.mp3');  
function PlayAudio()  
{  
    audioElement.load;  
    audioElement.play();  
}  
function PauseAudio()  
if (selectName == showName)
   {  
    audioElement.load;
    audioElement.play();  
   }  
else{
    audioElement.pause();
    }
</script> 
</head><body>
<div class="wrapper">
             
              <div class="topBar">
                        <!--top-->
<input type="image" onClick="help_button()" src="images/wh.png"
                    style="position:absolute;
                           left:200px;
                           top:10px;" />
                </div>      <div class="content"> <div class="imgBlock">
<!--Pictures show-->
<div class="imgWrap"><img id="showImg" src="images/dog.png" alt="Dog" />
            <span id="textShow"></span></div>
                </div> <div class="selectBlock">
<!--List of options-->
<input id="Dog" type="button" onclick="show(this)" value="Dog" />
<br />
<input id="Dolphins" type="button" onclick="show(this)" value="Dolphins" />
<br />
<input id="Monkey" type="button" onclick="show(this)" value="Monkey" />
</div>
        
                </div>
<div class="foot">
<div class="state">
        <!--Right and wrong shows(Display smiling face and crying face)-->
<img id="smile" src="images/xiao_l.png" width="70" height="70"; style="display:none" />
<img id="cry" src="images/ku_l.png" width="70" height="70"; style="display:none" /><audio id="zque" src="audios/exact.mp3">
<audio id="cuow" src="audios/mistak.mp3">
                       </div>
<div class="func">
<!--Used to scroll button-->
<input type="image" id="prev" src="images/left_jt.png" 
             style="position:absolute;
                    left:1000px;
                    top:380px;" />
<input type="image" id="next" src="images/right_jt.png" 
             style="position:absolute;
                    left:1100px;
                    top:380px"/>
</div>
</div>
</div>
</body>
</html>