Hi,
I’m implementing a chatbox using Vaadin 14, which is capable of recording and presenting audio messages.
The recording part works fine, but when the recorded audio gets stored in server storage and would be loaded to UI using a custom Audio component, it comes totally disabled in iOS Safari.
I have used StreamResource
to set the src
attribute of the Audio tag (the URL would be generated dynamically by Vaadin itself) and the code looks like the following.
Let me emphasize that, the feature works properly on all devices and browsers except iOS Safari.
CODE :: Loading the Audio file as StreamResource
>>
StreamResource audioResource = new StreamResource("resourceId", () -> {
try
{
return new FileInputStream(new File("path_to_audio_file"));
}
catch(final FileNotFoundException e)
{
e.printStackTrace();
return null;
}
});
AudioPlayer audioPlayer = new AudioPlayer(/*Element ID*/"audioelement", /*src attribute*/audioResource, /*autoplay*/false, /*controls*/true);
add(audioPlayer);
CODE :: AudioPlayer element >>
import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.server.StreamResource;
@Tag("audio")
public class AudioPlayer extends Component {
private StreamResource src;
private String elementId;
private boolean autoPlay;
private boolean controls;
public AudioPlayer(String elementId, StreamResource src, boolean autoPlay, boolean controls) {
super();
setSrc(src);
setElementId(elementId);
setAutoPlay(autoPlay);
setControls(controls);
}
public StreamResource getSrc() {
return src;
}
public void setSrc(StreamResource src) {
this.src = src;
getElement().setAttribute("src", src);
}
public String getElementId() {
return elementId;
}
public void setElementId(String elementId) {
this.elementId = elementId;
setId(elementId);
}
public boolean isAutoPlay() {
return autoPlay;
}
public void setAutoPlay(boolean autoPlay) {
this.autoPlay = autoPlay;
if (autoPlay)
getElement().setAttribute("autoplay", "");
else
getElement().removeAttribute("autoPlay");
}
public boolean isControls() {
return controls;
}
public void setControls(boolean controls) {
this.controls = controls;
if (controls)
getElement().setAttribute("controls", "");
else
getElement().removeAttribute("controls");
}
}