I have an object here in a file called audio.js:
const audio = {
controls: true,
source: [
{
src: 'https://testname.com/Track03.mp3',
type: 'audio/mpeg'
},
{
src: 'https://testname.com/Track03.ogg',
type: 'audio/ogg'
}
]
};
I've included the audio.js file, but am completely lost on how to render these two audio players into my website, using a loop probably.
All I've managed to get done so far is this, which is evidently incomplete, and would like to expand on it if possible.
<div id="audio">
<script>
let audioo = document.createElement('audio');
</script>
</div>
Sorry, I'm new to all of this and can't find any reliable information. Any help would be appreciated.
Here is a way you can generate them dynamically by javascript; and you don't need to put this string inside <div id='audio'></div> to work, you can use it any where in your javascript.
const audio = {
controls: true,
source: [
{
src: 'https://testname.com/Track03.mp3',
type: 'audio/mpeg'
},
{
src: 'https://testname.com/Track03.ogg',
type: 'audio/ogg'
}
]
}
const theDiv = document.querySelector("#audio");
audio.source.forEach(as=>{
let newAudioElement = document.createElement('audio');
newAudioElement.src = as.src;
newAudioElement.type = as.type;
newAudioElement.controls = 'controls';
theDiv.appendChild(newAudioElement);
})
Here is a working example:
// replacing some working audio urls
const audio = {
controls: true,
source: [
{
src: 'https://www.w3schools.com/tags/horse.mp3',
type: 'audio/mp3'
},
{
src: 'https://www.w3schools.com/tags/horse.ogg',
type: 'audio/ogg'
}
]
}
const theDiv = document.querySelector("#audio");
audio.source.forEach(as=>{
let newAudioElement = document.createElement('audio');
newAudioElement.src = as.src;
newAudioElement.type = as.type;
newAudioElement.controls = 'controls';
theDiv.appendChild(newAudioElement);
})
<div id="audio"></div>
Related
I am trying to run my game inside telegram in-app browser.
Below are my code so far
bot.action('wheeloffortune', ctx => {
bot.telegram.sendGame(ctx.chat.id, 'wheeloffortune');
})
bot.on("callback_query", function (query) {
let gameurl = "https://dazzling-ritchie-f3ad20.netlify.app/?id="+query.id;
bot.answerCallbackQuery({
callback_query_id: query.id,
url: gameurl
});
});
bot.on("inline_query", function(iq) {
bot.answerInlineQuery(iq.id, [ { type: "game", id: "0", game_short_name: 'wheeloffortune' } ] );
});
What I expect: after clicking the button 'Play wheeloffortune', the game should open in webview.
What is actually happening:
this image keep rendering
any advice is appreciated
According to the game example of telegraf:
You can simply use:
bot.gameQuery((ctx) => {
let queryId = ctx.callbackQuery.id
let gameurl = "https://dazzling-ritchie-f3ad20.netlify.app/?id="+queryId;
ctx.answerGameQuery(gameUrl)
})
How to reproduce the bug?
Install the grapes js in react app
Go to the editor and drag a component. ( Example : text component)
Style the component using the style manager
save it into DB and see the code in the editor
Reload the page
see the code in the editor
What is the expected behavior?
The html tag ids and css for that ids should not be changes or erased even though if reload the editor
What is the current behavior?
If we are reloading the editor after any changes , the ids in the html code change and the css for that ids getting erased off
If is necessary to execute some code in order to reproduce the bug, paste it here below:
const editor = grapesjs.init({
container: "#block",
canvas: {
styles: [
"https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css",
],
scripts: [
"https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js",
"https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js",
],
},
protectedCss: "",
commands: {
defaults: [
{
id: "my-command-id",
run() {
alert("This is my command");
},
},
],
},
plugins: ["gjs-preset-webpage"],
storageManager: {
id: "gjs_",
type: "remote",
autosave: true,
autoload: true,
urlStore: this.API_URL + "update_builder/" + this.state.id,
urlLoad: this.API_URL + this.state.id,
//method: 'patch',
params: {
draft: "1",
},
headers: {},
},
assetManager: {
storageType: "",
storeOnChange: true,
storeAfterUpload: true,
upload: "https://localhost/assets/images", //for temporary storage
assets: [],
uploadName: "file",
uploadFile: function (e) {
var files = e.dataTransfer
? e.dataTransfer.files
: e.target.files;
var formData = new FormData();
for (var i in files) {
formData.append("upload", files[i]); //containing all the selected images from local
}
PageService.contentUpload(formData)
.then((response) => {
console.log(response.data.path);
editor.AssetManager.add(response.data.path);
})
.catch((error) => {
// this.alert.show(error.response.data.message,{type:'error'});
});
},
},
pageManager: {
pages: this.pagesList,
},
layerManager: {
appendTo: ".layers-container",
},
styleManager: {
appendTo: '.style-container'
},
});
const pageManager = editor.Pages;
const pagesList = pageManager.getAll();
this.pages = pagesList;
this.editorData = editor;
editor.store((res) => (this.callBackAlert = true));
editor.on("storage:start:store", (objectToStore) => {
console.log(objectToStore);
});
Banner(editor);
// Resizing the components
editor.on("component:selected", function (args) {
args.set("resizable", true);
});
What i want to load a custom .wsz skin on page-load on my website.
I still don't understand how to do it to make it work.
Here a snippet with my code:
https://codepen.io/cat999/pen/rNOOjJP
js
const webamp = new Webamp({
initialTracks: [{
metaData: {
artist: "DJ Mike Llama",
title: "Llama Whippin' Intro",
},
url: "https://cdn.rawgit.com/captbaritone/webamp/43434d82/mp3/llama-2.91.mp3",
duration: 5.322286,
}],
})
webamp.onMinimize(() => {
const webampEl = document.getElementById('webamp')
webampEl.style.display = 'none'
})
webamp.renderWhenReady(document.getElementById('app')).then(() => {
document.getElementById('close').addEventListener('click', (e) => {
e.stopPropagation()
const webampEl = document.getElementById('webamp')
webampEl.style.display = 'none'
})
document.getElementById('open').addEventListener('click', () => {
const webampEl = document.getElementById('webamp')
webampEl.style.display = 'block'
})
})
Here below the skins I would like to see on my page-load
https://srv-file6.gofile.io/download/KwUySB/Aphex_Twin_-_Windowlicker.wsz
Anyone could help on How I should improve my js code to make It work?
Have you seen the Initialization portion of the docs?
https://github.com/captbaritone/webamp/blob/master/docs/usage.md#initialize-the-javascript
Try constructing Webamp by adding an initialSkin option:
const webamp = new Webamp({
initialTracks: [{
metaData: {
artist: "DJ Mike Llama",
title: "Llama Whippin' Intro",
},
url: "https://cdn.rawgit.com/captbaritone/webamp/43434d82/mp3/llama-2.91.mp3",
duration: 5.322286,
}],
initialSkin: {
url: "https://s3.amazonaws.com/webamp-uploaded-skins/skins/dbaead7a819b238d48ca726abd0617bb.wsz"
},
})
The 1st version does not work, the images do not show. No errors, just nothing displays
const grid_display = ({ url, key }) =>
React.createElement("audio", { id: "woof", src: "https://free-screensavers-backgrounds.com/ringtones/funny/dog-barking.mp3"},
React.createElement("div", { onMouseOver: "playSound('woof')", className: "image-item", key: key },
React.createElement("a", { href: "https://www.google.com"},
React.createElement("img", { className: "grid-img", src: url }))));
This 2nd version does work! The images display as expected.
const grid_display = ({ url, key }) =>
React.createElement("div", {className: "image-item", key: key },
React.createElement("a", { href: "https://www.google.com"},
React.createElement("img", { className: "grid-img", src: url })));
Anyone have a reason why the createElement audio causes the issue?
PS. The end result is displaying images in a grid. I need each image to play a sound when you mouse over them. NOTE: The images/sounds are actually dynamic.
thanks for the help!
It does create, you can check the html code using browser dev tools.You have not added the controls attribute, because of which it is not visible in the html.
const grid_display = ({ url, key }) =>
React.createElement("audio", { id: "woof", controls: "controls", src: "https://free-screensavers-backgrounds.com/ringtones/funny/dog-barking.mp3"},
React.createElement("div", { onMouseOver: "playSound('woof')", className: "image-item", key: key },
React.createElement("a", { href: "https://www.google.com"},
React.createElement("img", { className: "grid-img", src: url }))));
Demo
const audio = document.createElement('audio');
audio.src = "https://free-screensavers-backgrounds.com/ringtones/funny/dog-barking.mp3";
// audio element added but not visible in html
//audio.setAttribute("controls", "controls");
document.body.append(audio);
const showAudio = document.createElement('audio');
showAudio.src = "https://free-screensavers-backgrounds.com/ringtones/funny/dog-barking.mp3";
// Now visible
showAudio.setAttribute("controls", "controls");
document.body.append(showAudio);
I'm calling flowplayer like this:
flowplayer("a.rmPlayer", "libs/flowplayer/flowplayer.swf", {
plugins: {
audio: {
url: 'libs/flowplayer/flowplayer.audio.swf'
},
controls: {
volume: true
}
}
});
I'd now like to have different covers for each mp3 file being called. flowplayer provides the coverimage variable (see http://flash.flowplayer.org/plugins/streaming/audio.html), however can I somehow have the images in a data attribute?
I've ended up using the following code, which seems to work flawlessly.
The link:
<a data-toggle="modal" class="rmPlayer" data-fpurl="http://releases.flowplayer.org/data/fake_empire.mp3" data-fpimg="http://releases.flowplayer.org/data/national.jpg">click me</a>
And the corresponding javascript (with '#rmPlayerInterface' being the modal window)
<script type="text/javascript">
$(document).ready(function() {
player = flowplayer("player", "/libs/flowplayer/flowplayer.swf", {
plugins: {audio: {url: '/libs/flowplayer/flowplayer.audio.swf'},controls: {url: '/libs/flowplayer/flowplayer.controls.swf'}},
clip: {autoplay: false, autoBuffering: true}
});
$(document).on("click", ".rmPlayer", function () {
$('#rmPlayerInterface').data('playeroptions', $(this).data());//.music = music;
$('#rmPlayerInterface').modal('show');//:music});//('music', $(this).data('music'));
});
$('#rmPlayerInterface').on('show', function () {
var poptions = $('#rmPlayerInterface').data('playeroptions');
var c = {url: poptions["fpurl"],coverImage: {url: poptions["fpimg"],scaling: 'orig'}};
player.play(c);
});
$('#rmPlayerInterface').on('hide', function () {
player.pause();
});
});
</script>