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.
Related
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 have an operational audio player built in HTML5 and Javascript (with some basic CSS) but I'd like to add a clickable playlist, so the name of the audio track being played is displayed and songs can be clicked on and immediately start playing.
Here's my JS:
function Jukebox() {
this.playlist = ['song1.mp3', 'song2.mp3', 'song3.mp3', 'song4.mp3']
this.currentIndex = 0
this.audio = $('#audioPlayer')[0]
this.audio.src = this.playlist[this.currentIndex]
// console.log(this.audio)
this.play = function(){
this.audio.play();
// console.log(this.currentIndex)
}
this.pause = function(){
this.audio.pause();
}
this.stop = function(){
this.audio.pause();
this.audio.currentTime = 0;
}
this.next = function(){
this.audio.pause();
this.currentIndex++;
if(this.currentIndex == this.playlist.length){
this.currentIndex = 0
};
this.audio.src = this.playlist[this.currentIndex];
this.play();
}
this.prev = function(){
this.audio.pause();
this.currentIndex--;
if(this.currentIndex <= 0){
this.currentIndex = this.playlist.length - 1
};
this.audio.src = this.playlist[this.currentIndex];
this.play();
}
}
var thisIsMyJukebox = new Jukebox()
//pass the play function by reference
$('#playBtn').click(function(){
thisIsMyJukebox.play()
})
$('#pauseBtn').click(function(){
thisIsMyJukebox.pause()
})
$('#stopBtn').click(function(){
thisIsMyJukebox.stop()
})
$('#prevBtn').click(function(){
thisIsMyJukebox.prev()
})
$('#nextBtn').click(function(){
thisIsMyJukebox.next()
})
});
The audio files are on my hard drive and the songs have proper names that I could write in, they're just named this way in the code folder because it's shorter.
Thanks for any help.
If you would like to use Boostrap, you can just add all the songs as a button list. http://getbootstrap.com/components/#list-group-buttons
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.
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);
}
I created a video playlist in HTML, and the videos play, but when you select another video, the previous one stays highlighted, and I want the highlight to be removed once another video name is clicked. http://www.evamagnus.com/OurServices.php
In the video.js code, I have
var position = 0;
var playlist;
var video;
window.onload = function() {
video = document.getElementById('video');
addClickHandlers();
video.src = "video/" + getFormatExtension();
video.load();
video.play();
}
function addClickHandlers() {
var liElements = document.querySelectorAll("ul#videolist li");
for (var i = 0; i < liElements.length; i++) {
var li = liElements[i];
li.onclick = handleVideoSelection;
}
}
function handleVideoSelection(e) {
console.log(e);
var li = e.target;
var src = li.getAttribute("data-src");
var isSelected = li.getAttribute("class");
if (isSelected == "selected") {
if (video.paused) {
video.play();
}
else if (video.ended) {
video.load();
video.play();
}
else {
video.pause();
}
}
else {
li.setAttribute("class", "selected");
video.src = src + getFormatExtension();
video.load();
video.play();
}
}
function getFormatExtension() {
if (video.canPlayType("video/mp4") != "") {
return ".mp4";
} else if (video.canPlayType("video/ogg") != "") {
return ".ogg";
} else if (video.canPlayType("video/webm") != "") {
return ".webm";
}
}
Thanks.
since you are using jQuery you should be able to replace all your code in your video.js file with this...
var video = document.getElementById('video');
var ext = getFormatExtension(); // only need to get the extension once
$("ul#videolist li").click(function(e){
video.src = e.target.getAttribute("data-src") + ext;
video.load();
video.play();
// 1 - clear them all
$("ul#videolist li").removeClass();
// 2 - set the clicked one
e.target.setAttribute("class", "selected");
});
function getFormatExtension() {
if (video.canPlayType("video/mp4") != "") {
return ".mp4";
} else if (video.canPlayType("video/ogg") != "") {
return ".ogg";
} else if (video.canPlayType("video/webm") != "") {
return ".webm";
}
}
here is an online example with a couple css enhancements that help show they are buttons with pointer cursor and hover bg. added button borders and gradient css styles.
http://jsfiddle.net/DaveAlger/AQYjY/8/
hope this works for you (be sure to mark the question as answered)