I have a code that works great for starting and pausing audio html5 player and it looks like this
i want to insert that the img of the player will too change on every click and what i wrote is this
<script>
function aud_play_pause4() {
var myAudio = document.getElementById("myAudio4");
if (myAudio.paused) {
myAudio.play();
} else {
myAudio.pause();
}
}
</script>
<script>
function aud_play_pause5() {
var myAudio = document.getElementById("myAudio5");
if (myAudio.paused && document.getElementById("btn").src == "btnpause.png") {
myAudio.play();
document.getElementById("btn").src = "btn.png";
} else {
myAudio.pause();
document.getElementById("btn").src = "btnpause.png";
}
}
</script>
this is the fifth track ID
im checking the log but their is nothing wrong with the code
but what I saw that it changes the first track id and not the fifth
192.185.121.126/~vagabond/coral/ this is the link
Your IDs must be specific for each button (img)... you have "btn" as the ID for all your buttons (img).
So, when you call document.getElementById("btn") it is getting the first img (button).
Related
I have been asked to update my question so here goes:
I have records in a database, some of which have wave file names attached. I am looping through the database and wanting to write out the word "Play" in a column under a header named Audio File. When "Play" is clicked on, the audio player plays the file and turns the href word to "Pause". When my code loops through these records, it is assigning a separate ID to each href. For me to call the function that starts the audio player, I need to send an audioControl ID (aControl) variable as well as the src source file (thissource) variable for the audio player - hence the & and " in the function call. When I use the onclick event in a button, it triggers the function. However, when I click the href link (which is what I want instead of a button) nothing happens. I am not sure which part of the code is messy, as I found the function code on the internet. Thank-you in advance for any and all help.
No matter what I do, my href onclick will not trigger a javascript function. I have taken the return false out of the function and put it in the href but that doesn't work either. I have put the same onclick code in a button and it triggers great.
HTML:
<a href='#' onclick='passvariables(" & aControl & "," & thissource & ");'>Play</a>
Javascript:
function passvariables(aControl, thissource)
{
var yourAudio= new Audio();
yourAudio.src = thissource;
yourAudio.type = 'audio/wav';
ctrl = document.getElementById(aControl);
ctrl.onclick = function ()
{
// Update the Button
var pause = ctrl.innerHTML === 'Pause';
ctrl.innerHTML = pause ? 'Play' : 'Pause';
// Update the Audio
var method = pause ? 'pause' : 'play';
yourAudio[method]();
// Prevent Default Action
return false;
}
}
Just have onclick call passvariables without the return and have passvariables return false.
You can try:
window.passvariables = function(aControl, thissource) {
// Your code
};
My guess if that your function is defined within another function (executed onload for instance). Hence "passvariables" is not defined in the "window" scope.
I saw you updated your questions that's good :)
First I recommend you to use the javascript library jquery which is easier to manipulate the DOM and you can easily find ressources and help on this site.
Here's what your code should look. I haven't tested it but it's a good overview of what this should be.
Put this in the <head> section of your HTML code
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function() {
//Assigning onClick function for every HTML tags having the css class "Play"
$('.Play').click(function(){
if($(this).html() == "Play"){
//retrieving information about the audio
var waveFile = $(this).attr("data-waveFile");
var audioId = $(this).attr("data-audioId");
//calling the startAudio function and assign the Audio object to myAudioObject
var myAudioObject = startAudio(waveFile, audioId);
if(myAudioObject){
//Audio started playing
$(this).html("Pause");
}else{
alert("error while starting to play file");
}
}else{
var isPaused = pauseAudio(myAudioObject);
if(isPaused){
//The pauseAudio function returned true so the audio is paused
$(this).html("Play");
}else{
alert("error while pausing");
}
}
});
//Functions to manage audio Player
function startAudio(waveFile, audioId){
audioObject = document.getElementById("audio");
audioObject.src = waveFile;
audioObject.play();
return true;
}
function pauseAudio(){
//do whatever to pause
audioObject = document.getElementById("audio");
audioObject.pause();
return true;
}
});
</script>
in the <body> section of your HTML code where you construct the table using database datas :
<table>
<tr>
<td>Song name</td>
<td>Action</td>
</tr>
<tr>
<td><%=WaveFile%></td>
<td>Play</td>
</tr>
</table>
<audio id="audio"></audio>
Note the <%=WaveFile%> and <%=AudioId%> should be the values you get from the database in your loop
Thank-you everyone for your help! I finally got it working! Here is the code:
yAudio = "'yourAudio" & thisline & "'"
aControl = "'audioControl" & thisline & "'"
thissource = "'/WaveFiles/" & RS.Fields("AudioIssues") &"'"
R"<td width=12 class=allprint>Play</td>"
// Call and play audio via JavaScript
$(document).ready(function()
{
var aElement = document.createElement('audio');
$('.Play').click(function()
{
if($(this).html() == "Play")
{
var waveFile = $(this).attr("data-waveFile");
var audioID = $(this).attr("data-audioId");
aElement.setAttribute('src', waveFile);
aElement.load()
aElement.addEventListener("load", function()
{
aElement.play();
$(this).html("Stop");
$(".duration span").html(aElement.duration);
$(".filename span").html(aElement.src);
}, true);
aElement.play();
$(this).html("Stop");
}
else
{
var waveFile = $(this).attr("data-waveFile");
var audioID = $(this).attr("data-audioId");
aElement.setAttribute('src', waveFile);
aElement.pause();
$(this).html("Play");
}
});
});
I'm incorporating a Konami easter egg into my website for kicks; you enter in the Konami code, and it plays the hadouken sound from Street Fighter and the eyes on the kabuki mask in the background light up for a second.
It works...kinda. I'm having an issue. After the Konami code is entered, the above effects iterate every single time the user presses a key. It's not meant to do that. I only want the effects to go off once, immediately, every time the user enters the full code.
There's another, far more minor hiccup that would be nice to work around. The mask's eyes actually light up by briefly switching the initial background for one with the desired effect. However, the first time this is done, the page flashes as the second background is loaded, but there's no flash on subsequent iterations. I had the idea of loading the second background as an HTML image with its visibility set to hidden, but that didn't work.
<script>
function PlaySound(path)
{
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', path);
audioElement.play();
}
function resetBackground()
{
document.body.style.backgroundImage = "url('onics.png')";
}
function flashBackground()
{
document.body.style.backgroundImage = "url('onics_red.png')";
setTimeout(resetBackground, 830);
}
if(window.addEventListener)
{
var kkeys=[],konami="38,38,40,40,37,39,37,39,66,65";
window.addEventListener("keydown",function(e)
{
kkeys.push(e.keyCode);
if(kkeys.toString().indexOf(konami)>=0)
{
PlaySound('hadouken.wav');
flashBackground();
}
},true);
}
</script>
You need to reset the kkeys array:
if(window.addEventListener)
{
var kkeys=[],konami="38,38,40,40,37,39,37,39,66,65";
window.addEventListener("keydown",function(e)
{
kkeys.push(e.keyCode);
if(kkeys.toString().indexOf(konami)>=0)
{
kkeys = [];
PlaySound('hadouken.wav');
flashBackground();
}
},true);
}
You can add a flag
<script>
var konamiPlayed = false;
function PlaySound(path)
{
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', path);
audioElement.play();
}
function resetBackground()
{
document.body.style.backgroundImage = "url('onics.png')";
konamiPlayed = false;
}
function flashBackground()
{
document.body.style.backgroundImage = "url('onics_red.png')";
setTimeout(resetBackground, 830);
}
if(window.addEventListener)
{
var kkeys=[],konami="38,38,40,40,37,39,37,39,66,65";
window.addEventListener("keydown",function(e)
{
if (!konamiPlayed) {
kkeys.push(e.keyCode);
if(kkeys.toString().indexOf(konami)>=0)
{
konamiPlayed = true;
PlaySound('hadouken.wav');
flashBackground();
}
}
},true);
}
</script>
EDIT :
And for the minor problem, I think it's because browser load image only when you ask it to. So, the first time it takes some time.
I have created a fiddle of my function here( http://jsfiddle.net/rhy5K/10/ ) . Now i want to provide the Sound "Mute/unpute" option for users. Example if i click on "a link then sound playing like Get ready,5,4,3,2,1 should be mute and vice-versa.
I am thinking like to call a to toggle_sound function on click, but i am confuse like what should i write inside the function to mute the sound.
Please provide me a logic, or a solution for my problem.
Explanation using code example:
I want to MUTE/UnMUTE this below sound playing
var playGetReady = function (done) {
var ids = ['audiosource', 'a_5', 'a_4', 'a_3', 'a_2', 'a_1'],
playNext = function () {
var id = ids.shift();
document.getElementById(id).play();
if (ids.length) {
setTimeout(playNext, 1000);
} else {
done();
}
};
playNext();
};
Warning: This JS fiddle demo may play sound on load
Try
HTML5 Video_tag for display video with audio
or
this below example along with html5 with jquery
window.my_mute = false;
$('#my_mute_button').bind('click', function(){
$('audio,video').each(function(){
if (!my_mute ) {
if( !$(this).paused ) {
$(this).data('muted',true); //Store elements muted by the button.
$(this).pause(); // or .muted=true to keep playing muted
}
} else {
if( $(this).data('muted') ) {
$(this).data('muted',false);
$(this).play(); // or .muted=false
}
}
});
my_mute = !my_mute;
});
I think you can use:
document.getElementById(id).volume = 1;
or
document.getElementById(id).volume = 0;
I am currently modifying a web app for iPad. I am trying to attach an audio soundtrack to the image slideshow. I currently have the audio files playing when the user hits the slideshow navigation controls but I can't seem to figure out how to make the audio play when the slides have automatically started.
When the nextBg() function in my main.js file moves from the current background image to the next I want it to play the next audio file in the list. The play function is: playAudio(). How do I do this?
The codes and files I am currently working with are:
function nextBg() {
if(bgRunning) return false;
clearInterval(bgTimer);
if(!$('#bgImages li.active').is(':last-child'))
$('#bgImages li.active').removeClass('active').next().addClass('active');
else
$('#bgImages li.active').removeClass('active').parent().find('li:first-child').addClass('active');
runBg();
}
function playAudio(path){
if(audioSupport){
var isPlaying = !myAudio.paused;
var canPlayMp3 = !!myAudio.canPlayType && "" != myAudio.canPlayType('audio/mpeg');
var canPlayOgg = !!myAudio.canPlayType && "" != myAudio.canPlayType('audio/ogg; codecs="vorbis"');
if(canPlayMp3)
myAudio.src = path+'.mp3';
else if(canPlayOgg)
myAudio.src = path+'.ogg';
myAudio.removeEventListener('ended', arguments.callee, false);
myAudio.addEventListener('ended', audioAddEndedListener , false);
if(autoPlay || isPlaying)
{
myAudio.play();
$('#audioControls .pause').css('display','block');
$('#audioControls .play').css('display','none');
}else{
$('#audioControls .play').css('display','block');
$('#audioControls .pause').css('display','none');
}
}
}
function audioAddEndedListener()
{
if(loop){
this.currentTime = 0;
this.play();
}else{
this.removeEventListener('ended', arguments.callee, false);
setNextAudio();
path = $('#audioList li.active').html();
playAudio(path);
myAudio.addEventListener('ended', audioAddEndedListener, false);
}
}
http://platinum.megatron.co.nz/main.js
http://platinum.megatron.co.nz/kitchen/video.html
Just call your playAudio() method inside the playBg() method after you swap the image.
I've tried two different methods of toggling the play/pause button on my player, neither of which work on the first click, for some reason.
This one, supposedly checks the status of the audio to see if it's paused or ended:
function togglePlayPause() {
var audioPlayer = document.getElementsByTagName('audio')[0];
var playpause = document.getElementById("playpause");
if (audioPlayer.paused || audioPlayer.ended) {
playpause.title = "pause";
playpause.innerHTML = "pause";
}
else {
playpause.title = "play";
playpause.innerHTML = "play";
}
}
Or I've tried this one, which just toggles via the onClick toggle(this):
function toggle(obj) {
if (obj.className== 'playButton') {
obj.className = 'pauseButton';
obj.title = "PAUSE";
obj.innerHTML = "PAUSE";
} else {
obj.className = 'playButton';
obj.title = "PLAY";
obj.innerHTML = "PLAY";
}
}
Neither toggle the first time the button is clicked, although the first method does change from the default inner "PLAY" to "play", so I guess that's something:
<div title="play" class="playButton" id="playpause">PLAY</div>
In both methods, subsequent clicks work fine. Any idea why this is happening? Could it have something to do with the way the audioPlayer variable is called? The array starts from 0. (I'm clutching at straws.)
Many thanks as usual!
I would go without creating functions, I would check if the link is clicked then proceed to the events that would be fired.
so something like $("#start").click(function(){}); in can be tried.
First, have the jQuery library included in your HTML header.
Then create a new javascript file, included it as well (usually this is put after the jQuery included)
In your new javascript file write the following
$(document).ready(function() {
$("#start, #stop, #play, #pause").click(function() { //you can have more or less selectors (selectors are the ones with #)
//Your code goes here
});
});
Here is a fiddle for that solution. http://jsfiddle.net/JRRm2/1/ (tidier text: http://jsfiddle.net/JRRm2/2/)