【已解决】用Bootstrap给html中添加显示后可以消失掉的提示或警告

折腾：

【已解决】Safari中js代码出错：Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context

期间，想要去给用户一个提示，让用户手动点击播放按钮，才能播放音乐。

看到文档中有：

Dismissible alerts

Alert messages alert.js

去试试

不过发现：

https://getbootstrap.com/docs/3.3/javascript/#tooltips

tooltip貌似更加适合此处场景？

难道是tooltip必须手动点击才可以？

好像是可以代码控制显示和消失的。

bootstrap dismissable tip

bootstrap dismissable alert

期间：

【已解决】jquery中设置html元素的css的值

此处，暂时不用自动消失的那种了

也不用显示后，用visibility是show还是hidden -》否则还占用html的显示空间，不好看

而是：需要显示时，插入显示

用于点击x去自己关闭即可

而插入显示，则需要去：

【已解决】jquery中如何插入html元素

【总结】

目前用如下代码：

var audioElt = $(".audio_player audio");

console.log("audioElt=%o", audioElt);

var audioObject = audioElt[0];

console.log("audioObject=%o", audioObject);

var playAudioPromise = undefined;

playAudioPromise = audioObject.play();

if (playAudioPromise !== undefined) {

playAudioPromise.then(() => {

// Auto-play started

console.log("Auto paly audio started, playAudioPromise=%o", playAudioPromise);

//for debug

showAudioPlayPreventedNotice();

}).catch(error => {

// Auto-play was prevented

// Show a UI element to let the user manually start playback

// showAudioPlayPreventedNotice();

console.error("play audio promise error=%o", error);

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

});

}

function showAudioPlayPreventedNotice(){

console.log("showAudioPlayPreventedNotice");

// var prevDisplayValue = $("#audio_play_prevented").css("display");

// console.log("prevDisplayValue=%o", prevDisplayValue);

// $("#audio_play_prevented").css({"display":"block"});

var curAudioPlayPreventedNoticeEltHtml = $("#audio_play_prevented").html();

console.log("curAudioPlayPreventedNoticeEltHtml=%o", curAudioPlayPreventedNoticeEltHtml);

if (curAudioPlayPreventedNoticeEltHtml !== undefined) {

console.log("already exist audio play prevented notice, so not insert again");

} else {

var audioPlayPreventedNoticeHtml = ‘<div id="audio_play_prevented" class="alert alert-warning alert-dismissible col-md-12 col-xs-12"><button type = "button" class="close" data-dismiss = "alert">x</button><strong>Notice:</strong> Auto play prevented, please mannually click above play button to play</div>’;

console.log("audioPlayPreventedNoticeHtml=%o", audioPlayPreventedNoticeHtml);

$(".audio_player").append(audioPlayPreventedNoticeHtml);

}

然后，效果是：