I know I can use the following in the body to autoplay the sound on page load if embedded in the body, but I wanna try this dynamically.
What I mean by dynamically is to find the audio file, and play onload using JavaScript, or JQuery.
Can anyone help?
<audio preload="auto" tabindex="0" autoplay="true" loop="true">
<source src="shorttones.mp3" type="audio/mpeg" />
<source src="shorttones.ogg" type="audio/ogg" />
Your browser does not support the audio element.
</audio>
I tried this, not working.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="js/buzz.js" type="text/javascript"></script>
<script type="text/javascript">
if (!buzz.isSupported()) {
alert("Your browser does not support the audio element, ogg, or mp3.");
return;
}
buzz.defaults.formats = [ 'ogg', 'mp3' ];
buzz.defaults.preload = 'metadata';
var mySound = new buzz.sound( "sounds/highpitchsound");
mySound.play();
mySound.loop();
</script>
</head>
</html>
If you mean playing without the autoplay, this would be one approach:
<html><body onload="playSound();">
<audio id="noise"></audio>
</body>
<script>
function playSound(){
var snd=document.getElementById('noise');
canPlayMP3 = (typeof snd.canPlayType === "function" && snd.canPlayType("audio/mpeg") !== "");
snd.src=canPlayMP3?'shorttones.mp3':'shorttones.ogg';
snd.load();
snd.play();
}
</script></html>
You might want to take a look at buzz.js: http://buzz.jaysalvat.com/
if (!buzz.isSupported()) {
alert("Your browser does not support the audio element, ogg, or mp3.");
return;
}
var sound = new buzz.sound( "shorttones", {
formats: [ "ogg", "mp3" ]
});
sound.play();
Related
I am learning svg and would like to compare displaying svg items on different browsers. My code works fine on firefox, chrome, edge, safari etc, but cannot work on ie11. Unfortunately application I develop needs to support ie11 so I need to force my code to work correctly.
Here is fiddle: https://jsbin.com/hemawaboqa/1/edit?html,js,output
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/#svgdotjs/svg.js"></script>
</head>
<body>
<div style="position:absolute;left:0px;top:0px;right:0px;bottom:0px;overflow:hidden;" id="svg-main-container">
<div style="position:absolute;left:0px;top:0px;bottom:0px;right:300px;border:1px solid #dadada;overflow:auto;" id="svg-canvas"></div>
</div>
</body>
</html>
JS
var draw = SVG().addTo('#svg-canvas').size(400, 400)
var rect = draw.rect(100, 100)
Why that code is not working on ie11?
I have created a sample using the SVG.js 3.0 version with your code, it will show the "Object doesn't support property or method 'from'" in IE11 browser, perhaps the issue is related to the svg.js version, and it is a plugin issue, you could feedback this issue to SVG.js forum.
Besides, I suggest you could refer to the following code, to use the old version of SVG.js:
<!DOCTYPE html>
<html lang=en-us>
<head>
<meta charset=utf-8>
<title>TEST</title>
</head>
<body>
<div style="position:absolute;left:0px;top:0px;right:0px;bottom:0px;overflow:hidden;" id="svg-main-container">
<div style="position:absolute;left:0px;top:0px;bottom:0px;right:300px;border:1px solid #dadada;overflow:auto;" id="drawing">
</div>
</div>
<script src=https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.6/svg.min.js></script>
<script>
(function () {
'use strict';
// Add title as first child of SVG element:
var createTitle = function (svgObject, text) {
var fragment = document.createDocumentFragment();
var titleElement = document.createElement('TITLE');
fragment.appendChild(titleElement);
titleElement.innerHTML = text;
svgObject.node.insertAdjacentElement('afterbegin', titleElement);
};
SVG.extend(SVG.Doc, {
namespace: function () {
return this
.attr({xmlns: 'http://www.w3.org/2000/svg', version: '1.1'})
.attr('xmlns:xlink', SVG.xlink, SVG.xmlns);
}
});
var draw = new SVG('drawing').size(300, 300);
var rect = draw.rect(100, 100).attr({fill: '#f06'});
// Add title to SVG element
createTitle(draw, 'Rectangle');
}());
</script>
</body>
</html>
The result as below:
The library you are using has ECMA 6 elements that are not understood in IE.
If you need your project to work in IE, you will have to use another library or find out how to change it so it allows for older browsers (as suggested here: https://svgjs.dev/docs/3.0/compatibility/)
I am creating an add-on which would ask the user to select music from a list and it would play it as background music. But previous posts show a sidebar with the user manually pressing the play button. I am wondering if there is a way to play it with Google Apps Script only. Also what would be helpful is if there was a volume property to set the volume?
My Code:
function onOpen(){
DocumentApp.getUi()
.createMenu("Background Music Add-On")
.addItem("Select Music","music")
.addItem("Set Volume","musicVol")
.addToUi();
}
//music selection
function music(){
var musicName = DocumentApp.getUi()
.prompt("Please select one of the music names:\n\nElevator Music,\nLeaf Rag.\nso on...")
switch(musicName){
case "Elevator":
//code to play music Elevator
break;
//So On
}
}
Playing music from a Playlist stored on your Google Drive
This script allows you to store mp3's on your Google Drive. It allows you to select which files you wish to listen too via a playlist. You must start the playlist the first time manually but then the rest of the selections play automatically. The script converts the mp3 files into dataURI's and loads them into the audio element. You can skip over the current selection and you can restart the playlist when it completes.
Code.gs
function onOpen() {
SpreadsheetApp.getUi().createMenu('My Music')
.addItem('Launch Music', 'launchMusicDialog')
.addItem('Create New Music List', 'createMusicList')
.addToUi();
}
function convMediaToDataUri(filename){
var filename=filename || "default.mp3";
var folder=DriveApp.getFolderById("Music Folder Id");
var files=folder.getFilesByName(filename);
var n=0;
while(files.hasNext()) {
var file=files.next();
n++;
}
if(n==1) {
var blob=file.getBlob();
var b64DataUri='data:' + blob.getContentType() + ';base64,' + Utilities.base64Encode(blob.getBytes());
Logger.log(b64DataUri)
var fObj={filename:file.getName(),uri:b64DataUri}
return fObj;
}
throw("Multiple Files with same name.");
return null;
}
function launchMusicDialog() {
var userInterface=HtmlService.createHtmlOutputFromFile('music1');
SpreadsheetApp.getUi().showModelessDialog(userInterface, 'Music');
}
function createMusicList() {
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName("MusicList");
var folder=DriveApp.getFolderById("Music Folder Id");
var files=folder.getFiles();
var mA=[['Item','File Name','File Type','File Id','Play List']];
sh.clearContents()
var n=1;
while(files.hasNext()) {
var file=files.next();
mA.push([n++,file.getName(),file.getMimeType(),file.getId(),'']);
}
sh.getRange(1,1,mA.length,mA[0].length).setValues(mA);
sh.getRange(2,2,sh.getLastRow()-1,sh.getLastColumn()-1).sort({column:2,ascending:true});
sh.getRange(2,5,sh.getLastRow()-1,1).insertCheckboxes();
}
function getPlaylist() {
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName('MusicList');
var rg=sh.getRange(2,1,sh.getLastRow()-1,sh.getLastColumn());
var vA=rg.getValues();
var pl=[];
for(var i=0;i<vA.length;i++) {
if(vA[i][4]) {
pl.push(vA[i][1]);
}
}
return pl;
}
music1.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
label{margin:2px 10px;}
</style>
</head>
<script>
var selectionList=[];
var gVolume=0.2;
var index=0;
$(function(){
document.getElementById('msg').innerHTML="Loading Playlist";
google.script.run
.withSuccessHandler(function(pl){
selectionList=pl;
console.log(pl);
google.script.run
.withSuccessHandler(function(fObj){
$('#audio1').attr('src',fObj.uri);
var audio=document.getElementById("audio1");
audio.volume=gVolume;
audio.onended=function() {
document.getElementById('status').innerHTML='Ended...';
playnext();
}
var msg=document.getElementById('msg');
msg.innerHTML="Click play to begin playlist. Additional selections will begin automatically";
audio.onplay=function() {
document.getElementById('msg').innerHTML='Playing: ' + selectionList[index-1];
document.getElementById('status').innerHTML='Playing...';
document.getElementById('skipbtn').disabled=false;
}
audio.onvolumechange=function(){
gVolume=audio.volume;
}
})
.convMediaToDataUri(selectionList[index++]);
})
.getPlaylist();
});
function playnext() {
if(index<selectionList.length) {
document.getElementById('status').innerHTML='Loading...';
document.getElementById('msg').innerHTML='Next Selection: ' + selectionList[index];
google.script.run
.withSuccessHandler(function(fObj){
$('#audio1').attr('src',fObj.uri);
var audio=document.getElementById('audio1');
audio.volume=gVolume;
audio.play();
})
.convMediaToDataUri(selectionList[index++]);
}else{
document.getElementById('status').innerHTML='Playlist Complete';
document.getElementById('msg').innerHTML='';
document.getElementById('cntrls').innerHTML='<input type="button" value="Replay Playlist" onClick="replayPlaylist()" />';
}
}
function replayPlaylist() {
index=0;
document.getElementById('cntrls').innerHTML='';
playnext();
}
function skip() {
var audio=document.getElementById('audio1');
document.getElementById('skipbtn').disabled=true;
audio.pause();
index++;
playnext();
}
</script>
<body>
<div id="msg"></div>
<audio controls id="audio1" src=""></audio><br />
<div id="status"></div>
<div><input type="button" id="skipbtn" value="Skip" onClick="skip()" disabled /></div>
<div id="cntrls"></div>
</body>
</html>
Please read through the code. You need to add a music folder id and a couple of default.mp3's. The createMusicList() function reads your Music Folder and Loads them into a sheet named 'MusicList' with columns of "Item", "File Name", "File Type" ,"File Id", and PlayList. The last column is just a column of unchecked checkboxes for you to make your current playlist selection. Only one playlist for now, so you can enjoy building your own.
Here's what the dialog looks like:
And here's an image of my MusicList Sheet:
This is where you make your playlist selections.
Audio Properties and Methods
Apps Script Documentation
Latest Script Code
I used the answer to this question as a starting point: playing sound with google script
You would need to open a html sidebar and use an audio tag, to do this you can use the HtmlService class [1].
As a total background you can't, the sidebar must be always open to play the music. But you could still play the audio while editing the document.
To add the audio setting you can add the controls attribute to the audio tag [2]. For playing the audio automatically you can add the autoplay attibute [3].
Here is the code I implemented to achieve your goal. The code gets the selected value and uses it to change the autoplay value to true and to display the audio as well. Also, when the select element is on focus, it gets the previous selected value so later (when a new value is selected) it can be used to stop the previous audio selection and not display it anymore. For these purposes I used the onchange [4] and the onfocus [5] events.
Code.gs
var SIDEBAR_TITLE = 'Sidebar Musicbox';
function onOpen(e) {
DocumentApp.getUi()
.createMenu('Custom Menu')
.addItem('Show sidebar', 'showSidebar')
.addToUi();
}
function showSidebar() {
var ui = HtmlService.createHtmlOutputFromFile('Sidebar')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setTitle(SIDEBAR_TITLE);
DocumentApp.getUi().showSidebar(ui);
}
Sidebar.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div class="sidebar branding-below">
<p>
A little music for your enjoyment!
</p>
<form>
<select id="music" onchange="playSelection();" onfocus="setOldValue(this.value);">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</form>
<br>
<audio id="player0" controls style="display:none">
<source src="[WEB-URL-FOR-MP3-FILE]" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio id="player1" controls style="display:none">
<source src="[WEB-URL-FOR-MP3-FILE]" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio id="player2" controls style="display:none">
<source src="[WEB-URL-FOR-MP3-FILE]" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<br>
<div id="sidebar-status"></div>
</div>
<div class="sidebar bottom">
<span class="gray branding-text">Docs Add-on Sound Demo</span>
</div>
</body>
<script>
var previousValue;
//Function called when select onFocus
function setOldValue(e) {
previousValue = e;
}
//Function called when selected value change
function playSelection() {
//Get the value for the selected option
var selectedValue = document.getElementById("music").value;
//Latest and previous selection IDs
var player = "player" + selectedValue;
var previousPlayer = "player" + previousValue;
//Stop and don't display the previous selection of audio
document.getElementById(previousPlayer).style.display = "none";
document.getElementById(previousPlayer).autoplay = false;
document.getElementById(previousPlayer).load();
//Play and display the new selection and put the focus on it
document.getElementById(player).style.display = "block";
document.getElementById(player).autoplay = true;
document.getElementById(player).load();
document.getElementById(player).focus();
}
</script>
</html>
[1] https://developers.google.com/apps-script/guides/html/
[2] https://www.w3schools.com/tags/att_audio_controls.asp
[3] https://www.w3schools.com/tags/att_audio_autoplay.asp
[4] https://www.w3schools.com/jsref/event_onchange.asp
[5] https://www.w3schools.com/jsref/event_onfocus.asp
I am trying to create a web app using recently launched flutter_web, but facing issues in playing a video inside my app. Can someone guide me how to play a video in flutter_web.
I tried to create a web plugin for flutter web, but as the official docs of flutter_web we can't create a plugin for web.
I tried to add a video and iframe tag in index.html but no luck.
I tried to use VideoElement provided by dart:html but not sure how to use it.
prefix1.VideoElement element = prefix1.VideoElement();
element.height = 200;
element.width = 200;
element.appendHtml("""<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
""");
element.querySelector('#video');
element.play();
You can now just use the official video_player_web plugin by adding it to your pubspec.yaml:
video_player: ^0.10.4+1
video_player_web: ^0.1.0
Then you can follow the video player cookbook or use the chewie plugin to get a nice UI.
I have managed to play the video automatically and play with the sound.
I need to be able to interact with the video, such as pause, stop or play.
I hope it helps you, greetings.
DART
import 'package:flutter_web_ui/ui.dart' as ui;
import 'dart:html';
main() async {
await ui.webOnlyInitializePlatform();
VideoElement videoElement;
videoElement = querySelector('#video');
videoElement.src = "https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005609.mp4";
videoElement.muted = false;
await videoElement.play();
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script defer src="reproductor.dart.js" type="application/javascript"></script>
</head>
<body>
<video id="video" class="absolute right-0 bottom-0 min-w-full min-h-full w-auto" controls autoplay muted></video>
</body>
</html>
I was struggling with the same issue until I ran the html_platform_view example from the flutter web repo.
Try this:
void main() {
ui.platformViewRegistry.registerViewFactory(
'hello-world-html',
(int viewId) => IFrameElement()..src = 'https://www.youtube.com/embed/tgbNymZ7vqY'
);
runApp(Directionality(
textDirection: TextDirection.ltr,
child: HtmlView(viewType: 'hello-world-html'),
));
}
On my Web page I put translate widget when i resize browsers widged does not change size
I tried change css but i can change only css for Iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script type="text/javascript"
src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head>
<body>
<div id="google_translate_element"></div>
</body>
</html>
do you heve any solution?
Google Translate popup Layout - responsive fixed
<div id="google_translate_element" style="text-align: center;"></div>
<style>
.goog-te-banner-frame.skiptranslate {
display: none !important;
}
body {
top: 0px !important;
}
.goog-te-menu-frame {
max-width:100% !important;
}
.goog-te-menu2 {
max-width: 100% !important;
overflow-x: scroll !important;
box-sizing:border-box !important;
height:auto !important;
}
</style>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
autoDisplay: false,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
function changeGoogleStyles() {
if($('.goog-te-menu-frame').contents().find('.goog-te-menu2').length) {
$('.goog-te-menu-frame').contents().find('.goog-te-menu2').css({
'max-width':'100%',
'overflow-x':'auto',
'box-sizing':'border-box',
'height':'auto'
});
} else {
setTimeout(changeGoogleStyles, 50);
}
}
changeGoogleStyles();
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Not the solution to resizing issue but maybe helpful. You can change the default layout in the init function of the google translate selector.
Change in the line
layout: google.translate.TranslateElement.InlineLayout.SIMPLE to layout: google.translate.TranslateElement.InlineLayout.VERTICAL or layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL.
These options will show the language choices in a vertical dropdown with also either the 'Made possible by Google Translate' label under or next to it.
You will not be able to adjust the layout of this widget using strictly CSS. The <a> elements containing links for all of the languages to choose from are laid out in <td> cells in rows. Therefore, they will not be laid out dynamically with resizing.
You can however, get around this by getting all the language links in the contained <iframe> and appending them to a <div> outside the <table>.
This should perform what you seek though may still require much CSS tweaking. Much of Google's UI elements are laid out manually with pixel dimensions and overridden attributes like overflow:hidden to avoid default (sometimes inconsistent) browser behavior. This solution may require a fair bit of [poking around the DOM][1] to determine where these adjustments are being done.
This should be executed in the top-most frame to access the <iframe> element and make changes to its CSS. Note that the selector is not a unique ID so it may return a different <iframe> than expected depending on the contents of your page.
var iframe = document.querySelector('.goog-te-menu-frame.skiptranslate');
if (iframe === null) {
console.error('Could not find iframe of language links');
} else {
// Force <iframe> visibility and auto-resizing
iframe.style.display = '';
iframe.style.height = '';
iframe.style.width = '99%!important';
This should be executed in the about:blank frame of the <iframe> to have access to the elements within.
// Get all the <a> elements
var anchors = document.querySelectorAll('a.goog-te-menu2-item');
anchors = Array.prototype.slice.call(language_anchors);
if (anchors.length < 1) {
console.error('Found no language links');
}
// Get the conatiner <div> that holds the table of links
var div = document.getElementById(':1.menuBody');
if (div === null) {
console.error('Could not find div containing table of language links');
} else {
// Remove width/height attributes to have <div> resize
div.style.height = '';
div.style.width = '';
// Iterate through all language links
anchors.forEach(function (a) {
// Set display to inline=block so its rendered like text
// This is what gets the elements onto a new line if they don't fit
a.style.display = 'inline-block';
// Append them directly to the <div>
div.appendChild(a);
});
// Remove the now empty <table> to keep things clean
div.removeChild(div.querySelector('table'));
}
This may break easily if Google changes their CSS class names or element IDs. Keep that in mind and happy rendering.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
}, 'google_translate_element');
}
</script>
<script type="text/javascript"
src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head>
<body>
<div id="google_translate_element"></div>
</body>
</html>
YOU NEED TO CHANGE THE "SIMPLE" TO "HORIZONTAL"
You can put this in your css file for the theme that you're using. Tweak it to make it work for you. Hope that helps!
select.goog-te-combo{width:100%!important;}
I created a web application where it needs to popup images and videos from Fancy boxes called rippolls. Here my "Rippolls" are load in popup boxes and users can vote for those rippolls.
My question is, in one page I listed all rippolls and when I click on a rippoll with an image or video it is loaded withour fancy box and fancy box css.
I have referenced
<script src="../../Content/Scripts/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<link href="../../Content/Styles/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
in a _layout.cshtml where is referenced to the _RippollList.chtml page.
Code in the _RippollList.chtml is :
$("a.btnVotePop#(poll.Id)").fancybox({
'onComplete' : function() {
alert('hello');
try {
FB.XFBML.parse();
twttr.widgets.load();
history.pushState({}, "#poll.Name.Trim()", "/polls/#poll.Id");
document.getElementsByTagName("title")[0].innerHTML = "#poll.Name.Trim()";
//history.replaceState({}, "title", "#poll.Name.Trim()");
//$("#rippoll_image_path").attr("content", $("#polltitle").val());
}
catch (ex) {
alert('Error parsing response.');
}
},
'onClosed' : function(){
alert("closed");
try {
history.pushState({}, "Rippoll", "/home/mypage");
document.getElementsByTagName("title")[0].innerHTML = "My Page";
$('#divDetailCont').css('display', 'none');
}
catch (ex) {
}
},
ajax : {
type : "GET"
},
'width': '560px'
});
Html :
<div id="videoDeftImgContainer" class="videoDefultImg">
<a class="btnVotePop#(poll.Id)" href="RippollCardPopup/#(poll.Id)">
<img class="inImgSize" src="#poll.ImagePath" />
</a>
<div id="plyBtnClk" class="playBtn" onclick="">
<a class="btnVotePop#(poll.Id)" href="RippollCardPopup/#(poll.Id)">
<img src="../../Content/images/newImages/hoverPlay.png" />
</a></div></div>
script references:
<script src="../../Content/Scripts/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<link href="../../Content/Styles/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
but still I m getting a page without fancybox and its styles.
I am in a doubt of because I am putting some text values to rippoll( ex: rippoll name, rippoll question etc..) and it may having some special characters(#%$#{}) also, and is it the reason for not open rippolls in the fancy box.
Help me out for this. please post if any code segments where you successed.