Adjust Javascript audio navigation function -
i have javascript effect on website whereby when roll on of navigation bar link audio clip plays. works well, issue want 1 audio clip play @ 1 time, e.g if roll on several nav links in 1 go, several audio clips go off @ once, how adjust code 1 audio clips plays @ 1 time, if did happen roll on several? have pasted in current code, thanks
<ul id="nav"> <li><a href="index.html" onmouseover="playclip1();">home</a></li> <li><a href="shop.html" onmouseover="playclip2();">shop</a></li> <li><a href="about.html" onmouseover="playclip3();">about</a></li> <li><a href="invest.html" onmouseover="playclip6();">invest</a></li> <li><a href="contact.html" onmouseover="playclip4();">contact</a></li> <li><a href="projects.html" onmouseover="playclip5();">projects</a></li> <li><a href="links.html" onmouseover="playclip();">links</a></li> </ul> </div> <audio id="soundclip2"> <source src="soundeffects/gunshot.mp3"> <source src="soundeffects/gunshot.ogg"> </audio> <audio id="soundclip1"> <source src="soundeffects/dogs1.mp3"> <source src="soundeffects/dogs1.ogg"> </audio> function playclip() { if (navigator.appname == "microsoft internet explorer" && (navigator.appversion.indexof("msie 7") != -1) || (navigator.appversion.indexof("msie 8") != -1)) { if (document.all) { document.all.sound.src = "dogs1.mp3"; } } else { { var audio = document.getelementbyid("soundclip1"); audio.play(); audio.play(); } } } function playclip1() { if (navigator.appname == "microsoft internet explorer" && (navigator.appversion.indexof("msie 7") != -1) || (navigator.appversion.indexof("msie 8") != -1)) { if (document.all) { document.all.sound.src = "gunshot.mp3"; } } else { { var audio = document.getelementbyid("soundclip2"); audio.play(); audio.play(); } } }
i don't know internet explorer compatibility, work in other browsers.
here code. cleaner, works - , it's stricly in vanilla js:
var playing = false, audio, audiotags = "", listitems = "", animals = ['bison', 'birds', 'bird1', 'vehicle', 'bird2', 'ducks', 'chirping'], urls = ['index', 'shop', 'about', 'invest', 'contact', 'projects', 'links'], currentlyhovered; function playclip(file) { currentlyhovered = file; if (playing) return; audio = document.getelementbyid("soundclip" + file); audio.play(); playing = true; } function resettime(file) { audio = document.getelementbyid("soundclip" + file); audio.currenttime = 0; playing = false; if (currentlyhovered) { playclip(currentlyhovered); } } function unsethover() { currentlyhovered = null; } (i = 0; < 7; i++) { listitems += "<li><a href='" + urls[i] + ".html' onmouseover='playclip(28" + + ");' onmouseout='unsethover();'>" + animals[i] + "</a></li>"; audiotags += "<audio id='soundclip28" + + "' onended='resettime(28" + + ");'><source src='http://www.noiseaddicts.com/samples_1w72b820/28" + + ".mp3' /></audio>"; } document.getelementbyid("nav").innerhtml = listitems; document.getelementbyid("content").innerhtml = audiotags; ul { display: flex; justify-content: space-around; font-size: 1em; list-style: none; padding-left: 0; } { text-decoration: none; } a:hover { color: lightblue; } <ul id="nav"></ul> <div id="content"></div> here codepen demo - hope helps.
Comments
Post a Comment