Questions tagged [html5-audio]
The audio element is used to embed sound content in an HTML or XHTML document. The audio element was added as part of HTML5.
3,548
questions
0
votes
0
answers
15
views
React Component (audio player) working in Firefox browsers but not in Chrome browsers
I have an audio player component in a NextJs project with MaterialUI. Part of it is a MUI Slider component used to represent the progress of the audio playback. As the audio plays, the timeProgress ...
0
votes
0
answers
30
views
Error when playing notification sound without user interaction on modern browsers
In my reactjs app I am playing an audio when receiving a websocket message:
const playSound = () => {
if (audioRef.current) {
audioRef.current
.play()
.then(() => {})
...
0
votes
0
answers
15
views
delayed startet audio file throws error on iOS html app
I play lottie files and mp3 files within a pwa app. sometimes the audio files start with a delay an I trigger the audi with a timeout.
<audio ref="audioPlayer4" crossorigin playsinline @...
-3
votes
0
answers
27
views
Javascript audio [closed]
Can someone tell me why the audio gets downloaded insted of geting played
const musicdocument.querySelector('audio');
const prevBtndocument.getElementById('prev');
const playBtn = document....
0
votes
0
answers
24
views
Unable to play m4a on Windows
I have an audio file recorded from the iPhone's Voice Memos app (.m4a, compressed). I'm trying to get it to play on any device using the audio tag.
<audio ...>
<source src={file.href} type=&...
0
votes
0
answers
20
views
HTMLAudioElement exclusively intercepts all keyboard events - how to override?
I have a very simple media player web-page with audio tag. It's necessary to provide a user with keyboard shortcuts, which would work consistently throughout the page, irrespective to what element is ...
0
votes
0
answers
39
views
Audio skipping in Chrome
I'm building a website for a musician and they have provided a series of audio files to be included on their website.
I'm using this component for an audio player, but I'm finding that the audio skips....
0
votes
0
answers
30
views
JS event when an audio/video decoding error occurs
I have a system that can keep track of many kinds of files.
For certain types (audio/video in this question's case), I want to be able to show them to the user. However, not all systems/browsers/...
0
votes
0
answers
28
views
Can appscript in Google Sheets invoke methods in an HTML5 Audio object?
I have a sheet for a cover band that lists song titles, keys, links to YT videos, and beats-per-minute (BPM) in various columns. Ideally, I'd like to play a metronomic beat when a user clicks on a ...
0
votes
1
answer
17
views
html audio tag not displaying in chrome but visible in elements in console and working in firefox, why?
I have this react component :
import translate from "@kpt/ui/providers/i18n/translateService";
import { Box, Typography } from "@mui/material";
import { IContentProps } from "...
-2
votes
0
answers
46
views
Using event listener for all buttons and inputs to play UI audio
Wondering if this is possible.
I have various inputs and buttons that I'd like to add sounds to.
So in my code, I have the below:
// Declaring the audio MP3s
const UISoundInput = document....
0
votes
0
answers
21
views
Is there a way to autoplay and loop an audio file on all pages of a site if I use frames?
I want to make an audio file play looped while the user browses my site. I've already used frames to put a navigation pane on the left. I've tried to use but it does not play.
Here is a link to my ...
1
vote
1
answer
47
views
React using audio element and ensure duration shows
In have this audio tag defined like this:
<audio controls={true} src={src} preload='metadata' />
Where src is some url to an audio link.
Before playing the audio, the player looks like this:
...
0
votes
0
answers
64
views
DOMException: play() failed because the user didn't interact after tab goes out of focus
I'm building a website that has various recurring timers. When a timer goes off it plays a short audio notification.
Initially, everything works well. However, after the user minimizes the window and ...
0
votes
1
answer
94
views
MediaRecorder is not supported in Safari Browser
[Log] Webcam permission error
Error: MediaRecorder is not supported
I am trying to record audio. Audio recording is working fine in Chrome Browser. But throwing an error in Safari.
global.audioStream =...
0
votes
0
answers
37
views
HTML5 audio won't play on other devices, or any device without the audio already predownloaded on it it
I am creating an audio file for a school project using HTML5, but when I try to play the audio file on another device/site, it doesn't play. I realized that it wasn't playing because it can't find the ...
0
votes
0
answers
58
views
NuxtJS and $fetch: How to fetch and play audio when first chunk is ready?
I have a Nuxt server route that returns streamable audio from a third party API. I am using $fetch on the client side to send a POST request to that Nuxt server route and return a readablestream.
How ...
0
votes
0
answers
40
views
Weird gap between <div> element and its <video> child [duplicate]
I´ve wrote a small HTML and CSS program to dinamically resize <video> and <audio> elements while changing viewport size. So I used flexbox and avoided fixed width and height lenghts. ...
2
votes
1
answer
52
views
javascript Audio on Chrome not working right
I'm making a webpage that plays a random sound every time you load the webpage, and having problems with the Audio element in JS. I can't get my browser to play sound and I don't know what to do. It ...
-1
votes
1
answer
29
views
Logo, images and mp3 are not loading in my github website (made with visual studio code)
For my full-stack program, I need to make three html pages and upload them in Github and make it an online website. Everything is working, except for the logo, images and audio which is a mp3 file.
I ...
1
vote
1
answer
52
views
Looping music with .play() .pause() button in HTML5-Canvas
I'm trying to loop music embedded in HTML5-Canvas with an onClick event listener but cannot find a method to make it loop. Audio is functional but only for a single loop. This is only meant to be ...
1
vote
0
answers
64
views
Cannot set the current time of the audio element using Laravel
I've read up and used quite a number of solutions including 'canplay' or oncanplay. But everytime i try to drag the slider in the progress bar and set the current time, the current time will always be ...
0
votes
0
answers
38
views
How can we concat two audios into one single audio?
I have two audio URLs(mp3). I want to concat these two audio into one single audio and use it in an HTML audio tag.
I have tried using window.AudioContext || window.webkitAudioContext Web API.
Here,
/*...
2
votes
1
answer
57
views
Is there a way to cache audio element requests without Service Workers?
I have a userscript where I'd like to cache audio files from audio elements. fetch() isn't viable here as I have to wait for it to fetch to get a blob out of it. Is there a way to use the audio ...
1
vote
1
answer
69
views
React use hook inside eventListener
I have created the following hook to play audio in react:
"use client";
import { useEffect, useState } from "react";
export const
useAudio = (url: string) => {
const [...
0
votes
0
answers
19
views
Troubleshooting Circular Audio Player Compatibility on iPhone: Code Analysis
I created this circular audio player, and I've included the code below. It functions perfectly as intended for my website. However, I've observed compatibility issues when accessing it from an iPhone. ...
0
votes
0
answers
42
views
problem with a circular audio player in wordpress
I made this circular audio player of which I enclose the code below, it works perfectly and it's what I wanted to make for my site, but I noticed that from iphone there are compatibility problems and ...
1
vote
0
answers
93
views
There is no sound when playing HTML5 AUDIO in IOS17
export function AudioPlaying(audioUrl: string): ReactElement {
const audioRef = useRef<HTMLAudioElement>();
useEffect(() => {
audioRef.current = new Audio(audioUrl);
}, [...
0
votes
1
answer
44
views
Audio does not play in Safari, when added to THREE.AudioListener object in function different from where it was created
I'm currently working on a Three.JS project that involves adding new audio to a THREE.AudioListener object and playing it, after a mouse click. I realized that this new audio only plays on Safari when ...
1
vote
0
answers
22
views
is it possible to set the preservesPitch property for the <audio> tag in HTML?
I know you can set it in javascript
const audio = document.querySelector("audio");
audio.preservesPitch = false;
but is it possible to set it directly in HTML? something like:
<audio
...
1
vote
1
answer
77
views
How do i stream an audio from a database and play on a phone when i retrieve the link using fetch api?
I currently have the following in my html
<audio id="result-audio"></audio>
<button onclick = "playBack()"><i class="fas fa-volume-up"></i>&...
2
votes
0
answers
59
views
Problem with Firefox and multiple <audio> and <video> elements on one page
I feel that now I've researched and unsuccessfully tried enough that I can ask you all a question.
Objective
As a non-pro developer with somewhat robust coding experience I'm building a website to be ...
0
votes
0
answers
59
views
how to intercept audio from web page using javascript?
What I'm trying to do is to simultaneously record a video from html5 canvas, which I managed to do, along with all the sounds being played on that page. Just to make it clear, I'm not trying to record ...
0
votes
0
answers
30
views
How to change the dropdown position of the HTML5 audio player when CSS zoom is applied?
This issue happens in Chrome, Brave and even Internet Explorer/Edge:
When clicking the three dots to open the dropdown, the dropdown is far away from the audio player:
With Webdeveloper I cannot ...
0
votes
0
answers
31
views
howler pause() not stop the audio from looping
I've created a state function in my application that is supposed to notify me when a certain status, let's call it "danger," is reached. Once in the "danger" status, I want to loop ...
0
votes
0
answers
44
views
my game sound will work on computer but not on ipad or iphone
I have written a game which requires sounds to be produced when an answer is given via drag & drop. The wave files are (both on my host server)
var sound1 = ec_alert5.wav') and
var sound2 = fart%...
0
votes
1
answer
38
views
Is there a way to trigger an event when an audio or video control reaches a specified stopping point? [duplicate]
I have an HTML audio element implemented like this:
<audio id="urlMedia" controls="controls" autoplay="autoplay" src="/ma/some.flac#t=0,30"></audio>
...
0
votes
3
answers
56
views
How to pause the audio and play the clicked audio
I am creating a music player, I can play the audio when an album is clicked but when another album is clicked both songs play simultaneously, I need to pause the previous song and play the new song. I ...
1
vote
0
answers
231
views
How to detect when user is speaking into microphone and when not, using HTML5 and Javascript?
I am working on a web application where I need to present user with the list of available microphones so that they can choose their preferred one and test that (like how google meet allows testing of ...
0
votes
0
answers
50
views
How to record audio and then store the record audio file in database in laravel project
audio file is recording and also download but not store in databse.
I am trying multiple ways to store audio file but nothing is succeeded.
Once you've recorded the audio and obtained a Blob object, ...
0
votes
0
answers
22
views
Facing web browser differences when playing audio
I am working on a small web app written using Next.JS.
The app works but still exhibits some issues. The user can record his own voice and then play it back once or more. And then make a new voice ...
0
votes
0
answers
31
views
How to achieve dynamic dash based on line length on Animated setLineDash on Canvas
I am trying to make a Audiovisualizer with Canvas. The goal is to have a dynamic wave that is dashed.
The wave looks good when using bezierCurveTo for the wave and setLineDash for the dashed effect.
...
2
votes
0
answers
413
views
Audio playback with NextJS
I am fighting to make a web app written using Next.JS work.
At this stage the app allows the user to record his own voice and then play it back.
And then make a new voice recording and play it back ...
0
votes
0
answers
27
views
Web Audio Player-Recorder in React
I just followed this tutorial https://blog.logrocket.com/building-audio-player-react/ to create a Web Audio Player in React.
I wonder how I could add a recording functionality, so that the user could ...
0
votes
0
answers
289
views
Play audio from a ReadableStream
A request to a server returns an audio file streamed back as a ReadableStream.
The server might sometimes be slow, and this is why streaming is preferred over sending the whole file at once.
How would ...
2
votes
1
answer
64
views
Reverse Audio in JavaScript/Angular
I want to implement an audio player's rewind functionality so than I hear the audio playing in fast rewind while I'm holding the rewind button down.
I have an AudioBuffer and I am reversing it, but ...
0
votes
0
answers
25
views
HTML Audio player is not working in latest IOS web browser
I have implemented the HTML tag in my webapp and attached the s3 aws mp3 url but its not working in iphone, working fine in android phone and windows browser.
I am uploading the audio by voice ...
0
votes
1
answer
46
views
Audio/Media resource requests pending forever
I have an issue while playing my audio elements. When I spam click on them (and not only then) after some time the requests start pending forever and all requests after them as well. My audio elements ...
0
votes
0
answers
19
views
Microphone input not processed until after a reload occurs (create-react-app)
So the following code doesn't appear to work until there's a runtime error or sometimes after CRA does an auto reload. I'm not sure why.
So it works... Sometimes. And I don't know why it just doesn't ...
0
votes
0
answers
32
views
multiple audio players on one page
I've made 2 audio players on 1 page and that doesn't seem to work well...
For some reason the second audio player doesn't work but instead it seems to control the first player...
The code is similar ...