//PLaying Sound
async function playSound() {
console.log('Loading Sound');
const { sound} = await Audio.Sound.createAsync(route.params.url,
);
setSound(sound);
setsound1(false)
sound.setOnPlaybackStatusUpdate(playback_staus_update)
console.log('Playing Sound');
sound.setPositionAsync(1500)
sound.playAsync()
setsound1(false)
//Playback Status Upadte
var y=0
async function playback_staus_update(){
if(sound!=undefined){
var x=await sound.getStatusAsync()
console.log(x)
if(x.isPlaying){
y++
setcurrentaudposition(x.positionMillis)
}else{
console.log('Audio Stopped!');
if(y>1){
setsound1(true)
}
}
}
}
//Playback Status Upadte
when playSound() is called instead of audio getting played from 1500 ms it starts to play from 0 millisecond
enter image description here
In start the position is set to 1500 but when the audio starts playing it starts from 0.
Trying to set position of an audio to specific duration using
"await sound.setPositionAsync()" but instead it play from 0 millisecond.
Related
For our application, we're using Web Speech API to play TTS and howler.js to play music exercises. It seems like whenever TTS is active, howler volume gets reduced and gradually increases as time goes on (live demo: https://www.besteartraining.com/learn/1/3/5/course) (Note: test on mobile chrome with headphones). Any help will be greatly appreciated.
//Howler.js initialization
sound = new Howl({
src: [`/assets/audio/${getSoundData().name}.mp3`],
volume: 1.0,
onload() {
const lengthOfNote = getSoundData().length;
let timeIndex = 0;
for (let i = 24; i <= 96; i++) {
sound["_sprite"][i] = [timeIndex, lengthOfNote];
timeIndex += lengthOfNote;
}
setHasInited(true);
},
onloaderror(e: any, msg: any) {
console.log("Error", e, msg);
setHasInited(true);
},
});
//Web Speech API initialization
const speech = new SpeechSynthesisUtterance();
speech.lang = "en-US";
speech.volume = 0.35;
speech.rate = 1;
speech.pitch = 1;
speech.text = "C major" //This is just an example.
speech.onend = function () {
playMidiArray(chordMidiArray); //chordMidiArray = [36, 40, 43] = ["C1", "E1", "G1"]
};
function playMidiArray(midis: any) {
midis.forEach((noteMidiNumber: any) => {
sound.play(noteMidiNumber.toString());
});
}
window.speechSynthesis.speak(speech);
Expected result:
Says the name "C major"(volume:0.35) => plays music exercises (volume:1.0)
Actual result:
Says the name "C major"(volume:0.35) => plays music exercises (volume:0.35 -> 1.0)
List of things that I have tried:
set speech.volume to 1 when TTS is finished playing
set sound.volume to 1 before and after sound.play()
remove speechSynthesis instance (window.speechSynthesis.cancel()) before sound.play() is called
I am using mediarecorder in a vue.js app. The code snippet is below. The inline function for ondataavailable executes. However, neither of the two options to specify a function handler for onstop get invoked.
Is there a workaround to this issue?
const options = { mimeType: "audio/webm" };
mediaRecorder = new MediaRecorder(stream, options);
mediaRecorder.ondataavailable = function (e) {
console.log("in dataAvailable", e.data.size);
if (e.data.size > 0) recordedChunks.push(e.data);
};
mediaRecorder.onstop = this.stopRecordingEvent;
mediaRecorder.addEventListener("stop", this.stopRecordingEvent);
Using an inline function for the stop event like dataavailable works, however that gives error in the highlighted line:
mediaRecorder.onstop = function () {
console.log("recording stopped event");
// save the recording bytes in an array
const blob = new Blob(recordedChunks);
const audioURL = URL.createObjectURL(blob);
var recording = {
blob: blob,
url: audioURL,
id: arrRecordings.length + 1,
};
console.log(recording.id, recording.url);
//this line gives an error
this.recordings.push(recording);
console.log(arrRecordings);
recordedChunks.length = 0;
};
event ondataavailable works after mediaRecorder stop() function
I'm trying to test if an Html video is currently playing, but can't seem to figure out how to get the currentTime. I've been trying things like:
async videoIsPlaying(indexOfVideo = 0) {
return ClientFunction(() => {
const video = document.getElementsByTagName('video')[indexOfVideo];
return video.currentTime > 0;
});
}
but my expect:
await t.expect(await playerPage.videoIsPlaying()).eql(true);
is returning:
AssertionError: expected [Function: __$$clientFunction$$] to deeply equal true
What am I doing wrong? Also, I'm using .eql() because .ok() returns truthy for any result.
Ahhh... just needed to fire the function, and also pass in the index thusly...
async videoIsPlaying(indexOfVideo = 0) {
return await ClientFunction((indexOfVideo) => {
const video = document.getElementsByTagName('video')[indexOfVideo];
return video.currentTime > 0;
})(indexOfVideo);
}
Just FYI, this function lives in a page object
I've been struggling with the Vimeo API for a few days now.
I want to get the video duration and show a countdown when it's playing, and pause it when the video is paused in HTML.
Does anyone know how to do this or point me in the right direction?
Thanks,
Aron
I developed a countdown to play at ad videos before the main video in my website. I believe the code below may help you, you should adapt it to your needs.
$(document).on('ready',function(){
/* PLAY AD VIDEO */
var $video = $('#ad_video),
player = new Vimeo.Player($video);
player.play();
/* COUNTDOWN */
var interval = null;
player.getDuration().then(function(duration) {
var duration_val = duration;
$("#countdown").attr("data-countdown", duration);
$("#countdown").html('Video starts in ' + (duration));
interval = setInterval(function(){
player.getCurrentTime().then(function(seconds) {
var seconds = Math.floor(seconds);
var countdown_val = $("#countdown").attr("data-countdown");
if(seconds == (duration_val - countdown_val - 1))
{
$("#countdown").html('Video starts in ' + (duration_val - seconds));
$("#countdown").attr("data-countdown", duration_val - seconds);
}
if(countdown_val == 1)
{
clearInterval(interval);
}
});
});
}, 1000);
/* PLAY MAIN VIDEO */
$(function(){
var $video = $('#ad_video),
player = new Vimeo.Player($video);
player.on('ended', play_main_video);
});
function play_main_video() {
$("#countdown").hide();
$("#text_countdown").hide();
$('#ad_video).hide();
$('#main_video).show();
var $video = $('#main_video),
player = new Vimeo.Player($video);
player.play();
};
});
This is driving me nuts!
video.addEventListener 'ended', (e) =>
e.target.currentTime = 0
console.log e.target.currentTime
# 5.33 seconds NOT 0
The video plays, and the ended event is called, but the currentTime is not changed.
This may be able to help you:
video = document.getElementById('video');
begin_play = 50;
play_video_frist = true; //if you want to run only frist time
video.addEventListener("play", capture, false);
function capture(event)
{
if (event.type == "play") {
if (play_video_frist) {
play_video_frist = false;
video.currentTime = begin_play;
}
}
}