Jump to content
steveherrmann

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)

speller.zip

Edited by steveherrmann

Share this post


Link to post
Share on other sites

I have not tested this but many situations of this type will not work on your desktop. The files must be loaded onto a server. Have you tested this on a server?

Share this post


Link to post
Share on other sites

Yes. It is currently online.

http://herrmann.hu/portfolio/id/speller/index.html

 

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

Share this post


Link to post
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

Share this post


Link to post
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>

Share this post


Link to post
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...

 

http://www.w3schools.com/tags/tag_audio.asp

 

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

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...