We Keep Coding

Vimeo videos do not load

I would like to use integrated Vimeo videos on a page and have them start playing as soon as the page is loaded and when the first video has finished, the second one starts. In my code I have an array of video ids but my problem is the video does not load.
<div id="headervideo"></div>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
//====================
document.addEventListener("DOMContentLoaded", function(event) {
var videos = ['240512614', '227735391']; // videos ids
var options = {
width: 640,
loop: true
};
var player = new Vimeo.Player('headervideo', options);
playMovie(player, videos)
})//end function
//====================
var playMovie = function(player, videos) {
if(!videos.length){
return false;
}
var video = videos.shift();
alert (video)
player.loadVideo(videos).then(function(id) {
alert("the video successfully loaded ")
player.getEnded().then(function(ended) {
playMovie(player, videos)
}).catch(function(error) {
console.warn(error)
});
}).catch(function(error) {
console.warn(error);
});
}//end function
//====================
</script>

Your first issue lies in
new Vimeo.Player('headervideo', options);
You cannot create a Vimeo.Player without specifying a video in the options object (or as an html attribute on an associated element).
So, specifying either:
var video = videos.shift();
var options = {
width: 640,
loop: true,
id: video
}
or:
var options = {
width: 640,
loop: true,
id: videos[0]
}
Will let you load the video.
But this will raise your second issue, that playMovie will not wait for your currently playing video to finish, but rather swap the video out immediately. getEnded() is not a synchronously blocking function.
What you want to do is instead listen on the ended event. And also turn of the loop: true as this will disable the ended event
document.addEventListener("DOMContentLoaded", function(event) {
window.videos = ['240512614', '227735391']; // videos ids
var video = videos.shift();
var options = {
width: 640,
loop: false,
id: video
};
window.player = new Vimeo.Player('headervideo', options);
window.player.on('ended', playNext);
window.player.play();
})//end function
//====================
var playNext= function() {
alert('foo');
if(!window.videos.length){
return false;
}
var video = window.videos.shift();
alert (video);
player.loadVideo(video).then(function(id) {
alert("the video "+id+" successfully loaded ");
player.play();
}).catch(function(error) {
console.warn(error)
});
}//end function

How to apply a fade effect in HTML5 mute button

I have a mute button that simply mute a HTML5 audio object. It does mute the track but I like to add a fade in/out effect.
I tried it by adding audio.animate({volume: 0}, 2000); but its not working.
Any idea?
Thank in advance!
audio = new Audio();
audio.src = "http://myst729.qiniudn.com/within-temptation_pale.mp3"
audio.play();
$(".mute").on("click tap", function(){
if (audio.muted) {
audio.animate({volume: 1}, 2000);
audio.muted = false;
$(this).text("mute");
} else {
audio.muted = true;
audio.animate({volume: 0}, 2000);
$(this).text("unmute");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="mute">mute</button>

The audio object should be a JQuery-object in order to use the JQuery .animate() function. You can do that by changing audio.animate to $(audio).animate.
Also the audio.muted = ... statements turn off/on the music instantly, so you won't hear the animations.
A working example:
audio = new Audio();
audio.src = "http://myst729.qiniudn.com/within-temptation_pale.mp3"
audio.play();
$(".mute").on("click tap", function() {
var $btn = $(this);
var muted = audio.muted;
if (muted) audio.muted = false; // It cannot be animated if it's muted
$btn.prop('disabled', true); // Optional
$(audio).animate({volume: muted ? 1 : 0}, 2000, function() {
audio.muted = !muted;
$btn.text(muted ? "mute" : "unmute");
$btn.prop('disabled', false); // Optional
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="mute">mute</button>

Play and Pause with onclick on the same Img

The following script is playing a soundfile when i click on a img (onclick). How do i pause it by clicking on the same img? I´ve tried audio.pause(), but it won´t work.
function play(){
var audio = document.getElementById("myaudio");
audio.style.display="block";
audio.play();
}
<img src="Bilder/play2.png">

You should rename your function to audioHandler() for example which will handle whether to play or pause your audio.
Create a boolean to remember if your audio was playing or was on pause.
//initial status: audio is not playing
var status = false;
var audio = document.getElementById("myaudio");
function audioHandler(){
if(status == false || audio.paused){
audio.play();
status = true;
}else{
audio.pause();
status = false;
}
}

Check the media.paused property of your HTMLMediaElement
function play_pause(media) {
if (media.paused) {
media.play();
else {
media.pause();
}
}
Use this in the handler on the element you want to control the action
var elm = document.getElementById('play_button'),
audio = document.getElementById('myaudio');
elm.addEventListener('click', function (e) {
play_pause(audio);
});

Play audio and restart it onclick

I'm looking to restart an audio file in a HTML5 audio player. I have defined a audio file and a play button.
<audio id="audio1" src="01.wav"></audio>
<button onClick="play()">Play</button>
When I click the play button the audio file starts playing, but when I click the button again the audio file doesn't stop and will not play again until it reaches the end of the file.
function play() {
document.getElementById('audio1').play();
}
Is there a method that would allow me to restart the audio file when I click the button using onclick rather than waiting for the song to stop?

To just restart the song, you'd do:
function play() {
var audio = document.getElementById('audio1');
if (audio.paused) {
audio.play();
}else{
audio.currentTime = 0
}
}
FIDDLE
To toggle it, as in the audio stops when clicking again, and when click another time it restarts from the beginning, you'd do something more like :
function play() {
var audio = document.getElementById('audio1');
if (audio.paused) {
audio.play();
}else{
audio.pause();
audio.currentTime = 0
}
}
FIDDLE

soundManager.setup({
preferFlash: false,
//, url: "swf/"
onready: function () {
soundManager.createSound({
url: [
"http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3", "http://www.html5rocks.com/en/tutorials/audio/quick/test.ogg"
],
id: "music"
});
soundManager.createSound({
url: [
"http://www.w3schools.com/html/horse.mp3",
],
id: "horse"
});
soundManager.play("music");
}
}).beginDelayedInit();
And to start horse and pause all other sounds currently playing in a click event:
$("#horse").click(function () {
soundManager.stopAll();
soundManager.play("horse");
});

function sound(src) {
this.sound = document.createElement("audio");
this.sound.src = src;
this.sound.setAttribute("preload", "auto");
this.sound.setAttribute("controls", "none");
//this.sound.style.display = "none";
document.body.appendChild(this.sound);
this.play = function () {
this.sound.play();
}
this.stop = function () {
this.sound.pause();
this.sound.currentTime = 0
}
}
you can use the /above function to play sound
let mysound1 = new sound('xyz.mp3')
mysound1.play()

HTML5/JavaScript/jQuery audio playlist

I've got this JavaScript/jquery code:
$(document).ready(function() {
var audioElement = document.createElement('audio');
var secondtrack = 'hangover.ogg';
audioElement.setAttribute('src', 'hangover.ogg');
audioElement.load()
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);
$('#play').click(function() {
audioElement.play();
});
$('#pause').click(function() {
audioElement.pause();
});
});
How could I get another song started after the first ended?

The AUDIO element should fire a "ended" event though I am not sure how well this is supported at the moment.
So you could try something like that:
audioElement.addEventListener('ended', function () {
// Play another song
});
See also:
http://dev.w3.org/html5/spec/Overview.html#event-media-ended