Comments (23)
Hello @NeoCoderMatrix86,
That's a very nice application !
I was able to import + play a opus file without any issues. See attached opus file which I used.
Brad Fiedel - Terminator Main Theme (Terminator OST).zip
from howler.blazor.
@NeoCoderMatrix86
If you want to use a faster download service, take a look at : https://github.com/StefH/Blazor.DownloadFileFast
And if you are also interested in reading .mkv
/ .webm
files, take a look here: https://github.com/StefH/Matroska
from howler.blazor.
Thanks for the fast reply :). I'm currently investigating the bug and found some information:
The bug only occurs, when I record an audio file via "Record mode". Like you used some standard opus file, the application works fine. Maybe it is related to getting length of length of the recorded blob?!
I use the following code:
Record (javascript):
function setupAudioRecording() {
navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => { handleAudioRecording(stream) }).catch(function (err) { handleAudioRecordingData = false; });
}
function handleAudioRecording(stream) {
rec = new MediaRecorder(stream);
rec.ondataavailable = e => {
audioChunks.push(e.data);
}
rec.onstop = () => {
let blob = new Blob(audioChunks, { 'type': 'audio/ogg; codecs=opus' });
var url = URL.createObjectURL(blob);
if (GLOBAL.ViewModeRecord !== null) {
GLOBAL.ViewModeRecord.invokeMethodAsync("AudioRecordingFinished", url);
}
}
}
function startAudioRecording() {
if (handleAudioRecordingData == true) {
audioChunks = [];
rec.start();
}
}
function stopAudioRecording() {
if (handleAudioRecordingData == true) {
rec.stop();
}
}
ViewModeRecord:
await JSRuntime.InvokeVoidAsync("startAudioRecording");
[JSInvokable()]
public void AudioRecordingFinished(String url)
{
//TODO: Customizable via options
Cuesheet.AudioFile = new AudioFile("Recording.ogg", url, "audio/ogg", true);
}
AudioPlayer:
private async Task OnPlayClicked()
{
if (soundId != null)
{
await Howl.Pause(soundId);
}
else
{
if ((Cuesheet == null) || (Cuesheet.AudioFile == null) || (Cuesheet.AudioFile.PlaybackPossible == false))
{
throw new ArgumentNullException(nameof(Cuesheet.AudioFile));
}
var options = new HowlOptions
{
Sources = new[] { Cuesheet.AudioFile.ObjectURL },
Formats = new[] { Cuesheet.AudioFile.AudioFileType.ToLower() },
Html5 = true
};
soundId = await Howl.Play(options);
}
}
from howler.blazor.
Sorry, I cannot really help you here.
One thing which I noticed is that ".ogg" is normally using "Ogg / Vorbis"
The demo file is an "Ogg - Opus" file.
from howler.blazor.
Is it possible to Debug into the exception, to get to know, what is causing the problem? I'm currently stuck here, because I'm not so deep into sound processing with howler framework. Maybe an update of howler could go good?
from howler.blazor.
Ok, I managed to debug the problem and this seems to be a Bug in your wrapper for me:
- Recorded audio files have at default no duration on edge. Firefox handles it a bit different, but the problem comes with duration.
- Inside your "JsInteropHowl.js" you call:
onplay: async function (id) {
const duration = Math.round(howl.duration()); <-----duration is Infinite
await dotnetReference.invokeMethodAsync('OnPlayCallback', id, duration);
},
- I don't know, how you handle infinite duration inside the "OnPlayCallback", but the error comes from there. So maybe a fix for no valid duration should be done?!
from howler.blazor.
Did you try upgrading howler.js to a newer version?
from howler.blazor.
I updated howler.js to version 2.2.1, but that doesn't fix the problem. I'm still investigating the problem, seems to be a known bug of chrome/edge, that the stream has no duration.
from howler.blazor.
Can you attach your audio file which has this problem?
Then I can investigate / debug this on my system.
(And maybe searching / crossposting an issue to the howler.js github?)
from howler.blazor.
Well I think its not a problem of howler, since the playback starts even with the exception above. I think its more a conversion in .NET in this wrapper here, that makes the exception.
I attached the file and renamed it for uploading.
from howler.blazor.
Playing this test file in my WASM example (play local OGG at https://stefh.github.io/Howler.Blazor) works fine on Edge. However, I did change the integer to double and passed the play-id to the 'duration' function, maybe that helps?
Please test version 0.9.4
from howler.blazor.
With the new Version 0.9.4 I get this exception:
Uncaught (in promise) Error: System.Text.Json.JsonException: The JSON value could not be converted to System.Double. Path: $ | LineNumber: 0 | BytePositionInLine: 4.
---> System.InvalidOperationException: Cannot get the value of a token type 'Null' as a number.
at System.Text.Json.Utf8JsonReader.TryGetDouble(Double& value)
at System.Text.Json.Utf8JsonReader.GetDouble()
at System.Text.Json.Serialization.Converters.DoubleConverter.Read(Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options)
at System.Text.Json.Serialization.JsonConverter1[[System.Double, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].TryRead(Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options, ReadStack& state, Double& value) at System.Text.Json.Serialization.JsonConverter
1[[System.Double, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].ReadCore(Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
--- End of inner exception stack trace ---
at System.Text.Json.ThrowHelper.ReThrowWithPath(ReadStack& state, Utf8JsonReader& reader, Exception ex)
at System.Text.Json.Serialization.JsonConverter1[[System.Double, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].ReadCore(Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state) at System.Text.Json.Serialization.JsonConverter
1[[System.Double, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].ReadCoreAsObject(Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
at System.Text.Json.JsonSerializer.ReadCore[Object](JsonConverter jsonConverter, Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
at System.Text.Json.JsonSerializer.ReadValueCore[Object](JsonSerializerOptions options, Utf8JsonReader& reader, ReadStack& state)
at System.Text.Json.JsonSerializer.Deserialize(Utf8JsonReader& reader, Type returnType, JsonSerializerOptions options)
at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.ParseArguments(JSRuntime jsRuntime, String methodIdentifier, String arguments, Type[] parameterTypes)
at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.InvokeSynchronously(JSRuntime jsRuntime, DotNetInvocationInfo& callInfo, IDotNetObjectReference objectReference, String argsJson)
at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.BeginInvokeDotNet(JSRuntime jsRuntime, DotNetInvocationInfo invocationInfo, String argsJson)
at Object.endInvokeDotNetFromJS (https://localhost:44359/_framework/blazor.webassembly.js:1:4191)
at Object.invokeJSFromDotNet (https://localhost:44359/_framework/blazor.webassembly.js:1:3797)
at Object.w [as invokeJSFromDotNet] (https://localhost:44359/_framework/blazor.webassembly.js:1:64287)
at _mono_wasm_invoke_js_blazor (https://localhost:44359/_framework/dotnet.5.0.2.js:1:190800)
at do_icall (:wasm-function[10596]:0x194e58)
at do_icall_wrapper (:wasm-function[3305]:0x79df9)
at interp_exec_method (:wasm-function[2155]:0x44ad3)
at interp_runtime_invoke (:wasm-function[7862]:0x12efff)
at mono_jit_runtime_invoke (:wasm-function[7347]:0x118e5f)
at do_runtime_invoke (:wasm-function[3304]:0x79d42)
I'm quite not shure, why it works in your samples but not in my code. Did you reencode the audio file? Because it has an duration of 5 seconds on your test site? Which version of .NET do you use?
from howler.blazor.
My example application is
<PropertyGroup>
<TargetFramework>netstandard2.1</TargetFramework>
<RazorLangVersion>3.0</RazorLangVersion>
...
</PropertyGroup>
And you use .NET 5.0
I see.
Maybe there's a difference?
from howler.blazor.
Ok, can you run a test on .NET 5.0? I can currently not switch to .netstandard since other libraries are not working than.
from howler.blazor.
I created the same example application with NET 5
https://github.com/StefH/Howler.Blazor/tree/duration-net5/examples/Howler.Blazor-WASM-AudioPlayer-NET5
And in Edge, it still works fine using your recording.ogg
from howler.blazor.
I just checked, how you implemented your example and what I do in my application. To get the total time, you use the code
Howl.OnPlay += e =>
{
ErrorMessage = string.Empty;
State = "Playing";
TotalTime = e.TotalTime;
StateHasChanged();
};
While I use an update timer:
audioUpdateTimer = new Timer(500);
audioUpdateTimer.AutoReset = true;
audioUpdateTimer.Elapsed += async delegate
{
AudioIsPlaying = await Howl.IsPlaying();
if (AudioIsPlaying == true)
{
CurrentPlaybackPosition = await Howl.GetCurrentTime();
if (TotalTime == null)
{
TotalTime = Howl.TotalTime;
}
}
StateHasChanged();
};
So I think, in this case we have a problem of the function Howl.TotalTime
. Maybe this is the Bug. Could you investigate, if you can call it inside the OnPlay Event?
from howler.blazor.
I just tried, getting TotalTime in the OnPlay Event. My application also crashes when I use the example code. I'm currently a bit stuck, it must have to do with the duration.
from howler.blazor.
The only thing what you can try is copy that "JsInteropHowl.js" file from this project into your project, use it in the html
and change this code:
getTotalTime: function () {
if (howl) {
const duration = howl.duration();
return Math.round(duration || 0);
}
return 0;
}
to
getTotalTime: function () {
if (howl) {
const duration = howl.duration();
if (duration === Infinity) {
return 0;
}
return Math.round(duration || 0);
}
return 0;
}
and the same for
onplay: async function (id) {
const duration = Math.round(howl.duration(id));
await dotnetReference.invokeMethodAsync('OnPlayCallback', id, duration);
},
from howler.blazor.
Ok, good idea. I made the changes you suggested and debugged the javascript.
The code crashes as before here:
onplay: async function (id) {
const duration = Math.round(howl.duration(id)); <--------duration is Infinite
await dotnetReference.invokeMethodAsync('OnPlayCallback', id, duration); <-------crash comes here
},
What happens inside OnPlayCallback?
from howler.blazor.
I don't know why the duration is Infinite in your case.
The workaround what you can try is:
onplay: async function (id) {
const duration = howl.duration(id);
if (duration === Infinity) {
await dotnetReference.invokeMethodAsync('OnPlayCallback', id, 0);
}
else {
await dotnetReference.invokeMethodAsync('OnPlayCallback', id, Math.round(duration));
}
},
This make sure to post 0
to .NET callback.
from howler.blazor.
Ok, this fixes the bug. You should include the javascript code in your release. The duration is infinite because it is a recording saved in a blob. Edge and Chrome doesn't automatically calculate the length and attach it, since Firefox does it. After one play of the recording, the length is calculated and the duration is no more infinite.
from howler.blazor.
In that case, I will also change the C# code.
I'll change the duration from double
to int?
so that this seems more logical.
You can expect a new NuGet later today.
from howler.blazor.
from howler.blazor.
Related Issues (10)
- Unable to play Mp3 file from azure blob storage HOT 5
- Howl.GetTotalTime not only when playback HOT 1
- Support volume property HOT 2
- Howl.Seek() does not work as expected HOT 3
- Is there a way to make it work with Data URI? HOT 3
- How can I play local media?
- Change playback rate HOT 2
- Please add record if possible HOT 1
- Need Recording HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from howler.blazor.