I've written some javascript so that the player will stop buffering once its paused so it will stop buffering. The code basically destroys the player, creates a new one, every time either play or pause is pressed. My only problem is it seems that it only listens for the play or pause event once. If I do them again, the code no longer runs. Can someone PLEASE take a look at this and let me know what I did wrong? Before you ask, the reason I'm recreating the player is because I hear this is necessary to do for ios to actually stop buffering.. Is this true? If there is a better way please let me know, as any help would be appreciated.
Thanks! (Code Below)
<audio id="myaudio" controls>
<source id="sourceMp3" src="" autoplay type="audio/mp3" preload="none"/>
Your browser does not support the audio element.
</audio>
<script type="text/javascript">
var sourceMp3=document.getElementById('myaudio');
sourceMp3.src="url of mp3 stream";
function playfunc(){
var audio = document.getElementById('myaudio');
//audio.pause(0);
audio.src = "http://";
audio.load();
audio.remove();
var x = document.createElement("AUDIO");
x.setAttribute("id","myaudio");
x.setAttribute("controls", "controls");
x.setAttribute("src","http://");
x.load();
document.body.appendChild(x);
var audio = document.getElementById('myaudio');
audio.src = "http://";
audio.load();
audio.src = "url of mp3 stream";
audio.load();
audio.play();
console.log('play pressed')
}
function pausefunc(){
//var tmp = sourceMp3.src;
var audio = document.getElementById('myaudio');
audio.pause(0);
audio.src = "http://";
audio.load();
audio.remove();
var x = document.createElement("AUDIO");
x.setAttribute("id","myaudio");
x.setAttribute("controls", "controls");
x.setAttribute("src","http://");
x.load();
document.body.appendChild(x);
var audio = document.getElementById('myaudio');
audio.src = "http://";
audio.load();
audio.src = "url of mp3 stream";
audio.load();
audio.pause();
console.log('pause pressed');
}
document.getElementById('myaudio').addEventListener('pause', pausefunc, false);
document.getElementById('myaudio').addEventListener('play', playfunc, false);
</script>
Comment out your code and just log the click. Something is triggering an exception killing the event. You'll see it the event fires reliably without your code.
Related
I'm a total beginner and I try to use this to make an audio player
<audio id="music" controls>
<source src="sample.mp3" type="audio/mp3">
</audio>
but on mobile websites only a play button is showed (I can't insert a picture but on desktop we will see a normal player which consists of slider).
So how can I make the player appear on mobile just like its appearance on desktop?
It won't work. In plain HTML Simulated user interactions doesn't work in mobile.
Add a little javascript
window.addEventListener('load', function () {
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var source = audioCtx.createBufferSource();
var xhr = new XMLHttpRequest();
xhr.open('GET', 'audio-autoplay.wav');
xhr.responseType = 'arraybuffer';
xhr.addEventListener('load', function (r) {
audioCtx.decodeAudioData(
xhr.response,
function (buffer) {
source.buffer = buffer;
source.connect(audioCtx.destination);
source.loop = false;
});
source.start(0);
});
xhr.send();
});
I have a HTML code:
<audio src="whale-music.mp3" id="audio"></audio>
<button class="oi oi-media-play b-play" id="play" onclick="play()"></button>
and the script:
<script>
function play() {
var audio = document.getElementById('audio');
if (audio.paused) {
audio.play();
document.getElementById('play').removeClass('oi-media-play')
document.getElementById('play').addClass('oi-media-pause')
}else{
audio.pause();
audio.currentTime = 0
document.getElementById('play').addClass('oi-media-play')
document.getElementById('play').removeClass('oi-media-pause')
}
}
It plays and pauses the song but it doesn't change classes, neither it returns to playing at point it was stopped (it plays from the beginning). What's wrong with this code?
us this code
function play() {
var audio = document.getElementById('audio');
if (audio.paused) {
audio.play();
document.getElementById('play').classList.remove('oi-media-play')
document.getElementById('play').classList.add('oi-media-pause')
}else{
audio.pause();
audio.currentTime = 0
document.getElementById('play').classList.add('oi-media-play')
document.getElementById('play').classList.remove('oi-media-pause')
}}
the "removeClass" and "addClass" is a jquery syntax
if you use native code:
document.getElementById('play').classList.remove('oi-media-play');
document.getElementById('play').classList.add('oi-media-pause');
or Jquery:
$('#play').removeClass('oi-media-play');
function playSound(buffer) {
aSoundSource = audioContext.createBufferSource(); source.
aSoundSource.buffer = buffer;
aSoundSource.connect(gainNode);
gainNode.connect(analyser);
var volX = volControl();
//gainNode.gain.value = 0.1;
gainNode.gain.value = volX;
analyser.connect(audioContext.destination);
aSoundSource.start(0);
document.title = document.getElementById("files").value;
playing = true;
requestAnimFrame(drawVisualisation);
}
///////////////////////////////////////
function play(){
var audio = new Audio('test.mp3');
audio.play();
}
second function is working perfectly its i have called particular audio to play its working for button here i want to input a song and play
Havent tested but this is the rough idea
document.getElementById("inputFile").onchange = loadMusic
function loadMusic(e) {
console.log(e.target.value)
var audio = new Audio(e.target.value)
audio.play();
}
<input type="file" id="inputFile">
I want to play only one audio at a time in response to some mouse event. The situation is onmouse over event on different HTML element plays audio. It becomes noisy when a user moves the mouse fast from one element to another and both the element plays audio. I want to check whether any audio is being played before playing a new audio. I used following code:
var $audioAnno=0;
function audioAnnotation(y){
var audio;
if ($audioAnno==0){
$audioAnno=1;
audio = new Audio(y);
audio.play();
$audioAnno=0;
}
}
It does not stop the 2nd audio to play.
this is how, I would do it, maintain a flag canPlay and on mouse event, if true, then play
canPlay = true;
var es = document.getElementsByTagName('audio'), audios=[];
for(var i=0;i<es.length;i++) audios.push(es[i]);
audios.forEach(function(e){
e.addEventListener('play', function(){
canPlay= false;
});
e.addEventListener('ended', function(){
canPlay= true;
});
});
// later on some mouseEvent based on some condition
function onMouseEvent(audioElement){
if(canPlay){
audioElement.play();
}
};
Edit: fiddle demo.
Edit2:
same thing with just audio object:
var audio = new Audio(), canPlay = true;
audio.src = 'http://upload.wikimedia.org/wikipedia/en/f/f9/Beatles_eleanor_rigby.ogg';
audio.addEventListener('play', function(){
console.log('playing');
canPlay = false;
});
audio.addEventListener('ended', function(){
console.log('stopped');
canPlay = true;
});
audio.play();
//similar mouse event listener changes to
function onMouseEvent(){
if(canPlay){
//audio.src ='...'; // providing new source
audio.play();
}
};
Thanks all.
I could solve the problem. I used following code:
var $audioAnno=0;
function audioAnnotation(x, y){
var audio = new Audio(y);
if ($audioAnno==0){
$audioAnno = 1;
audio.play();
audio.addEventListener("ended", function(){ $audioAnno = 0; });
}
}
This might have been answered before but I have searched for hours and can't find anything without jquery on getting this to work and I don't really understand the bind method or how that works.
I just need my video to display a message once it is finished.
For some reason any time I try to use video.ended I get null back instead of true or false.
Also not sure why my setInterval is apparently wrong.
HTML:
<video id="videoAllUrBase" poster="images/all-ur-base-poster.png">
<source src="video/All Your Base Are Belong To Us.mp4" />
<source src="video/All Your Base Are Belong To Us.mp4.ogg" />
<source src="video/All Your Base Are Belong To Us.mp4.webm" />
<p>Your browsers does not support video</p>
</video>
<br></br>
<input id="playButton" type="button" onclick="playVideo();" value="Play" />
<input id="skipButton" type="button" onclick="skip(10);" value="Skip" />
<input id="rewButton" type="button" onclick="skip(-10);" value="Rewind" />
<p id="vidMessage">Click the Play button to start the video.</p>
JavaScript:
function playVideo(){
var video = document.getElementById('videoAllUrBase');
var message = document.getElementById('vidMessage');
var button = document.getElementById('playButton');
if(video.paused){
video.play();
button.value = "Pause";
message.innerHTML = "The video is playing, click the Pause button to pause the video.";
} else {
video.pause();
button.value = "Play";
message.innerHTML = "The video is paused, click the Play button to resume the video.";
}
}
function checkEnd{
var video = document.getElementById('videoAllUrBase');
var message = document.getElementById('vidMessage');
if(video.ended){
message.innerHTML = "The video has ended, click Play to restart the video.";
}
}
setInterval(checkEnd, 1000);
function skip(value) {
var video = document.getElementById("videoAllUrBase");
video.currentTime += value;
}
Instead of using setInterval to check for the video's status, listen for the ended event to know when it ends. Here's your code with the changes I'd use:
function playVideo() {
var video = document.getElementById('videoAllUrBase');
var message = document.getElementById('vidMessage');
var button = document.getElementById('playButton');
if (video.paused) {
video.play();
button.value = "Pause";
message.innerHTML = "The video is playing, click the Pause button to pause the video.";
} else {
video.pause();
button.value = "Play";
message.innerHTML = "The video is paused, click the Play button to resume the video.";
}
video.onended = videoEnded;
}
function videoEnded() {
var video = document.getElementById('videoAllUrBase');
var message = document.getElementById('vidMessage');
message.innerHTML = "The video has ended, click Play to restart the video.";
}
function skip(value) {
var video = document.getElementById("videoAllUrBase");
video.currentTime += value;
}
While it probably wouldn't affect your setup, it could be more useful to use addEventListener to bind the event.
References:
https://developer.mozilla.org/en-US/docs/DOM/Media_events
https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener