使用js控制修改audio的source 的src属性,无法播放?

写了一个简单的demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

        <audio class="skPlayer-source" controls preload="auto"><source src="" type="audio/mpeg"></audio>

            <button >播放</button>
            <script src="https://cdnjs.cat.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
            
        <script>
            var audio = document.getElementsByTagName('audio')[0];
            var button = document.getElementsByTagName('button')[0];
            var source = document.getElementsByTagName('source')[0];
            $(button).bind('click',function(){
                //source.src="http://p2.music.126.net/vDBVFyat4CJcSXI_6-jzbA==/2092370627667073.mp3";//不可以播放
                audio.src = "http://p2.music.126.net/vDBVFyat4CJcSXI_6-jzbA==/2092370627667073.mp3";//可以播放
                console.log(audio);
                audio.paused && (audio.play())
            })
        </script>
    
</body>
</html>

只有修改audio 的src值,才可以播放

修改source 的 src值为什么却不可以播放呢?

怎么做,让可以通过修改source 的 src值使audio播放呢?

阅读 13.5k
2 个回答
     $(button).on('click',function(){
                 source.src="http://p2.music.126.net/vDBVFyat4CJcSXI_6-jzbA==/2092370627667073.mp3";
                 audio.load();
                 audio.addEventListener("canplaythrough",function(){
                    audio.paused && (audio.play());
                 },false);               
            }); 
新手上路,请多包涵

试一下audio.setAtrribute("src","xxx.mp3");
用JQuery的话就用attr()方法

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题