We Keep Coding

Audio element play promise rejection even while audio context is in running state

I am attaching a screenshot for reference to get more elaborated idea about the problem am facing.. Kind of hell.
I am well aware about autoplay policy and have gone through possible approches which involves user interaction. Also, am not a fond of displaying any screen or button to user to make him click, never, i do not want that.
I am developing a wordpress plugin and having microphone feature which can attach to textbpx on any wordpress website, user clicks on it (user interaction) comes in.
I have also read that i need to resume suspended audio context, which am doing and as you can see in screenshot the state of audio context "running" before and after audio elements play mathod.
I am using audio element created using Audio() constructor.
Note: screenshot is a photo of mac system, I am debugging iphone xr using usb cable.
Can somebody help me out or enlighten me on what am doing wrong or there is any technical limitation.

Sigh! after a week lasted hell finally I managed to make things works.
To give an overview of solution let me first describe high level rough idea of work flow which has problem on iOS Sfari.
Problematic workflow
clickHandler --> AudioContext creation --> Playing audio using audio element.
All the audios followed by this workflow miserably failed in 'play' promise.
Solution which worked for me
clickHandler --> Play audio using audio element -> AudioContext creation --> Playing audio using audio element.
The point of interest in a solution which worked for me is you have to play audio using audio element as first line of code in 'clickHandler'. No doubt the promise still fails but subsequent audios does play.
Also, I was creating new audio element for each new audio source to be played, Which was wrong as auto-play policy imposed on 'per-element' basis. So instead of creating new audio element for each source I just create it once on page load (or whatever suits for you as one time creation) and whenever I want to play different audio file I just change the '.src' property/attribute.
So this is how It worked for me. I must mention throughout the week lasted hell, previously answered questions here and their problem specific solutions have been guiding light which gave me new perspective in a hunt for solution. Also the articles on internet, webkit , chrome, apple's documentation on Auto play policy helped a lot.

Video autoloading

I'm running a projet of video galery. My problem is I want to the use the YouTube system so that when I click on a video in the list of the galery it appears in the main space and start playing (exactly what happens in YouTube). How can I do this please ?
Thanks

firstly, get the youtube api and a fetch method to get the videos,
now loop through the data returned and present it in the manner you want it. write a play method that will open a selected video on a play canvas, this is how I think you can implement what you want in bare design thinking. I dont know what technologies you're using, in my free time I'll write an example implementation in vue.js or react.js

Can the visual options available to player plugin be set using the javascript sdk?

A Deezer player widget of the kind which can be created over at http://developers.deezer.com/musicplugins/player has a couple of visual style / layout options, such as theme (dark / light) and text highlight colour, but it cannot be controlled via Javascript. Using the Deezer JS SDK to create a player enables me to control it, but there don't seem to be any of the visual options (except for format, but that doesn't do in my case). Are these options just missing from the SDK docs or are they completely unavailable when creating a player using the SDK? If the latter is the case, is there any way I could control an embed created at the Deezer Music Plugins page? By control I mean I need to be able to play / pause the player, receive play / paused events and get the currently playing track title.
Background: I'm trying to achieve a symbiosis of multiple audio and / or video playback services within a single page; the goal is to stop any currently active player when a user starts playback in another player and to have an always visible play/pause button at the top of the viewport along with the currently playing track's name. If there is any other way to do this that I'm missing, I'm all ears :-) I know I could theoretically build my own player UI, but I wanted to retain the user experience that comes with a given service.

The only visual options available are those which are mentioned here: http://developers.deezer.com/sdk/javascript/player
Adding the new visual options provided by the new version of the widget is in our backlog, it will be available soon.

Embedded youtube videos - Simply play a video without audio?

Question:
How can I control the sound output of this embedded video without overly complicating things?
Possible Solution (Complex)
I've looked into the youtube javascript control API, and, correct me if I'm wrong, but that will force me to incorporate a lot of complication into the setup to accomplish what appears to be a very simple task.
Note:
This is all only tested for webkit at this stage
Setup:
I've created an element that simulates an iphone controlling the channel of a tv by swapping youtube videos like so:
var channel1 = "http://www.youtube.com/embed/dFU6Cy4Hd5A?autoplay=1&rel=0&controls=0&showinfo=0&disablekb=1&iv_load_policy=3&modestbranding=1";
$("#channel-1").click(function(){
$("#tv").attr("src", channel1);
});
where the #channel-1 id is connected to a specific button on the remote, and the tv id is connected to the video player.
It looks like this:
Edit:
If the API is the only to accomplish this, please include a link to a comprehensive tutorial teaching the youtube web API, because I've looked, and found nothing. The only thing I've found so far is the official API page, and that's like trying to learn PHP from the manual.

For loading videos you would use loadVideoById rather than the rather odd snippet you have in your question and to play without audio you simply mute the player using player.mute() (where player is a reference retrieved from the youtube player element itself like described here). And one last thing, don't forget to add enablejsapi=1 to the url of the player as described here.

I would use
event.target.mute();

HTML5 Audio - Progress Bar

I am trying to make an MP3 player in HTML5. Almost all of the work is done but what I need is that I want to replace the default controls from the <audio> tag and make my very own controls. Simple controls like play, pause, stop and volume are done but I want to make a progress bar that tracks the duration of the audio/MP3 , where when I click at the relevant position goes to the specific position on the track. Like the one in the following example.
http://msdn.microsoft.com/en-us/library/ie/gg589528(v=vs.85).aspx
The thing here is that in the above example the file/MP3 is already load and I am actually creating an audio element by using document.createElement("audio");
When I tried using different ways to change the above example I mostly get an error “cannot call method addeventlistener of null”. I want this player to run on Chrome.
Thanks in advance for your support and help.

There's a progress bar example in this tutorial I wrote a while back: Working with HTML5 multimedia components – Part 3: Custom controls . The calls etc. should be the same for a dynamically created audio element.
But yes, some code examples of what you're doing would be useful.