Article problem? - Joomla! Forum - community, help and support

hello. having trouble html5 audio playlist.

this page have created:

http://www.at-tazkiyah.com/html5audio/index.html

now if want put page article, can use within joomla website, need do?

i have tried put in article (copy , pasted html coding) doesnt work coding contains javascript.

below coding:

code: select all

<script type="text/javascript" src="popup.js"></script>
<script type="text/javascript">
    function loadplayer() {
        var audioplayer = new audio();
        audioplayer.controls="controls";
        audioplayer.addeventlistener('ended',nextsong,false);
        audioplayer.addeventlistener('error',errorfallback,true);
        document.getelementbyid("player").appendchild(audioplayer);
        nextsong();
    }
    function nextsong() {
        if(urls[next]!=undefined) {
            var audioplayer = document.getelementsbytagname('audio')[0];
            if(audioplayer!=undefined) {
                audioplayer.src=urls[next];
                audioplayer.load();
                audioplayer.play();
                next++;
            } else {
                loadplayer();
            }
        } else {
            alert('the end!');
        }
    }
    function errorfallback() {
            nextsong();
    }
    function playpause() {
        var audioplayer = document.getelementsbytagname('audio')[0];
        if(audioplayer!=undefined) {
            if (audioplayer.paused) {
                audioplayer.play();
            } else {
                audioplayer.pause();
            }
        } else {
            loadplayer();
        }
    }
    function picksong(num) {
        next = num;
        nextsong();
    }
 
    var urls = new array();
    urls[0] = '../download/urdu/kibr_khatarnaak_bimari.mp3';
    urls[1] = '../download/urdu/asan_shadi.mp3';
    urls[2] = '../download/urdu/ilm_bari_dawlat_derby.mp3';
    urls[3] = '../download/urdu/madaaris_ka_kirdaar.mp3';
    urls[4] = '../download/urdu/kibr_khatarnaak_bimari.mp3';
    urls[5] = '../download/urdu/asan_shadi.mp3';
    urls[6] = '../download/urdu/ilm_bari_dawlat_derby.mp3';
    urls[7] = '../download/urdu/madaaris_ka_kirdaar.mp3';

    var next = 0;
 
</script>
 
<div id="player"></div>
<br><table border="0" width="100%" cellspacing="7">
   <tr>
      <td height="40" bgcolor="#ff6600" width="614">
 
&nbsp;friday majlis</td>
      <td height="40" bgcolor="#ff6600" width="70" align="center">
 
&nbsp;play</td>
      <td height="40" bgcolor="#ff6600" width="70" align="center">
 
download</td>
   </tr>
   <tr>
      <td height="40" bgcolor="#808080" width="614">
 
<a href="#" onclick="picksong(0)">bayan1</a></td>
      <td height="40" bgcolor="#808080" width="70" align="center">
 
&nbsp;</td>
      <td height="40" bgcolor="#808080" width="70" align="center">
 
&nbsp;</td>
   </tr>
   <tr>
      <td height="40" bgcolor="#c0c0c0" width="614">
<a href="#" onclick="picksong(1)">bayan2</a></td>
      <td height="40" bgcolor="#c0c0c0" width="70" align="center">
&nbsp;</td>
      <td height="40" bgcolor="#c0c0c0" width="70" align="center">
&nbsp;</td>
   </tr>
   <tr>
      <td height="40" bgcolor="#808080" width="614">
<a href="#" onclick="picksong(2)">bayan3</a></td>
      <td height="40" bgcolor="#808080" width="70" align="center">
&nbsp;</td>
      <td height="40" bgcolor="#808080" width="70" align="center">
&nbsp;</td>
   </tr>
   <tr>
      <td height="40" bgcolor="#c0c0c0" width="614">
<a href="#" onclick="picksong(3)">bayan4</a></td>
      <td height="40" bgcolor="#c0c0c0" width="70" align="center">
&nbsp;</td>
      <td height="40" bgcolor="#c0c0c0" width="70" align="center">
&nbsp;</td>
   </tr>
</table>
<br><table border="0" width="100%" cellspacing="7">
   <tr>
      <td height="40" bgcolor="#ff6600" width="614">
 
&nbsp;tuesday dars</td>
      <td height="40" bgcolor="#ff6600" width="70" align="center">play
      <td height="40" bgcolor="#ff6600" width="70" align="center">download</td>
   </tr>
   <tr>
      <td height="40" bgcolor="#808080" width="614">
 
<a href="#" onclick="picksong(4)">bayan5</a></td>
      <td height="40" bgcolor="#808080" width="70" align="center">
 
&nbsp;</td>
      <td height="40" bgcolor="#808080" width="70" align="center">
 
&nbsp;</td>
   </tr>
   <tr>
      <td height="40" bgcolor="#c0c0c0" width="614">
<a href="#" onclick="picksong(5)">bayan6</a></td>
      <td height="40" bgcolor="#c0c0c0" width="70" align="center">
&nbsp;</td>
      <td height="40" bgcolor="#c0c0c0" width="70" align="center">
&nbsp;</td>
   </tr>
   <tr>
      <td height="40" bgcolor="#808080" width="614">
<a href="#" onclick="picksong(6)">bayan7</a></td>
      <td height="40" bgcolor="#808080" width="70" align="center">
&nbsp;</td>
      <td height="40" bgcolor="#808080" width="70" align="center">
&nbsp;</td>
   </tr>
   <tr>
      <td height="40" bgcolor="#c0c0c0" width="614">
<a href="#" onclick="picksong(7)">bayan8</a></td>
      <td height="40" bgcolor="#c0c0c0" width="70" align="center">
&nbsp;</td>
      <td height="40" bgcolor="#c0c0c0" width="70" align="center">
</td>
   </tr>
</table>