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.

Filter by
Sorted by
Tagged with
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 ...
Jun's user avatar
  • 1
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(() => {}) ...
saolu's user avatar
  • 3
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 @...
bluelemonade's user avatar
  • 1,137
-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....
Amirhossein's user avatar
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=&...
dokgu's user avatar
  • 5,276
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 ...
Stan's user avatar
  • 8,683
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....
Miles Acq's user avatar
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/...
Snappawapa's user avatar
  • 1,759
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 ...
FrankG's user avatar
  • 130
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 "...
Florie Anstett's user avatar
-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....
Freelance Films Scotland's user avatar
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 ...
waxworm's user avatar
  • 33
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: ...
strangeQuirks's user avatar
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 ...
Dan's user avatar
  • 2,299
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 =...
katik S's user avatar
  • 41
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 ...
Mehardeep Singh's user avatar
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 ...
redshift's user avatar
  • 4,925
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. ...
Giovanni's user avatar
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 ...
Mysterious Oyster's user avatar
-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 ...
Marjoleinfullstackerstudent's user avatar
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 ...
Erebos's user avatar
  • 13
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 ...
jcommando's user avatar
  • 128
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, /*...
Devendra Karkar's user avatar
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 ...
SeetheMoar's user avatar
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 [...
JaRoMaster's user avatar
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. ...
Matteo21's user avatar
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 ...
TBC's user avatar
  • 1
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); }, [...
김종현's user avatar
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 ...
mayowa_osibodu's user avatar
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 ...
pesinasiller's user avatar
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>&...
Nomore Mudzvova's user avatar
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 ...
user2229946's user avatar
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 ...
user1617735's user avatar
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 ...
Avatar's user avatar
  • 14.8k
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 ...
xenturion 666's user avatar
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%...
Walt Sautter's user avatar
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> ...
jkcunningham's user avatar
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 ...
Md Faiz's user avatar
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 ...
Farooq Hanif's user avatar
  • 1,799
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, ...
Bilal Zahid's user avatar
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 ...
Michel's user avatar
  • 10.7k
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. ...
goleon's user avatar
  • 76
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 ...
Michel's user avatar
  • 10.7k
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 ...
Michel's user avatar
  • 10.7k
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 ...
bittere's user avatar
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 ...
Amardeep Ahlawat's user avatar
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 ...
Zubair Baig's user avatar
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 ...
david0zz's user avatar
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 ...
bezzoon's user avatar
  • 1,823
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 ...
Koen's user avatar
  • 1

1
2 3 4 5
71