We Keep Coding

Javascript - How to onclick play several files various formats e.g. video and audio in one function

I tried to create a function to play and pause a video. But wondering if i could include also a audio file. Thanks.
var audio = document.getElementById("myAudio");
var video = document.getElementbyId("myVideo");
function playFile() {
audio.play();
video.play();
}
function pauseFile() {
audio.pause();
video.pause();
}

AudioContext does not have a pause property?

I have used javascript Audio() before, but now I need to add some reverb effect in the audio and I am using reverb.js which uses the AudioContext api. I have the start property available, but no pause property? How do I pause or stop the audio??
Here is my code:
<script src="http://reverbjs.org/reverb.js"></script>
<script>
// 1) Setup your audio context (once) and extend with Reverb.js.
var audioContext = new (window.AudioContext || window.webkitAudioContext)();
reverbjs.extend(audioContext);
// 2) Load the impulse response; upon load, connect it to the audio output.
var reverbUrl = "http://reverbjs.org/Library/SaintLawrenceChurchMolenbeekWersbeekBelgium.m4a";
var reverbNode = audioContext.createReverbFromUrl(reverbUrl, function() {
reverbNode.connect(audioContext.destination);
});
// 3) Load a test sound; upon load, connect it to the reverb node.
var sourceUrl = "./sample.mp3";
var sourceNode = audioContext.createSourceFromUrl(sourceUrl, function() {
sourceNode.connect(reverbNode);
});
</script>
Play
Stop
Also, I tried using stop(), and it works, but when I fire start() after clicking on stop, the start() doesn't work. Can you you help me out with a solution??

You can use the suspend() and resume() methods of AudioContext to pause and resume your audio: https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/suspend
One way to implement this with a single button for play/pause/resume, would be to add a function that controls the player state. For example:
let started = false;
function pauseOrResume() {
if (!started) {
sourceNode.start();
started = true;
document.getElementById("pauseButton").innerHTML = 'Pause';
} else if (audioContext.state === 'running') {
audioContext.suspend().then(function () {
document.getElementById("pauseButton").innerHTML = 'Resume';
});
} else if (audioContext.state === 'suspended') {
audioContext.resume().then(function () {
document.getElementById("pauseButton").innerHTML = 'Pause';
});
}
}
And replace your existing "Play" button with:
<a id="pauseButton" href="javascript:pauseOrResume()">Play</a>
This does the following:
If the audio hasn't yet been started, the link will say "Play".
If the user clicks "Play", the audio will start playing and the text of the link will change to "Pause".
If the user clicks "Pause" while the audio is playing, it will be paused, and the text of the link will change to "Resume".

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()

Play button won't start video once video is finished

I have a play/pause button for a video player im making. Once the video has gone trough one play through, I'd like the play button to have the video start again, but it doesn't.
Here's the script im using:
function play(){
if(!media.paused && !media.ended){
media.pause();
playButton.innerHTML='Play';
window.clearInterval(updateBar);
}else{
media.play();
playButton.innerHTML='Pause';
updateBar=setInterval(update, 100)
}
}

How about structuring your function like this
function play(){
if (!media.paused) { // if currently playing (or ended?)
if (media.ended) { // if at the end
media.currentTime = 0; // go to start
} else { // else
media.pause(); // pause
playButton.innerHTML='Play';
window.clearInterval(updateBar);
return; // and end function here
}
} // then if function didn't end
media.play(); // resume playing
playButton.innerHTML='Pause';
updateBar=setInterval(update, 100);
}
The DOM Interface you're using is HTMLMediaElement.