I am getting a strange message when I try to play an audio file.
On my html I got a sound file:
<audio id="song" src="song.mp3"></audio>
and when I click an image:
<img onclick="togglePlay()" src="image.png" width="100%">
</div>
on my JavaScript:
var myAudio = $("#song");
var isPlaying = false;
function togglePlay() {
if (isPlaying) {
myAudio.pause();
} else {
myAudio.play();
}
};
myAudio.onplaying = function() {
isPlaying = true;
};
myAudio.onpause = function() {
isPlaying = false;
};
I am getting no sound and on the console a warning with the message: "myAudio.play() is not a funtion".
Example solution based on your question:
var myAudio = $("#song")[0];
var isPlaying = false;
function togglePlay() {
if (isPlaying) {
myAudio.pause();
} else {
myAudio.play();
}
};
myAudio.onplaying = function() {
isPlaying = true;
};
myAudio.onpause = function() {
isPlaying = false;
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="song" src="https://ia801009.us.archive.org/4/items/BeatlesGreatestHits/02%20With%20a%20Little%20Help%20From%20My%20Friends.mp3"></audio>
<img onclick="togglePlay()" src="https://pmcdeadline2.files.wordpress.com/2014/06/the-beatles-1__140613232022.jpg" width="100%">
If broken in future check image and audio for deadlinks.
Related
I want to know how to stop an audio that is set to "autoplay" using the X key on the keyboard. I have tried in a couple of method but it doesn't work.
That's my code:
JavaScript:
var source = "audio/homepage_benvenuto.mp3";
var audio = document.createElement("audio");
audio.autoplay = true;
audio.load()
audio.addEventListener("load", function()
{
audio.play();
}, true);
audio.src = source;
window.addEventListener("keydown", checkKeyPressed, false);
function checkKeyPressed(e)
{
if (e.keyCode == "88") // 88 = X: interrompe audio in corso
{
player.pause();
player.currentTime = 0;
document.getElementById('audioA').pause();
}
}
I could like to simplify my current code and close all four functions in array with passing equivalent parameters in to them .
function firstFunction() {
if (sound) {
var audio = document.getElementById("sound1");
audio.play();
}
sound = true;
$('#topleft').addClass('litTopLeft');
}
function secondFunction() {
if (sound) {
var audio = document.getElementById("sound2");
audio.play();
}
sound = true;
$('#topright').addClass('litTopRight');
}
function thirdFunction() {
if (sound) {
var audio = document.getElementById("sound3");
audio.play();
}
sound = true;
$('#bottomleft').addClass('litBottomLeft');
}
function fourthFunction() {
if (sound) {
var audio = document.getElementById("sound4");
audio.play();
};
sound = true;
$('#bottomright').addClass('litBottomRight');
}
All functions have similar parameters that need to be passed by like :
if (sound)
sound = true;
audio.play();
Rest of the parameters need to be equivalent to each function like:
var audio = document.getElementById("sound1");
$('#topleft').addClass('litTopLeft');
Make all the values that vary between the functions parameters.
function playFunction(soundid, targetid, classname) {
if (sound) {
var audio = document.getElementById(soundid);
audio.play();
}
sound = true;
$('#' + targetid).addClass(classname);
}
Then you call it like:
playFunction('sound1', 'topleft', 'litTopLeft');
You can remove one of the parameters if the target ID is always the same as the class with lit prefix removed.
function playFunction(soundid, classname) {
if (sound) {
var audio = document.getElementById(soundid);
audio.play();
}
sound = true;
var targetid = classname.replace('lit', '').toLowerCase();
$('#' + targetid).addClass(classname);
}
Then it's just
playFunction('sound1', 'litTopLeft');
I'm trying to make a simple audio player but it's just not working fine!
Here's the JavaScript:
var audio = document.getElementById("audio");
var isPlaying = false;
function togglePlay(element) {
element.classList.toggle("playing");
if (isPlaying) {
document.getElementById("audio").pause();
document.getElementById("audio").currentTime = 0;
} else {
document.getElementById("audio").play();
}
}
document.getElementById("audio").onplaying = function() {
var isPlaying = true;
};
document.getElementById("audio").onpause = function() {
var isPlaying = false;
};
Please help me!
var audio = document.getElementById("audio");
// use .paused instead
// var isPlaying = false;
function togglePlay(element) {
var promise;
if (!audio.paused) { /* isPlaying */
audio.pause();
audio.currentTime = 0;
element.classList.remove("playing");
} else {
// play is not instant, it returns a promise
promise = audio.play();
if (promise.then !== undefined) {
promise.then(function () {
element.classList.add("playing");
});
} else { /* old API */
element.classList.add("playing");
}
}
}
audio.onplaying = function() {
;
};
audio.onpause = function() {
;
};
Make sure to put the <script> at the end of the <body>
<script>/* put script at the end of body */</script>
</body>
</html>
Make sure the audio source for <audio> is an actual audio file. (not an html file containing audio) Open console and look at network requests.
window.onload = function () {
"use strict";
var video = document.getElementById("video"),
playButton = document.getElementById("play-pause"),
muteButton = document.getElementById("mute"),
fullScreenButton = document.getElementById("full-screen"),
seekBar = document.getElementById("seek-bar"),
volumeBar = document.getElementById("volume-bar");
muteButton.addEventListener("click", function () {
if (video.muted === false) {
video.muted = true;
muteButton.innerHTML = "Unmute";
} else {
video.muted = false;
muteButton.innerHTML = "Mute";
}
});
fullScreenButton.addEventListener("click", function () {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen(); // Firefox
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen(); // Chrome and Safari
}
});
seekBar.addEventListener("change", function () {
var time = video.duration * (seekBar.value / 100);
video.currentTime = time;
});
video.addEventListener("timeupdate", function () {
var value = (100 / video.duration) * video.currentTime;
seekBar.value = value;
});
seekBar.addEventListener("mousedown", function () {
video.pause();
});
seekBar.addEventListener("mouseup", function () {
video.play();
});
volumeBar.addEventListener("change", function () {
video.volume = volumeBar.value;
});
This is my code and I'm receiving 3 error codes from JSLint.
1. Expected '(end)' at column 1, not column 7.
2. Expected '}' to match '{' from line 1 and instead saw '(end)'.
3. Expected ';' and instead saw '(end)'.
Any help getting this working would be greatly appreciated.
/*jslint browser: true*/
window.onload = function () {
"use strict";
var video = document.getElementById("video"),
//playButton = document.getElementById("play-pause"),
muteButton = document.getElementById("mute"),
fullScreenButton = document.getElementById("full-screen"),
seekBar = document.getElementById("seek-bar"),
volumeBar = document.getElementById("volume-bar");
muteButton.addEventListener("click", function () {
if (video.muted === false) {
video.muted = true;
muteButton.innerHTML = "Unmute";
} else {
video.muted = false;
muteButton.innerHTML = "Mute";
}
});
fullScreenButton.addEventListener("click", function () {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen(); // Firefox
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen(); // Chrome and Safari
}
});
seekBar.addEventListener("change", function () {
var time = video.duration * (seekBar.value / 100);
video.currentTime = time;
});
video.addEventListener("timeupdate", function () {
var value = (100 / video.duration) * video.currentTime;
seekBar.value = value;
});
seekBar.addEventListener("mousedown", function () {
video.pause();
});
seekBar.addEventListener("mouseup", function () {
video.play();
});
volumeBar.addEventListener("change", function () {
video.volume = volumeBar.value;
});
};
This gives me no errors. /*jslint browser: true*/ is to let jslint know window, document and so on are defined. I commented you unused playButton. And you forgot ; at the end of your code.
im just a beginner in javascript and im stuck at a problem.
when i click play with function play()
it shows if its <= 2.5 but not when its > 2.5 .(I displayed the 'reddot' in html as display hidden).
function play() {
var audio = document.getElementById("audio");
audio.play();
if (audio.currentTime <= 2.5) {
document.getElementById('reddot').style.display = 'block';
}
if (audio.currentTime > 2.5) {
document.getElementById('reddot').style.display = 'none';
document.getElementById('reddot2').style.display = 'block';
}
}
function () {
}
function pause(){
var audio = document.getElementById("audio");
audio.pause();
}
function load(){
var audio = document.getElementById("audio");
audio.pause();
audio.currentTime = 0;
}
function rewind() {
var audio = document.getElementById("audio");
audio.play();
audio.currentTime = (audio.currentTime-6);
}