Thanks for stopping by. I'm creating a page to cycle through video clips. The cycling through part (run() function) works just fine. I also created a few buttons to play the specific video clip and these are not working. I've only written the function for the first button and I'll write the other two when I get the first working.
Any help if greatly appreciated.
Thanks,
Tommy
<video id="tutorials" autoplay onended="run()"
autobuffer="true" width="600px" height="350px" controls>
<source src="video1.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
<br>
<br>
<button id="tut1">Play Tutorial 1</button>
<button id="tut2">Play Tutorial 2</button>
<button id="tut3">Play Tutorial 3</button>
<script type="text/javascript">
video_count =1;
videoPlayer = document.getElementById("tutorials");
function run()
{
video_count++;
if (video_count == 4) return;
var nextVideo = "video"+video_count+".mp4";
videoPlayer.src = nextVideo;
videoPlayer.play();
};
document.getElementByID("tut1").onclick = function()
{
videoPlayer.stop();
videocount = 1;
var video = "video1.mp4";
videoPlayer.src = video;
videoPlayer.play();
}
</script>
I'd prefer to structure the code this way:
<script type="text/javascript">
video_count =1;
videoPlayer = document.getElementById("tutorials");
function runNext()
{
runVideo(video_count+1);
}
function runVideo(number)
{
if (number > 3) return;
video_count = number;
videoPlayer.src = "video"+video_count+".mp4";
videoPlayer.play();
}
</script>
HTML:
<button id="tut1" onclick="runVideo(1);">Play Tutorial 1</button>
<button id="tut2" onclick="runVideo(2);">Play Tutorial 2</button>
<button id="tut3" onclick="runVideo(3);">Play Tutorial 3</button>
Related
I want to change playback speed for number of audio clips on the same HTML page.
The JS code for changing the speed goes like this:
var vid = document.getElementById("myAudio");
function getPlaySpeed() {
alert(vid.playbackRate);
}
function setPlaySpeed10() {
vid.playbackRate = 1.0;
}
function setPlaySpeed09() {
vid.playbackRate = 0.9;
}
function setPlaySpeed08() {
vid.playbackRate = 0.8;
}
And HTML for audio is this:
<audio id="myAudio" controls src="/home/../../../1-001.mp3"></audio>
<button onclick="getPlaySpeed()" type="button">What's the speed</button>
<button onclick="setPlaySpeed10()" type="button">1</button>
<button onclick="setPlaySpeed09()" type="button">0.9</button>
<button onclick="setPlaySpeed08()" type="button">0.8</button>
<audio id="myAudio" controls src="/home/../../../1-002.mp3"></audio>
<button onclick="getPlaySpeed()" type="button">What's the speed</button>
<button onclick="setPlaySpeed10()" type="button">1</button>
<button onclick="setPlaySpeed09()" type="button">0.9</button>
<button onclick="setPlaySpeed08()" type="button">0.8</button>
So the speed actually changes only for the first element.
I did change the id for the second element to myAudio1 and duplicated the JS code with the myAudio1 and this way both of them work, obviously :) but there should be better way!
Please help :)
Passing the element id as a parameter in your functions will eliminate the need to duplicate your functions. The same thing can be applied to the speed as well.
function getPlaySpeed(elementId) {
var vid = document.getElementById(elementId);
alert(vid.playbackRate);
}
function setPlaySpeed(elementId, speed) {
var vid = document.getElementById(elementId);
vid.playbackRate = speed;
}
<audio id="myAudio-001" controls src="https://audionautix.com/Music/AshesOfAnEmpire.mp3"></audio>
<button onclick="getPlaySpeed('myAudio-001')" type="button">What's the speed</button>
<button onclick="setPlaySpeed('myAudio-001', 1.0)" type="button">1</button>
<button onclick="setPlaySpeed('myAudio-001', 0.9)" type="button">0.9</button>
<button onclick="setPlaySpeed('myAudio-001', 0.8)" type="button">0.8</button>
<audio id="myAudio-002" controls src="https://audionautix.com/Music/Assasins.mp3"></audio>
<button onclick="getPlaySpeed('myAudio-002')" type="button">What's the speed</button>
<button onclick="setPlaySpeed('myAudio-002', 1.0)" type="button">1</button>
<button onclick="setPlaySpeed('myAudio-002', 0.9)" type="button">0.9</button>
<button onclick="setPlaySpeed('myAudio-002', 0.8)" type="button">0.8</button>
Note: replaced the audio files with something accessible so you can test this example live.
As required by license: music by audionautix.com
<button class="button" style="width: 200px;" onclick="playSound()">Play sound</button>
function playSound() {
audio.pause();
var audio = new Audio('V2018-Museum-filer/mp3file.mp3');
audio.play();
}
When clicking the button multiple tiems to start the audio multiple times, i want to stop the audio already playing for it to replay. How can i do this? I get an error saying audio is undefined.
Hope this helps...
When the button is clicked, the audio is paused and restarts on second click.
function playSound() {
var audioControl = document.getElementById('sound');
var btn = $("#player");
if (btn.click && audioControl.paused !== true) {
audioControl.pause();
} else if (btn.click && audioControl.paused === true) {
audioControl.currentTime = 0;
audioControl.play();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="sound" controls>
<source src="http://www.largesound.com/ashborytour/sound/brobob.mp3" type="audio/mpeg">
</audio>
<button id="player" style="width: 200px;" onclick="playSound()">Play sound</button>
<audio id='audio-player' controls='controls'>
<source src='sound.wav' type='audio/wav'>
Your browser does not support the audio element,
</audio>
<button id='play' onclick="document.getElementById('audio-player').play(); document.getElementById('play').style.display='none'; document.getElementById('pause').style.display='block';">Play</button>
<button id='pause' style='display: none' onclick="document.getElementById('audio-player').pause(); document.getElementsById('pause').style.display='none'; document.getElementsById('play').style.display='block';">Pause</button>
<button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime -= 10;">Rewind</button>
<button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime = 0;">Stop</button>
<button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime += 10;">Forward</button>
<br>
the expected response should be that clicking play gets rid of play and shows pause and vice versa (besides this the buttons themselves act as expected)
<script>
function playPause() {
if (document.getElementById('play')) {
if (document.getElementById('play').style.display == 'none') {
document.getElementById('play').style.display = 'block';
document.getElementById('pause').style.display = 'none';
}
else {
document.getElementById('play').style.display = 'none';
document.getElementById('pause').style.display = 'block';
}
}
}
</script>
<audio id='audio-player' controls='controls'>
<source src='sound.wav' type='audio/wav'>
Your browser does not support the audio element,
</audio>
<div id="play"><button onclick="document.getElementById('audio-player').play(); playPause();">Play</button></div>
<div id="pause" style='display: none'><button onclick="document.getElementById('audio-player').pause(); playPause();">Pause</button></div>
<button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime -= 10;">Rewind</button>
<button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime = 0;">Stop</button>
<button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime += 10;">Forward</button>
<br>
well i got it working with a bit of a different approach to the scenario.
putting the buttons in divs.
<script>
function playPause() {
if (document.getElementById('play')) {
if (document.getElementById('play').style.display == 'none') {
document.getElementById('play').style.display = 'block';
document.getElementById('pause').style.display = 'none';
}
else {
document.getElementById('play').style.display = 'none';
document.getElementById('pause').style.display = 'block';
}
}
}
</script>
<audio id='audio-player' controls='controls'>
<source src='sound.wav' type='audio/wav'>
Your browser does not support the audio element,
</audio>
<div id="play"><button onclick="document.getElementById('audio-player').play(); playPause();">Play</button></div>
<div id="pause" style='display: none'><button onclick="document.getElementById('audio-player').pause(); playPause();">Pause</button></div>
<button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime -= 10;">Rewind</button>
<button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime = 0;">Stop</button>
<button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime += 10;">Forward</button>
<br>
well i got it working with a bit of a different approach to the scenario.
putting the buttons in divs.
its not a correct answer according to the question but it is a "correct" answer as to what i was trying to accomplish.
Hi I used HTML5 audio player and linked a mp3 file and autoplay functionality did . But it's time duration 37 minutes but it stop after 1 minute.
Here is my code jsfiddle
var audio1 = document.getElementById("player1");
var btn1 = document.getElementById("pButton1");
var pause_hover1 = document.getElementById("pause-hover");
var vid = document.getElementById("player1");
btn1.addEventListener("click", function(){
if (audio1.paused) {
audio1.play();
btn1.classList.remove("pause1");
btn1.classList.add("play1");
pause_hover1.style.display = "none";
} else {
audio1.pause();
btn1.classList.remove("play1");
btn1.classList.add("pause1");
pause_hover1.style.display = "block";
}
});
<audio loop id="player1" autoplay="true" src="http://downloadmotivations.com/wp-content/themes/downloadmotivation/Dream.mp3" type="audio/mpeg">
</audio>
<div id="audioplayer1">
<button id="pButton1" style="background: transparent;" class="play1"> audio</button>
</div>
I have changed your code to the following and it's working now at least at my end.
if you don't want control please remove controls from audio tag
var audio1 = document.getElementById("player1");
var btn1 = document.getElementById("pButton1");
var pause_hover1 = document.getElementById("pause-hover");
var vid = document.getElementById("player1");
btn1.addEventListener("click", function(){
if (audio1.paused) {
audio1.play();
btn1.classList.remove("pause1");
btn1.classList.add("play1");
pause_hover1.style.display = "none";
} else {
audio1.pause();
btn1.classList.remove("play1");
btn1.classList.add("pause1");
pause_hover1.style.display = "block";
}
});
<audio autoplay="true" controls id="player1">
<source src="http://downloadmotivations.com/wp-content/themes/downloadmotivation/Dream.mp3" type="audio/ogg">
<source src="http://downloadmotivations.com/wp-content/themes/downloadmotivation/Dream.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div id="audioplayer1">
<button id="pButton1" style="background: transparent;" class="play1"> audio</button>
</div>
I create two audio players on the same web page.
<audio id="player0">
<button id="play0" /><button id="forward0" />
<button id="backward0" /></audio> <audio id="player1">
<button id="play1" />
<button id="forward1" /><button id="backward1" />
</audio>
But when I click "play0", both of them play. I think the problem is I'm binding the eventListener to one playbtn. Can someone tell me how to unbind the eventListener, so I can play just one at a time?
var index = 0;
var playbtn = document.getElementById("play-images-"+index);
var playbtn.addEventListener("click", playPause, false);
index++;
function playPause(){
playbtn = document.getElementById("play"+index);
if(!audio.paused && !audio.ended){
audio.pause();
}else{
audio.play();
}
}
This should be close to what you need...
HTML
<audio id="player0">
<button id="play0" />
<button id="forward0" />
<button id="backward0" />
</audio>
<audio id="player1">
<button id="play1" />
<button id="forward1" /><button id="backward1" />
</audio>
JavaScript
// init page when window loads
window.addEventListener('load', initPage, false);
function initPage() {
// add click event to play buttons
var btnColl = document.getElementsByTagName('button');
for (var i = 0; i < btnColl.length; i++) {
if (btnColl[i].id.indexOf('play')> -1) {
btnColl[i].addEventListener('click', playPause, false);
}
}
}
function playPause(sender) {
// get audio player based on button id
var audioPlayer = document.getElementById(sender.srcElement.id.replace('play', 'player'));
if(!audioPlayer.paused && !audioPlayer.ended){
audioPlayer.pause();
}else{
audioPlayer.play();
}
}