Jump to content

sound files not playing


Recommended Posts

The goal of the attached project is to assist a learner in mastering proper spelling.

The method is that they will hear an audio file of a word, then they type it into the window.

The page then indicates if they got it correct.

The spelling part seems to work.

But . . . .


I do not know why the JavaScript is not causing the sound files to play.

I am not a JS guru. I have done what I can, but still cannot find the mistake.


Can anyone help?

(needed files attached in a zip)


Edited by steveherrmann
Link to comment
Share on other sites

Yes. It is currently online.



I have not yet dressed it with a pretty face. First I want to make sure that what there is works as planned.

The intent and goal of the project for me is instructional design, ...not coding, ...not even the dressing that will come (even though I am a visual designer as well). Those who will be looking at my portfolio will be concerned with it from a learning theory point of view. The project will be prefaced with an explanation as to its needs analysis, project purpose, intended audience,...


It is not yet connected from the interface of my website. It is only uploaded for testing purposes.

Yes, I assume someone could find it, but not likely and not many.


What I attached to the post on w3schools is a paired-down version of what is at the above URL, due to the upload size limitation.

  • Like 1
Link to comment
Share on other sites

I think you will find the format is decided for playing on loading, so to change it it with js you have to check acceptable format before apply it to audio tag not to specific source tag help on this from http://www.techrepublic.com/blog/web-designer/how-to-use-the-new-html5-audio-element/

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <title>speller</title>        <style>        </style>        <script>            window.onerror = function(m, u, l) {                alert('Javascript Error: ' + m + 'nURL: ' + u + 'nLine Number: ' + l);                return true;            }        </script>        <script>            var speller = {};            speller.words = [                'acceptable',                'Several words made the list because of the suffix pronounced -ebl but sometimes spelled -ible, sometimes -able. Just remember to accept anything offered to you on the ‘table’, and you will spell this word correctly.',                'accidentally',                'It is no accident that the test for adverbs on -ly is whether they come from an adjective on -al ("accidental" in this case). If so, the -al has to be in the spelling. No publical, then publicly.',                'accommodate',                'Remember, this word is large enough to accommodate both a double "c" AND a double "m."',                'acquire',                'Try to acquire the knowledge that this word and the next began with the prefix ad- but the [d] converts to [c] before [q].',            ];            speller.user = '';            speller.icnt = 0            speller.ccnt = 0;            speller.offset = 2; // number of items in the speller.words array per word            speller.wordcnt = speller.words.length / speller.offset;            speller.currentword = null;            speller.correct = [];            speller.incorrect = [];            window.onload = init;            function init() {                document.getElementById('btnpnw').onclick = newword;                document.getElementById('btnrep').onclick = playh5audio;                document.getElementById('btncs').onclick = check;                document.getElementById('btn4').onclick = showCookies;                speller.user = getcookie('user');                while (speller.user == '') {                    speller.user = prompt('Please enter your name').trim();                    setcookie('user', speller.user);                }                document.getElementById('user').innerHTML = speller.user;                document.getElementById('icnt').innerHTML = speller.icnt;                document.getElementById('ccnt').innerHTML = speller.ccnt;                document.getElementById('guess').value = '';            }            function check() {                var guess = document.getElementById('guess').value.trim().toLowerCase();                if (guess == speller.words[speller.offset * speller.currentword]) {                    if (speller.correct[speller.currentword] != 1) {                        speller.ccnt++;                    }                    document.getElementById('ccnt').innerHTML = speller.ccnt;                    document.getElementById('out1').innerHTML = '<h2>' + speller.words[speller.offset * speller.currentword] + '</h2><br/>' + speller.words[speller.offset * speller.currentword + 1];                    speller.correct[speller.currentword] = 1;                } else {                    speller.icnt++;                    document.getElementById('icnt').innerHTML = speller.icnt;                }            }            function newword() {                if (speller.ccnt == speller.wordcount) {                    alert('There are no more words available.');                } else {                    // choose random word                    var max = speller.words.length / speller.offset;                    do {                        speller.currentword = Math.floor(max * Math.random());                        //alert(speller.currentword);                    } while (typeof speller.correct[speller.currentword] != 'undefined');                    alert('current word ' + speller.currentword + ' is: ' + speller.words[speller.offset * speller.currentword]);                    document.getElementById('guess').value = '';                    document.getElementById('out1').innerHTML = '';                    playh5audio();                }            }            function playh5audio() {                var this_player = document.getElementById('player');                if (speller.currentword != null) {                    if ("" != this_player.canPlayType('audio/mpeg')) {                        this_player.src = './audio/' + speller.words[speller.offset * speller.currentword] + '.mp3';                    }                    if ("" != this_player.canPlayType('audio/ogg; codecs="vorbis"')) {                        this_player.src = './audio/' + speller.words[speller.offset * speller.currentword] + '.ogg';                    }                } else {                    newword();                }                this_player.play();            }            function getcookie(cookie_name) {                var cookie_val = null;                var doc_cookie_str = document.cookie;                //alert('doc_cookie_str.length='+ doc_cookie_str.length);                var idx = doc_cookie_str.indexOf(cookie_name + "=");                if (idx != -1) {                    idx = doc_cookie_str.indexOf("=", idx);                    var idx2 = doc_cookie_str.indexOf(";", idx);                    if (idx2 == -1) {                        idx2 = doc_cookie_str.length;                    }                    cookie_val = unescape(doc_cookie_str.substring(idx + 1, idx2));                    //alert('cookie found:['+ cookie_name +'='+ cookie_val +']');                } else {                    cookie_val = '';                    //alert('cookie not found:['+ cookie_name +']');                }                return cookie_val;            }            function setcookie(cookie_name, cookie_val) {                // cookies cannot contain commas, semicolons, or whitespace                var expire_days = 365;                if (cookie_name != null && cookie_name != "" && cookie_val != null && cookie_val != "") {                    var exp_date = new Date();                    exp_date.setDate(exp_date.getDate() + expire_days);                    var cookie_value = escape(cookie_val) + ((expire_days == null) ? "" : "; expires=" + exp_date.toUTCString());                    document.cookie = cookie_name + "=" + cookie_value;                    alert('set:[' + cookie_name + '=' + cookie_value + ']');                }            }            function showCookies() {                var out = document.getElementById('out1');                var doc_cookie_str = document.cookie;                var idx1 = -2;                var idx2;                var done = false;                out.innerHTML = '<hr/>' + doc_cookie_str + '<hr/>';                //alert(doc_cookie_str.length);                if (doc_cookie_str.length == 0) {                    done = true;                }                while (!done) {                    idx2 = doc_cookie_str.indexOf("=", idx1);                    if (idx2 != -1) {                        out.innerHTML += 'name:[' + doc_cookie_str.substring(idx1 + 2, idx2) + ']';                        idx1 = idx2;                        idx2 = doc_cookie_str.indexOf(";", idx1);                        if (idx2 != -1) {                            out.innerHTML += 'value:[' + unescape(doc_cookie_str.substring(idx1 + 1, idx2)) + ']<br/>';                            idx1 = idx2;                        } else {                            idx2 = doc_cookie_str.length;                            out.innerHTML += 'value:[' + unescape(doc_cookie_str.substring(idx1 + 1, idx2)) + ']<br/>';                            done = true;                        }                    }                }            }        </script>    </head>    <body>        User: <span id="user"></span><br/>        Correct: <span id="ccnt"></span><br/>        Incorrect: <span id="icnt"></span><br/>        Spell: <input type="text" id="guess" placeholder="Enter..."/><br/>        <input type="button" id="btnpnw" value="Play New Word"/>        <input type="button" id="btnrep" value="Play Again"/>        <input type="button" id="btncs" value="Check Spelling"/>        <br>        <input type="button" id="btn4" value="show cookies"/>        <audio id="player">            Your browser does not support the HTML5 audio element.        </audio>        <div id="out1">        </div>    </body></html>

also being from mac the files were encrypted, so you have to clear this before it would work from other pcs and maybe macs.


EDIT: also having a function called play(), would have conflicted with reserved .play() function for playing the audio file as well.

Edited by dsonesuk
Link to comment
Share on other sites

Oh, before document.getElementById('player').play() you need document.getElementById('player').load()


And it does work right on the desktop.

function play(){if (speller.currentword != null){document.getElementById('fileogg').src = './audio/'+ speller.words[speller.offset * speller.currentword] + '.ogg';document.getElementById('filempeg').src = './audio/'+ speller.words[speller.offset * speller.currentword] + '.mp3';document.getElementById('player').load();document.getElementById('player').play();}else{newword();}}

Play() doesn't seem to conflict but you could rename it if you want to. You don't need the .canPlayType testing.

<audio id="player">  <source id="fileogg" src="#" type="audio/ogg">  <source id="filempeg" src="#" type="audio/mpeg">Your browser does not support the HTML5 audio element.</audio>
Link to comment
Share on other sites

mmm does not work for windows 7 safari 5.1.7


Hmmm... It works for Win 7 with FF30, Chrome35, IE11


Safari complains that "undefined is not a function." The W3C validator doesn't see a problem once I plug in src="#".


Maybe Safari requires an oog file? This says it doesn't...




I don't know how to view Firebug or the error console in Safari.

Link to comment
Share on other sites

I am sorry that I have been silent for a few days. I've just been wrapped up with other stuff.

Oh! It works! I even deactivated the alert which gave away the spelling of the word, so now I am on the road.

Thank you SO MUCH!


Now I have to think about layout and design.

If I end up killing it in the midst of that, I can always revert back to this code.


Thank you!!

May I write "Javascript by 'davej' at w3schools." at the bottom of the page?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...