خرید بک لینک

درباره سایت

CodingForums

آخرین مطالب

امکانات وب

Simple Javascript audio example for IVR

Hi guys,

First time (of hopefully many) postings, been html-ing and css-ing for a long time but not really ever done much with Javascript. Creating a example IVR online. What ive done so far is sitting here: http://www.xarios.com/ivr/qminder/index.html

Clicking the buttons 'Start Qminder' and button #1 should play audio files. Well at least they do on my notepad++ local version. Once I upload the files it doesn't function any more. What am I doing wrong?

here's my code:

Code:
<html>
<head>

<link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>
<audio id="intro_audio" src="audio/Voice001.m4a">
        <source src="audio/Voice001.ogg" type="audio/ogg">
        <source src="audio/Voice001.m4a" type="audio/mpeg">
</audio>
<audio id="myAudio">
        <source src="audio/Voice002.ogg" type="audio/ogg">
        <source src="audio/Voice002.m4a" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<div id="menu-list">
        <button id="qminder" onclick="playAudio1()"><p>Start Qminder</p></button>
        <button id=""><p>Go to Self-Service Call Routing</p></button>
        <button id=""><p>Go to Customer Aouncement</p></button>
        <button id=""><p>Go to Agent Routing Application</p></button>
</div>


<div id="phone">
        <div id="ivr-container">
                <div id="btn-container">
                        <button class="button" onclick="playAudio()" type="button"><p>1</p></button>
                        <button class="button" type="button"><p>2</p></button> 
                        <button class="button" type="button"><p>3</p></button> 
                        <button class="button" type="button"><p>4</p></button> 
                        <button class="button" type="button"><p>5</p></button>
                        <button class="button" type="button"><p>6</p></button>
                        <button class="button" type="button"><p>7</p></button> 
                        <button class="button" type="button"><p>8</p></button> 
                        <button class="button" type="button"><p>9</p></button>
                        <button class="button" type="button"><p>*</p></button>
                        <button class="button" type="button"><p>0</p></button>               
                        <button class="button" type="button"><p>#</p></button>
                               
                </div>
                       
                <div id="under"><button onclick="goBack()" class="close-btn" href="" title=""></button></div>
                <script>
                        function goBack() {
                        window.history.back();
                        }
                </script>
               
        </div>
</div>
<script>

var x = document.getElementById("myAudio");
var y = document.getElementById("intro_audio");

function playAudio() {
    x.play();
}

function playAudio1() {
        y.play();
}
</script>
</body>
</html>
Code:
body {
        background-color:#006699;
        font-family:Arial, Helvetica, sans-serif;       
       
}
/*-----------------Phone--------------------*/
#phone {
        width:475px;
        height:982px;
        background-image:URL(../images/phone.png);
        background-repeat:no-repeat;
        margin-left:auto;
        margin-right:auto;
        padding-top:90px;
}

#ivr-container {
        width:400px;
        height:700px;
        margin-left:auto;
        margin-right:auto;
        margin-top:50px;
        background-image:URL(../images/phone-bg.png);
        overflow:auto;
}

#btn-container {
        width:200px;
        margin-left:auto;
        margin-right:auto;
        margin-top:280px;
}

#btn-container p {
        color:#fff;
        font-size:34px;
        font-weight:lighter;
        text-align:center;
        height:50px;
        margin:5px;
}

#btn-container a {
        text-decoration:none;
}

#btn-container a:hover {
        background-image:URL(../images/btn-bg-hover.png);       
}

.button {
        width:50px;
        height:50px;
        float:left;
        background-color:#003366;
        border:none;
        background-image:URL(../images/btn-bg.png);
        margin:8px;
}
.button:hover {
        background-image:URL(../images/btn-bg-hover.png);               
}

.button2 {
        width:50px;
        height:50px;
        float:left;
        margin:8px;
}

.close-btn {
        width:200px;
        height:120px;
        background-image:URL(../images/close.png);
        background-repeat:no-repeat;
        background-position:center;
        margin-left:auto;
        margin-right:auto;
        float:left;
        background-color:#003366;
        border:none;
}

.close-btn:hover {
        background-image:URL(../images/close-hover.png);
}

#under {
        width:200px;
        margin-left:auto;
        margin-right:auto;
}

#under a:hover {
        background-image:URL(../images/close-hover.png);
}

/*---------------------menu-------------*/

#menu-list {
        width:200px;
        margin-top:300px;
        float:left;
}

#menu-list button {
        width:200px;
        margin-bottom:20px;
        height:60px;
        background-color:#003366;
        border-radius:20px;
        border:none;
}

#menu-list button:hover {
        background-color:#003399;
}

#menu-list p {
        color:#fff;
}

برچسب: نویسنده: آیلین رضوانی تاريخ: شنبه 3 تير 1396 ساعت: 1:28

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه