html 5 音频本地存储答案

【问题标题】：Html 5 audio local storagehtml 5 音频本地存储
【发布时间】：2016-05-11 10:02:55
【问题描述】：

我必须处理 HTML 页面中音频元素的行为。当用户到达页面时音频开始。如果他在同一会话期间再次到达该页面，我不想再播放它。我尝试了该代码，但它不起作用。你有什么建议吗？非常感谢

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<audio controls autoplay class="hidden-xs" style=" position:fixed; right:0; bottom:0; z-index:99999999999">
    <source src="music_bbms.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>
<script>
    $(document).ready(function() {
        if (!localStorage.getItem('played') {
            $('.music').attr('autoplay', false);
            localStorage.setItem('played', true);
        }
    });
</script>

【问题讨论】：

The audio starts when the user arrives on the page 请不要这样做。现在已经不是 1996 年了。
如果会话存在，你可以remove() player
另请注意，您的if 条件缺少)
我不会这样做。不幸的是，我的老板和他的客户与我的建议不同，他们可能想要一个 90 年代感觉的网站。我会努力解决的，谢谢

标签： jquery html audio

【解决方案1】：

以下是一些我认为可能是错误的：

您的音频元素上没有任何类.music，那么如何使用该类选择器更改其属性。我已向音频元素添加了一个 id，并使用该 id 来选择它。
if 条件中缺少右括号，我已修复该问题。
我假设，我们将项目值作为字符串存储在 sessionStorage 中。 sessionStorage 已被使用，因为您说您只想在当前会话中跟踪它。

     <audio id="music" controls class="hidden-xs" style=" position:fixed; right:0; bottom:0; z-index:99999999999">
        <source src="music_bbms.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
    <script>
        $(document).ready(function() {
            if ( sessionStorage.getItem('played') != "true" ) {
                $('#music').get(0).play();
                sessionStorage.setItem('played', "true");
            }
        });
    </script>

【讨论】：