Not working on iOS

Hello,

I can’t make working the Audio player on iPhone. I have two problems:

1. the audio is not played after clicking on the Play icon AND the timer display “aN:aN” instead of the duration
2. the icons of the player are not displayed

For the 1): Here is a screen of the bug on iPhone 11 Pro iOS 13: So you can see that there is the icons but the duration is wrong. Also here is the error when I click on the play button:

[Vime warn]: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

For the 2): Here is a screen on iPhone 7 iOS 12: As you can see there is no icons and of course the audio is not working.

Here is the code of the player:

import {
	VimePlayer, VimeUi, VimeAudio, VimeIcon, VimeControl, VimeCurrentTime, VimeEndTime, VimeScrubberControl, VimeIcons, VimeControls, VimePlaybackControl,
} from '@vime/react';
import {
	FunctionComponent, useRef, useState,
} from 'react';
import styled from 'styled-components';

import PlayerStore from '../data/PlayerStore';

const StyledPlayer = styled.div`
	position: fixed;
	bottom: 0px;
	width: 100%;
	z-index: 10;
	background: white;

	& > :first-child {
		@media (min-width: 768px) {
			width: 50%;
			margin-right: auto;
			margin-left: auto;
		}
	}
`;

const StyledProgressTime = styled(VimeControls)`
	margin: 0px;
	--vm-slider-value-color: ${(props) => props.theme.red};
	--vm-controls-padding: 0px;
`;
const StyledTimeControl = styled(VimeControls)`
	justify-content: space-between !important;
	height: 22px;
	margin: 0px;
	padding: 0px 15px;

	--vm-time-font-size: 14px;
	--vm-time-color: #000;
	font-family: Lato;
	`;

const StyledCurrentTime = styled(VimeCurrentTime)`
	--vm-time-color: ${(props) => props.theme.red};
`;

const StyledButtonsControl = styled(VimeControls)`
	margin: 0px;
	justify-content: unset !important;
	--vm-controls-padding: 0px 0px 0px 20px;
	flex-wrap: nowrap;
`;

const StyledAudioTitleContainer = styled.div`
	display: flex;
	flex-grow: 2;
`;

const StyledightButtonContainer = styled.div`
	display: flex;
	flex-grow: 1;
`;

const StyledPlayButton = styled(VimePlaybackControl)`
	margin-right: 10px;
`;

const StyledAudioTitle = styled.p`
	padding-left: 10px;
	font-size: 14px;

	@media (max-width: 768px) {
		font-size: 3.5vw;
	}
`;

export const Player: FunctionComponent = () => {
	const currentAudio = PlayerStore.useState((s) => s.currentAudio);
	const currentKey = PlayerStore.useState((s) => s.key);

	const player = useRef<HTMLVimePlayerElement>(null);
	const [currentTime, setCurrentTime] = useState(0);

	const refresh = () => {
		setCurrentTime(0);
	};

	const onTimeUpdate = (event: CustomEvent<number>) => {
		setCurrentTime(event.detail);
	};

	if (!currentAudio) {
		return null;
	}

	return (
		<StyledPlayer>
			<VimePlayer ref={player} key={currentKey} autoplay={false} debug={true} theme="light" currentTime={currentTime} onVCurrentTimeChange={onTimeUpdate}>
				<VimeAudio mediaTitle={currentAudio.title}>
					<source data-src={currentAudio.url} type="audio/mp3" />
				</VimeAudio>

				<VimeUi>
					<StyledProgressTime fullWidth>
						<VimeScrubberControl />
					</StyledProgressTime>
					<StyledTimeControl fullWidth>
						<StyledCurrentTime />
						<VimeEndTime />
					</StyledTimeControl>
					<VimeIcons href="/play.svg" />
					<StyledButtonsControl fullWidth>
						<StyledightButtonContainer>
							<VimeControl label={'Refresh'} onClick={refresh}>
								<VimeIcon href="#vime-refresh" />
							</VimeControl>
						</StyledightButtonContainer>
						<StyledAudioTitleContainer>
							<StyledAudioTitle>{currentAudio.title}</StyledAudioTitle>
						</StyledAudioTitleContainer>
						<StyledightButtonContainer>
							<StyledPlayButton />
							 <VimeControl label={'Forward'}>
								<VimeIcon href="#vime-seek-forward" />
							</VimeControl>
						</StyledightButtonContainer>
					</StyledButtonsControl>
				</VimeUi>
			</VimePlayer>
		</StyledPlayer>
	);
};

As you can see I disabled the autoplay, online people are saying that it’s not working on iOS so I disabled it for the test.

Everything is working well on my laptop with Google Chrome for example and on my Android phone. It’s only on iOS that I have problems. (I tried also with Google Chrome on the iPhone but it’s not working, same problem).

How did you manage to make the player works on iOS ?

Thank you.

[excid3]

I think I’m having th esame issue on Safari 14 on macOS.

Clicking Play switches the icon then immediately goes back. If I seek, I get the same error:

Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
2attemptToPlay — 77.3d2b735b.js:286

Gif of the issue: https://a.cl.ly/WnurnLZ9

[excid3]

Works perfect in Safari 14 on macOS, thanks @mihar-22! You’re a champ. 💪