how to optimize this random playlist html5 audio script - html

<script type="text/javascript">
function random_playlist(){
var myrandom=Math.round(Math.random()*4);
var soundurl='http://dummy.xy/dummy.mp3';
if (myrandom==0){soundurl='http://path_to.mp3';}
else if (myrandom==1){soundurl='http://path_to.mp3';}
else if (myrandom==2){soundurl='http://path_to.mp3';}
else if (myrandom==3){soundurl='http://path_to.mp3';}
else if (myrandom==4){soundurl='http://path_to.mp3';}
console.log(soundurl);
return soundurl;
};
</script>
<audio id="audioplayer_id" controls="controls" loop>
<source id="source_id" src="" type="audio/mp3"/>
Your browser does not support the audio element
</audio>
<script type="text/javascript">
var audioload = random_playlist();
console.log(audioload);
document.getElementById('source_id').src= audioload;
var audioplayer_id = document.getElementById('audioplayer_id')
audioplayer_id.volume = 0.15;
audioplayer_id.load();
audioplayer_id.play();
</script>
Works well for me but can it be optimized or is this OK ?
I just hacked this together from various sources seems like html5 didnt integrate a playlist function in the audio tag, which seems funny to me.
greets

You could shorted the random_playlist function like this:
function random_playlist(){
var PATHS = ['http://path_to.mp3', 'http://path_to.mp3', 'http://path_to.mp3'];
return PATHS[Math.floor(Math.random() * PATHS.length)];
}
or (a better but more complicated version):
var random_playlist = (function(){
var PATHS = ['http://path_to.mp3', 'http://path_to.mp3', 'http://path_to.mp3'];
return function(){
return PATHS[Math.floor(Math.random() * PATHS.length)]
};
}())

Related

How to prevent audio to overlap itself when playing more than one tracks?

I have 3 link blocks and I would like, if a user clicks on two of them, to mute one of the songs.
I am unfortunately a bit novice with jQuery/Javascript, but here is the code I have right, now, which doesn't work:
<script type="text/javascript">
var isPlaying=false
$(document).ready(function(){
$('.play').click(function(){
var audioID = "sound" + $(this).attr('id');
var $this = $(this);
var music = new Audio(audio);
if (!isPlaying) {
// Not playing, let's play
isPlaying = true;
music.play();
} else {
// Stop the music
isPlaying = true;
music.pause();
};
});
});
</script>
<audio loop id="sound1" src="3.mp3"> </audio>
<audio loop id="sound2" src="2.mp3"> </audio>
<audio loop id="sound3" src="3.mp3"> </audio>
I do have another code that plays the three songs assigned to its link blocks, but they overlap.
$('.play').click(function(){
var $this = $(this);
// starting audio
var audioID = "sound" + $(this).attr('id');
$this.toggleClass('active');
if($this.hasClass('active')){
$("#" + audioID).trigger('play');
} else {
$("#" + audioID).trigger('pause');
}
Any help, or pointers in the right direction, are more than appreciated!

Customize MediaElement.js audio player

i am trying to customize the MediaElement.js audio Player. All i need is to play a mp3 file but i need bigger buttons (play,mute).
I tried a lot with the mediaelementplayer.css but nothing work. Don't get it how it works.
Or if anyone have another easy idea for playing mp3 with html. Lot of Player out there was updatet a lot of years ago.
Thanks!
The HTML element <audio> is used to play an audio file on a web page. Add a button and with simple JS you will get the result.
For example:
<script>
var myAudio = document.getElementById("myAudio");
var isPlaying = false;
function togglePlay() {
isPlaying ? myAudio.pause() : myAudio.play();
};
myAudio.onplaying = function() {
isPlaying = true;
};
myAudio.onpause = function() {
isPlaying = false;
};
</script>
<audio id="myAudio" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto">
</audio>
<button onClick="togglePlay()">Click here to hear.</button>

Load a video passed into the URL by name

I am trying to get one of many video files that resides on the server to play on a Web Page using HTML or HTML5. It should run based on whatever filename is passed into the url via an argument. This is the code I have so far, but it does not work.
Example: www.mysite.com?video=myVideo.mp4
So myvideo.mov would reside in the folder on the server. I want the parameter video equal to the video filename.
<!DOCTYPE html>
<html>
<body onLoad="GetVideo()">
<div style="width: 100%; height: 768px; controls Autoplay=autoplay; overflow: hidden;">
<video id="video" width="100%" loop autoplay controls>
<source id="#videoSource" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<script>
function GetVideo() {
x = getUrlVars()["video"];
document.querySelector("#videoSource").setAttribute("src", x);
}
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
</script>
</body>
</html>
Expected results would be:
run this URL sample:
www.mysite.com?video=myvideo.mp4
It should play the video file "myvideo.mp4" that resides in the site folder on the server.
Updated sample - This is more what I want it to do - I took recommendations below, but the following DOES NOT WORK. I am trying to get this to work on all browsers:
Example: www.mysite.com?video=myVideo.mp4&folder=myFolder
<!DOCTYPE html>
<html>
<body>
<div style="width:100%;overflow: hidden;">
<video width="100%" controls>
<source src='about:blank' type="video/mp4">
</video>
</div>
<script>
function loadVideo() {
var player = document.querySelector('video');
var base = 'http://ercx.natfas.com/';
var videoFile = getUrlVars()["video"];
var folder = getUrlVars()["folder"];
if (${folder} = "") {
player.src = '${base}${videoFile}';
} else {
player.src = '${base}${folder}/${videoFile}';
}
player.load();
player.play();
}
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
loadVideo();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body onLoad="GetVideo()">
<div style="width: 100%; height: 768px; controls Autoplay=autoplay; overflow: hidden;">
<video id="video" width="100%" loop autoplay controls>
<source id="videoSource" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<script>
function GetVideo() {
x = getUrlVars()["video"];
document.querySelector("#videoSource").setAttribute("src", x);
}
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
</script>
</body>
</html>
Looks like it's achieving what we want to? =)
---
--- Old
You need to set the source correct on the video element, i.e.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
So in your case:
function GetVideo() {
x = getUrlVars()["video"];
document.querySelector("#videoSource").setAttribute("src", x);
}
Also you're missing a " on the line:
<body onLoad="GetVideo()>
Video File Array
First you need to use MP4, Ogg and/or WebM. Do not use MOV (as mentioned in question). If you got Safari to play a MOV through a <video> tag, it means you have a plugin that facilitates doing so:
Never assume a user has a plugin or assume a user will download and install one if advised to do so.
The majority of the world uses PC not Macs.
Assuming that all videos are in one location (as was stated in question), make an array of their file names:
var files = ['005609.mp4', '005610.mp4', '005612.mp4'];
Next, store your path into a variable:
var base = 'https://storage04.dropshots.com/photos6000/photos/1381926/20170326/';
Declare an index number and reference the <video> tag:
var index = 0;
var player = document.querySelector('video');
Process the array with .map() and interpolate each element in the array with the base (see function loadVideo() in demo).
If you want to play your files one after another, do not use the [loop] attribute (as indicated in HTML of question). Instead register the <video> tag to the ended event and increment the index (see eventListener at the end of demo).
Also a <div> cannot play videos, therefore [controls] and [autoplay] attributes are unnecessary on a <div> (pertaining to the HTML in question).
Demo
This video player will load automatically (as indicated in the HTML of question).
var player = document.querySelector('video');
var base = 'https://storage04.dropshots.com/photos6000/photos/1381926/20170326/';
var files = ['005609.mp4', '005610.mp4', '005612.mp4'];
var index = 0;
function loadVideo(host, array, index) {
var urls = array.map(function(vid, idx) {
return `${host}${vid}`;
});
player.src = urls[index];
player.load();
player.play();
}
player.addEventListener('ended', function(e) {
if (index >= files.length) {
index = 0;
loadVideo(base, files, index);
} else {
loadVideo(base, files, index);
}
index++;
});
loadVideo(base, files, index);
<!DOCTYPE html>
<html>
<body>
<div style="width:480px;overflow: hidden;">
<video width="100%" controls>
<source src='about:blank' type="video/mp4">
</video>
</div>
</body>
</html>
Answer from Tibbelit as the closest to working. It doesn't work on Chrome but it seems to work on other browsers.
<!DOCTYPE html>
<html>
<body onLoad="GetVideo()">
<div style="width: 100%; height: 768px; controls Autoplay=autoplay; overflow: hidden;">
<video id="video" width="100%" loop autoplay controls>
<source id="videoSource" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<script>
function GetVideo() {
x = getUrlVars()["video"];
document.querySelector("#videoSource").setAttribute("src", x);
}
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
</script>
</body>
</html>

Playing mp3 attach href link to audio control

I've created a link to play mp3 from and certain point and end at a certain point
<audio id="sample" src="Hard To Say I'm Sorry.mp3" controls preload></audio>
Play1
<script>
var audio = document.getElementById('sample');
var segmentEnd;
audio.addEventListener('timeupdate', function (){
if (segmentEnd && audio.currentTime >= segmentEnd) {
audio.pause();
}
console.log(audio.currentTime);
}, false);
function playSegment(startTime, endTime){
segmentEnd = endTime;
audio.currentTime = startTime;
audio.play();
}
</script>
</body>
</html>
My question, how do I put the href "Play1" link into the audio control?

Embed camera frame in web app html5

I want to beuild web app that the user will upload a image from device camera.
I know that I can use <input type="file" accept="image/*" capture="camera">.
My question is that if there is a way to "embed" the camera screen in the page itself. In other words, I want that the screen will look like this:
I suggest you can read the article Capturing Audio & Video in HTML5.
Here is the code to access your camera:
<video autoplay></video>
<script>
var errorCallback = function(e) {
console.log('Reeeejected!', e);
};
// Not showing vendor prefixes.
navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
// Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia.
// See crbug.com/110938.
video.onloadedmetadata = function(e) {
// Ready to go. Do some stuff.
};
}, errorCallback);
</script>
Taking screenshots:
<video autoplay></video>
<img src="">
<canvas style="display:none;"></canvas>
<script>
var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var localMediaStream = null;
function snapshot() {
if (localMediaStream) {
ctx.drawImage(video, 0, 0);
// "image/webp" works in Chrome.
// Other browsers will fall back to image/png.
document.querySelector('img').src = canvas.toDataURL('image/webp');
}
}
video.addEventListener('click', snapshot, false);
// Not showing vendor prefixes or code that works cross-browser.
navigator.getUserMedia({video: true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
}, errorCallback);
</script>
Video tag is there HTML5 to handle this. and you need to use getUserMedia api to handle the streaming. most of the modern browsers supports it. To validate whether it is supported, use javascript to check that. You can try this:
if(navigator.getUserMedia()) ....
Here's a good tutorial on how to use a web cam to capture images. The same person also has a tutorial on capturing video to GIFs.
http://davidwalsh.name/browser-camera
HTML 5 Image capture tutorial & demo