Vue Component Audio не играет на iPhone или Safari Browser ⇐ IOS

[Anonymous]

У меня есть этот шаблон VUE, встроенный в мою HTML -форму < /p>





Your browser does not support the audio element.




v-if="play"
v-bind:d="play_btn"/>







export default {
mounted() {
console.log('audio component mounted')
},
name: "AudioComponent",

data() {
return {
pause_btn: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M6.25 5C5.56 5 5 5.56 5 6.25v3.5a1.25 1.25 0 1 0 2.5 0v-3.5C7.5 5.56 6.94 5 6.25 5m3.5 0c-.69 0-1.25.56-1.25 1.25v3.5a1.25 1.25 0 1 0 2.5 0v-3.5C11 5.56 10.44 5 9.75 5",
play_btn: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814z",
play: true,
}
},

methods: {

play_or_pause() {
this.play = !this.play
var player = document.getElementById('player');
if (!this.play) {
player.play();
} else {
player.pause();
}

}
}
}



#musicBtn
{
border-radius: 50%;
width: 75px;
height: 75px;
}


< /code>
Теперь этот компонент Vue отлично работает для всех браузеров, за исключением iPhone, который я попробовал с несколькими разными iPhone и кнопкой для воспроизведения звуковой тег вообще не работает, на Andriod, Windows работает нормально, проведя какое -то исследование, кажется, что с помощью Apple Design не позволяет воспроизводить аудио или видео без какого -либо клика пользователя или взаимодействия, так что с моим кодом ничего не так; Но есть ли работа, чтобы это было для того, чтобы заставить звук воспроизводить на iPhone, я даже попробовал непосредственно вставить звуковые теги, но все же тег отображается, я нажимаю на Play No Sound, но на любом другом устройстве он работает просто отлично, любая помощь будет оценена.


Подробнее здесь: https://stackoverflow.com/questions/795 ... ri-browser