Audio Player in NativeScript-Vue - vue.js

I have an mp3 playlist and I want to play these audio tracks in an audio player in NativeScript-Vue. However, there is no plugin for it.
However, there is a NativeScript plugin nativescript-audio which can be used for playing audio.
In the following Playground example, you will notice that it has been adopted to play in a NativeScript-Vue application.
https://play.nativescript.org/?template=play-vue&id=83Hs3D&v=19
This can work, however, the problem is that the player is mounted in the mounted() hook, and even the mp3 file path is supplied there. However, for me, the mp3 file is loaded asynchronously, added to a Vuex store, and then available as computed property in the component.
How can I adopt this code to take the mp3 file from a computed property rather than hard-coded in mounted()?
Here is the documentation for this plugin - https://github.com/bradmartin/nativescript-audio

I was able to find a solution.
Watch your computed property. Let's say it's called media.
On change, update the audio track using the following code:
const playerOptions = {
audioFile: this.media,
loop: false,
autoplay: false
}
this._player
.playFromUrl(playerOptions)
.then(function(res) {
console.log(res);
})
.catch(function(err) {
console.log('something went wrong..', err);
});

Related

Set grid layout in video call UI (web SDK)

I want to achieve grid layout in my video call application which I am building with Agora's web SDK.
I was browsing the docs , but I couldn't get an help on how to achieve grid layout in video conferencing.
The best fit and grid layouts are only available in cloud recording APIs.
Any previous reference or github repo where it is implemented would also work.
Thanks for the help!
The Agora Web SDK provides a library for video streaming, it does not enforce a UI. Building the UI is your task. That being said, Agora makes its very easy to add video chat to your application.
In your case you can build a grid layout using CSS grid or any framework of your choosing. To connect Agora to your Grid layout you would use the stream-published event to create a new grid element, and subscribe to the new stream. Once the subscribe() promise resolves, use the video track's .play() method to play the video on a specific DOM element
client.on("user-published", async (user, mediaType) => {
// Initiate the subscription
await client.subscribe(user, mediaType);
// If the subscribed track is an audio track
if (mediaType === "audio") {
const audioTrack = user.audioTrack;
// Play the audio
audioTrack.play();
} else {
const videoTrack = user.videoTrack;
// Play the video the given DOM_ELEMENT
videoTrack.play(DOM_ELEMENT);
}
});

TokBox/Vonage allowing audio capture support when screensharing

Screen Capture API, specifically getDisplayMedia(), currently supports screensharing and sharing the audio playing in your device (e.g: youtube) at the same time. Docs. Is this currently supported using TokBox/Vonage Video API? Has someone been able to achieve this?
I guess there could be some workaround using getDisplayMedia and passing the audio source when publishing, e.g: OT.initPublisher({ audioSource: newDisplayMediaAudioTrack }), but doesn't seem like a clean solution.
Thanks,
Manik here from the Vonage Client SDK team.
Although this feature does not exist in the Video Client SDK just yet, you can accomplish the sharing of audio with screen by creating a publisher like so:
let publisher;
try {
const stream = await navigator.mediaDevices.getDisplayMedia({video: true, audio: true });
const audioTrack = stream.getAudioTracks()[0];
const videoTrack = stream.getVideoTracks()[0];
publisher = OT.initPublisher({audioSource: audioTrack, videoSource: videoTrack});
} catch (e) {
// handle error
}
If you share a tab, but the tab doesn't play audio (static pdf or ppt) then the screen flickers. To avoid this, specify frameRate constraint for the video stream. see - https://gist.github.com/rktalusani/ca854ca8621c20488bea6e62ad04e341

GSM SIM800C text to speech audio stream

I have this USB-to-GSM Serial-GPRS-SIM800C module and I have successfully been able to send AT commands to it and do stuffs, but what I really wanted was Text to speech capabilities, I was able to generate an AMR audio file, upload it unto the module's internal memory and play it whenever some one calls.
But the message heard by caller's is going to be dynamic and TTS will run realtime, so the uploading process of the audio file into the module will cause undesirable delay, is there any way I could stream some audio through the module?
Thanks.
Here's what I have had to do.
Start call (ATDxxxxxxxxxxx;)
Set mode (AT+DTAM=2)
Start recording (AT+CREC=1,1,0)
Speak what I want to playback into microphone
5.Stop recording (AT+CREC=2)
Hang up (ATH)
Now I can playback what I recorded using the following
Start call (ATDxxxxxxxxxxx;)
Set mode (AT+DTAM=2)
Start playback (AT+CREC=4,1,0,80)
Hang up (ATH)
No idea how to do this dynamically or even upload an *.amr file.
Would be grateful if you could share what commands you used to see if there's any way to improve.
To answer #anothersanj
I'm using serialport-gsm to make things easier.
This is how I go about it:
modem.executeCommand('AT+FSMKDIR=C:\\status\\',(result) => { log.debug(result); });
//reading the audio file from your computer with nodejs fs module
fs.readFile('tts2.amr', function(err, amr_data) {
if(!err) {
let fsize= fs.statSync('tts2.amr').size;
log.debug(fsize);
//creating the file on the GSM module's memory
modem.executeCommand('AT+FSCREATE=C:\\stats\\tts2.amr',(result) => { log.debug(result); });
//writing the file on the GSM module's memory
modem.executeCommand('AT+FSWRITE=C:\\stats\\tts2.amr,0,'+fsize+',100',(result) => {
modem.port.write(amr_data);
});
//Display file list on specified path (like ls command)
modem.executeCommand('AT+FSLS=C:\\stats',(result) => { log.debug(result); });
}
});
And for playing the file whenever someone calls you do:
//playing the file on incoming call
modem.on('onNewIncomingCall', (result) => {
log.debug(result);
modem.executeCommand('ATA',(result) => { log.debug(result); });
modem.executeCommand('AT+CMEDPLAY=1,\"C:\\stats\\tts2.amr\",0,100',(result) => { log.debug(result); });
modem.executeCommand('AT+DDET=1',(result) => { log.debug(result); });
});

Nuxt JS LocalStorage in Universal mode not working

I'm working on a Nuxt JS application which utilises LocalStorage. When compiling in SPA mode it functions correctly, however I need to switch my project to universal mode to get my SEO meta titles and descriptions to work when generating my project, after switching I get an error on a few pages which utilise LocalStorage:
localStorage is not defined
Has anyone got any suggestions to fix this?
You don't have localStorage because there is no such thing in Node.js environment. You also don't have window and document objects.
https://ssr.vuejs.org/guide/universal.html#access-to-platform-specific-apis
Nuxt.js uses Vue SSR under the hood.
However, you still have a store (Vuex). And it will be synchronized between node and browser.
I needed data to persist between sessions for GDPR. You can use the mounted life cycle event and wait for window.localStorage to be available. Then assign it to a data property and add a v-if in a wrapper tag so the page doesn't start rendering before localeStorage is available. I'm doing this with a static nuxt build:
<div v-if="localStorageReady">
Awesome stuff here...
</div>
data() {
return {
localStorageReady: false,
}
},
mounted() {
if (window.localStorage) {
this.localStorageReady = true
}
}

Load AJAX in Framework7, vue

I'm very new to Framework7, and want to build a fairly simple mobile app -- a list of places, detail pages of those places (where some murals are displayed), and a map and about page. My current plan is to publish it via PhoneGap Build, since that seems like a fast and easy way to deploy.
I created my app using the phonegap-framework7-vue template. Perhaps overkill for such a simple app, but seems better than building it from scratch.
I want to load a list of places via AJAX (eventually via sqlite), and can't figure out how/when to do this, and how to access the main app. My Murals.vue file has the template and the following script, but doesn't load because app.request is undefined. I've tried "framework7", "Framework7", and moving it outside of the mounted() call, but feel like I'm just guessing. Any suggested? Thanks!
<script>
import F7List from "framework7-vue/src/components/list";
let dataURL = 'https://jsonplaceholder.typicode.com/posts'; // returns some json
export default {
name: 'Murals',
components: {F7List},
mounted() { // when the Vue app is booted up, this is run automatically.
app.request.get(dataURL, function (data) {
console.log(data);
});
},
data () {
return {
title: 'Murals'
};
}
};
</script>
You're code is almost right !
To access to F7 app instance with vue, you have to use this.$f7.request rather the app.request