JoeGTEC's path: knowledge,technic, how to play audio file from link of dropbox, workaround for play audio in chrome browser of mobile when page loaded

วันเสาร์ที่ 20 พฤษภาคม พ.ศ. 2560

knowledge,technic, how to play audio file from link of dropbox, workaround for play audio in chrome browser of mobile when page loaded

how to play audio file from link of dropbox

1.upload your audio file as 'mp3 or ogg' to dropbox

2.open share on it

3.copy link as

hhttps://www.dropbox.com/s/0m8xqg47gxmf325/Alarm1.mp3?dl=0

*** change dl=0 to dl=1 for play online stream

https://www.dropbox.com/s/0m8xqg47gxmf325/Alarm1.mp3?dl=1

in code html

<!DOCTYPE html>

<head>

</head>

<body>

var audiofile= document.getElementById('sound');

function play(){audiofile.play();}

</script>

</body>

</html>

how to play audio when page loaded in chrome browser of mobile
1.
<script>
var AlarmS=2; //global var
</script>
<body onloadeddata='AlarmS=0;play_s();'>

2.

<span class='chk'><input type='checkbox' class='chk' id='chk_Alsnd' onclick=\"func_AlarmSoundOn();\" disabled>Alarm Sound<button type='button' onclick='var PreA=AlarmS;AlarmS=1;play_s();AlarmS=PreA;'>listen!</button></span>

3.

function func_AlarmSoundOn() {
var x = document.getElementById('chk_Alsnd');
if (x.checked==true){
AlarmS=0;
play_s();
}else{
AlarmS=2;
}

}

4..

function play_s(){
var au= document.getElementById('sound');
switch(AlarmS)
{
case 0:
au.volume=0.0;
au.play();
au.pause;
AlarmS=1;
break;
case 1:
au.volume=1.0;
au.play();
break;
default:
break;
}

}

//--------the following code is example ------------------
// this code not use jquery due to it must run in local wifi (not internet connected)
// and limit of flash memory not more space
//------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
cursor:pointer;
}

li a:hover:not(.active) {
background-color: #111;
}

.active {
background-color: #4CAF50;
}

div.card {
display:inline-block;
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}

.chk {
display:inline-block;
}

div.header {
color: white;
padding: 10px;
font-size: 40px;
}

.button_card {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
width: 100px;
}

</style>

<script>
var AlarmS=2;
function loadDoc(url, cFunction,iid) {
setClassActiveA(iid);
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open('GET', url, true);
xhttp.send();
}
function myFunction(xhttp) {
document.getElementById('area1').innerHTML = xhttp.responseText;
}

function setClassActiveA(iid) {
var myNodelist = document.getElementsByTagName('a');
var i;
for (i = 0; i < myNodelist.length; i++) {
myNodelist[i].setAttribute('class', 'noactive');
}
document.getElementById(iid).setAttribute('class', 'active');
}

function loadDocBtnClick(url, cFunction,myid) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this,myid);
}
};
xhttp.open('GET', url, true);
xhttp.send();
}
function myFunction_btn(xhttp,myid) {
document.getElementById(myid).innerHTML = xhttp.responseText;

}

</script>

</head>

<body onloadeddata='AlarmS=0;play_s();'>

<audio id='sound' src='https://www.dropbox.com/s/0m8xqg47gxmf325/Alarm1.mp3?dl=1'></audio>
<ul>
<li><a class='noactive' id='home' onclick=\"loadDoc('home',myFunction,this.id);\">Home</a></li>
<li><a class='noactive' id='timers' onclick=\"loadDoc('timers',myFunction,this.id);\">Timers</a></li>
<li><a class='noactive' id='setting' onclick=\"loadDoc('webconfig',myFunction,this.id);\">Setting</a></li>
<li><a class='noactive' id='about' onclick=\"loadDoc('about',myFunction,this.id);\">About</a></li>
</ul>
<span class='chk'><input class='chk' type='checkbox' id='chk_autorefresh' onclick=\"func_autorefresh();\" >Auto Refr./Motion State.
<select id='sel_sec' onchange='document.getElementById(\"chk_autorefresh\").checked=false;func_autorefresh();'>
<option value='2000'>2s</option>
<option value='3000'>3s</option>
<option value='5000' selected>5s</option>
<option value='10000'>10s</option>
<option value='15000'>15s</option>
<option value='30000'>30s</option>
<option value='60000'>1m</option>
<option value='300000'>5m</option>
<option value='600000'>10m</option>
</select>(4C)</span><span class='chk'><input type='checkbox' class='chk' id='chk_Alsnd' onclick=\"func_AlarmSoundOn();\" disabled>Alarm Sound<button type='button' onclick='var PreA=AlarmS;AlarmS=1;play_s();AlarmS=PreA;'>listen!</button></span>
<br/><br/>
<div id='area1'>
</div>
<script>
loadDoc('home',myFunction,'home');

var vRefresh;
function func_autorefresh() {
var opt_selsec = document.getElementById('sel_sec').value;
var y = document.getElementById('chk_Alsnd');
var x = document.getElementById('chk_autorefresh');
if (x.checked==true){
vRefresh = setInterval(do_Autorefresh ,opt_selsec);
y.disabled=false;
}else{
y.disabled=true;
clearInterval(vRefresh);
}
}

function func_AlarmSoundOn() {
var x = document.getElementById('chk_Alsnd');
if (x.checked==true){
AlarmS=0;
play_s();
}else{
AlarmS=2;
}
}

function do_Autorefresh() {
loadDocBtnClick('ctrl_dev?control=000',motion_detected,'msg_motion');
}

function motion_detected(xhttp,myid) {
var myJSON=JSON.parse(xhttp.responseText);
document.getElementById('t1').innerHTML =myJSON.t1;
document.getElementById('info_motion').innerHTML =myJSON.info_motion;
document.getElementById('info_relay').innerHTML =myJSON.info_relay;
document.getElementById('info_line').innerHTML =myJSON.info_line;

var x = document.getElementById(myid);
var y = document.getElementById('motion_msg_card');
if(myJSON.msg_motion=='0')
{
x.innerHTML = '...';
x.style.color = 'black';
y.style.backgroundColor = 'white';
}
else
{
x.innerHTML = myJSON.msg_motion.replace(/-/g,\":\");
x.style.color = 'black';
y.style.backgroundColor = 'red';
play_s();
}
}

function play_s(){
var au= document.getElementById('sound');
switch(AlarmS)
{
case 0:
au.volume=0.0;
au.play();
au.pause;
AlarmS=1;
break;
case 1:
au.volume=1.0;
au.play();
break;
default:
break;
}
}

function SaveTimer(mychanel) {
var t1on,t1off,t2on,t2off,mystr;
switch(mychanel)
{
case 1:
{
t1on=document.getElementById('ch1timer1on').value;
t1off=document.getElementById('ch1timer1off').value;
t2on=document.getElementById('ch1timer2on').value;
t2off=document.getElementById('ch1timer2off').value;
t1enable=document.getElementById('ch1timer1enable').checked;
t2enable=document.getElementById('ch1timer2enable').checked;
break;
}
case 2:
{
t1on=document.getElementById('ch2timer1on').value;
t1off=document.getElementById('ch2timer1off').value;
t2on=document.getElementById('ch2timer2on').value;
t2off=document.getElementById('ch2timer2off').value;
t1enable=document.getElementById('ch2timer1enable').checked;
t2enable=document.getElementById('ch2timer2enable').checked;
break;
}
}
mystr='ch=' + mychanel + '&t1on=' + t1on + '&t1off=' + t1off + '&t2on=' + t2on + '&t2off=' + t2off + '&t1enable=' + t1enable + '&t2enable=' + t2enable;

document.getElementById('info').innerHTML = 'processing...';
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById('info').innerHTML = 'processing...OK!';
alert(this.responseText);
}
};
xhttp.open('POST', 'save_timer', true);
xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhttp.send(mystr);
}

</script>

</body>

</html>

JoeGTEC's path

วันเสาร์ที่ 20 พฤษภาคม พ.ศ. 2560

knowledge,technic, how to play audio file from link of dropbox, workaround for play audio in chrome browser of mobile when page loaded

ไม่มีความคิดเห็น:

แสดงความคิดเห็น